首页 > 代码库 > [ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪
[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之后,就可以友好显示表格了。
[ExtJS5学习笔记]第十五节 Extjs5表格显示不友好?panel的frame属性在作怪
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。