[ExtJS5 Study Notes] is the table Extjs5 unfriendly in section 15th? The frame attribute of the panel is playing a strange role.

[ExtJS5 Study Notes] is the table Extjs5 unfriendly in section 15th? The frame attribute of the panel is playing a strange role.

Address: http://blog.csdn.net/sushengmiyan/article/details/39057243

Sencha official API: http://docs.sencha.com/extjs/5.0/apidocs! /Api/Ext. grid. Panel-cfg-store

Author: sushengmiyan

Certificate ------------------------------------------------------------------------------------------------------------------------------------

The official example of Ext is as follows:

What does the code I wrote show? Why?

Why is table display unfriendly in my Extjs? The frame attribute of the panel is playing a strange role.

The title bar is not sorted, and there are no separators. The data below is not separated, and it looks uncomfortable. Who will show the symptoms?

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD48cD60 + placement = "brush: java;"> {xtype: 'panel ', region: 'center', // layout: {type: 'fit'}, items: [{xtype: 'gridpanel ', title: 'table panels', columns: [{text: 'name', dataIndex: 'name'}, {text: 'e-mail ', 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 '}}),}]}

Compared with the official example of binding an xml file to a grid, we found that the frame attribute of the panel needs to be set to true. Then try again:

The final result is as follows:

The latest code is as follows:

{Xtype: 'panel ', frame: true, // with the frame attribute added, the table display is friendly to region: 'center', // layout: {type: 'fit '}, items: [{xtype: 'gridpanel ', title: 'table panels', columns: [{text: 'name', dataIndex: 'name'}, {text: 'mail', dataIndex: 'mail', 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 '}}),}]}

Cause: After the frame attribute of the panel is set to true, the table can be displayed in a friendly manner.