[ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39057243
sencha官方API: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel-cfg-store
本文作者:sushengmiyan
------------------------------------------------------------------------------------------------------------------------------------
Ext的官方例子显示如下:
我写的代码,显示出来的就是这个样子?这是何原因?
为什么我的Extjs中表格显示不友好?panel的frame属性在作怪
标题栏没有排序那些也没有分隔条,下方的数据也是没有分割,看起来很难受的。谁给看下症候在哪?
代码如下:
{xtype: 'panel',region: 'center',//layout: { type: 'fit' },items:[{xtype: 'gridpanel',title: '表格面板',columns: [{ text: 'Name', dataIndex: 'name' },{ text: 'Email', dataIndex: 'email' ,flex: 1 },{ text: 'Phone', dataIndex: 'phone' }],store: Ext.create('Ext.data.Store',{//alias: 'paneldatastore',//storeId:'simpsonsStore',fields:['name', 'email', 'phone'],data:{'items':[{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },{ 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244" },{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }]},proxy: {type: 'memory',reader: {type: 'json',rootProperty: 'items'}}}),}]}
对比了官方提供的grid绑定xml文件的例子,发现需要将panel的frame属性设置为true。于是重新来试一下:
最终显示效果如下:
最新代码如下:
{xtype: 'panel',frame: true,//加上frame属性,表格显示就友好了region: 'center',//layout: { type: 'fit' },items:[{xtype: 'gridpanel',title: '表格面板',columns: [{ text: 'Name', dataIndex: 'name' },{ text: 'Email', dataIndex: 'email' ,flex: 1 },{ text: 'Phone', dataIndex: 'phone' }],store: Ext.create('Ext.data.Store',{//alias: 'paneldatastore',//storeId:'simpsonsStore',fields:['name', 'email', 'phone'],data:{'items':[{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },{ 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244" },{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }]},proxy: {type: 'memory',reader: {type: 'json',rootProperty: 'items'}}}),}]}
原因:panel的frame属性设置为true之后,就可以友好显示表格了。
转载于:https://www.cnblogs.com/muyuge/p/6152506.html
[ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪相关推荐
- 学习笔记第十五节:闵可夫斯基和
正题 闵可夫斯基和类型的问题是这样子的,给出两个点集A和B,要你求A+B的凸包大小. 这个就很有趣了. 因为A+B中的点集中一共有这么多个点,那么就很烦. 当然,凸包肯定会存在于A的凸包+B的凸包上. ...
- [ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42016107 本文作者:sushengmiyan ------------------ ...
- 学习笔记第二十五节课
正则介绍_grep 正则就是一串有规律的字符串,包含特殊符号. 对以后的写shell脚本很大的帮助.可以实现很多复杂的需求. 第一个工具 grep grep 用来过滤关键词. -c 行数,过滤出来的这 ...
- cortex_m3_stm32嵌入式学习笔记(十五):待机唤醒实验(WK_UP外部中断)
cortex_m3_stm32嵌入式学习笔记(十五):待机唤醒实验(WK_UP外部中断) https://blog.csdn.net/qq_16255321/article/details/43086 ...
- JavaScript学习笔记(十五)
JavaScript学习笔记(十五) 事件 事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是 ...
- OpenCV学习笔记(十五):图像仿射变换:warpAffine(),getRotationMatrix2D()
OpenCV学习笔记(十五):图像仿射变换:warpAffine(),getRotationMatrix2D() 一个任意的仿射变换都能表示为乘以一个矩阵(线性变换)接着再加上一个向量(平移)的形式. ...
- MATLAB学习笔记(十五)
MATLAB学习笔记(十五) 一.非线性方程求解与函数极值计算 1.1 非线性方程数值求解 1.2 函数极值的计算 1.2.1 无约束最优化问题 1.2.2 有约束最优化问题 一.非线性方程求解与函数 ...
- 学习笔记(十五)——镜像的知识点与注意事项
学习笔记(十五)--镜像的知识点与注意事项 一.基础知识 1.SQL Server镜像只有两种模式:高安全模式和高性能模式.两种模式的主要区别在于在事务提交后的操作. 在高性能模式下,主体服务器不需要 ...
- Cty的Linux学习笔记(十五——wget)
Linux学习笔记--第十五篇 wget命令用于在终端中下载网络文件,格式为"wget [参数] 下载地址" 参数: -b:后台下载模式 -P:下载到指定目录 -t:最大尝试次 ...
最新文章
- b树删除节点每次只能删一个吗_面试官,请不要问我B+树了!!
- LA3403 天平难题
- 理解js中this的指向
- MySQL高可靠_MySQL高可用与高可靠架构
- Leetcode题库203.移除链表元素(尾指针填充 / 虚头指针定义 c实现)
- SAP odata消费失败的故障排错
- 将文件中所有数读到一个数组中_「数据结构与算法」将5个文件中的一千万年龄合并到一个新文件中...
- WebApp实时开源框架Clouda---认识心得
- 计算机程序设计师未来发展,未来的电脑程序设计师作文
- win10右键一直转圈_【雷粉百科】windows10鼠标点击右键出现卡顿或者转圈
- Python+大数据-数据处理与分析-pandas快速入门
- 陳三甲网络笔记:赚钱路上,一些人生思考(连载四)
- 减加乘除全选不选dom验证
- 亚马逊中国云计算服务器,云计算实战:Amazon EC2之初体验
- SI,SIS,SIR,SEIRD模型
- Failed to start LSB: Bring up/down networking
- 行为驱动开发(BDD)全面介绍
- 目标检测通用trick
- 算法入门004-数据结构
- 转压FLV to Mp3
热门文章
- [物理学与PDEs]第3章第3节 电导率 $\sigma$ 为无穷时的磁流体力学方程组 3.3 磁场线``冻结''原理...
- ios快速将显卡中数据读出压缩成视频--cocos2dx扩展
- 基于tcp的网络程序_【CVPR 2020 Tutorial】基于神经网络的符号化视觉推理和程序合成(2)...
- python爬虫网络中断_Python 爬虫总是超时中断?试试Tenacity重试模块
- 华为鸿蒙净水机,华为鸿蒙OS 2.0手机版功能抢先曝光
- 海报合成_新年元旦创意合成设计之跨年海报!这组海报我打99分!
- android 图片转字符串,图片转字符文字怎么转?安卓字符图App
- mysql 子查询代替_MySQL查询优化:用子查询代替非主键连接查询
- 金古桥机器人_泽塔奥特曼上演“吃瘪预定”,金古桥强势回顾,阿尔法被骑着打脸...
- 圆 最小外包矩形_【OpenCV3图像处理】提取轮廓的凸包、外包矩形、最小外包矩形、最小外包圆...