[ExtJS5 Study Notes] is the table Extjs5 unfriendly in section 15th? The frame attribute of the panel is cool. extjs5frame

[ExtJS5 Study Notes] is the table Extjs5 unfriendly in section 15th? The frame attribute of the panel is cool. extjs5frame

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?

The Code is as follows:

{Xtype: 'panel ', region: 'center', // layout: {type: 'fit'}, items: [{xtype: 'gridpanel ', title: 'table panel ', columns: [{text: 'name', dataIndex: 'name'}, {text: 'e-mail', dataIndex: 'e-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 '}}),}]}

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.