[ExtJS5 Study Notes] section 14th learn data Source store and datapanel in Extjs5

[ExtJS5 Study Notes] section 14th learn data Source store and datapanel in Extjs5

 

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

Table is a common form of web applications, and table data is the soul. After work today, I briefly studied the ext table. Let's figure out something for the moment. First, complete it later.

The results are not ideal:

The error message is as follows:

As you can see, it is caused by layout. If you cancel the boder mode of layout, the table will be displayed normally:

This is the result of the official example. The format here is a little bit unsightly.

The new Code is as follows:

 

{Xtype: 'panel ', items: [{xtype: 'gridpanel', // title: 'table panel ', columns: [{text: 'name', dataIndex: 'name'}, {text: 'mail', dataIndex: 'mail'}, {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 '}}), renderTo: Ext. getBody ()}]}

 

Use the code section 11th to modify the Main. js content and add the code above to study datastore and datapanel.