[EXTJS5 Study notes] 15th section EXTJS5 table show unfriendly? Panel's Frame property is in mischief

This 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

This article Sushengmiyan

--------------------------------------------------------------------------------------------------------------- ---------------------

The official Ext example shows the following:

The code I wrote, that's what it looks like? What is the reason for this?

Why is the table shown in my ExtJS unfriendly? Panel's Frame property is in mischief

The title bar is not sorted and there are no separate bars, and the data below is not segmented and looks uncomfortable. Who's to see 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: ' 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 ': ' [email Protected] ",  " phone ":" 555-111-1224 "  },{' name ': ' Bart ',  " email ":" [email protected] ",  " phone ": "555-222-1234"},{' name ': ' Homer ', "email": "[email protected]",  "phone": "555-222-1244"  },{' name ': ' Marge ' , "email": "[email protected]", "Phone": "555-222-1254"  }]}, Proxy: {type: ' Memory ', reader: {type: ' JSON ', Rootproperty: ' Items '}}  ),}]      }

Comparing the official grid binding XML file, it is found that the panel's frame property needs to be set to true. So try again:

The final results are as follows:

The latest code is as follows:

{xtype : ' Panel ', frame:true,//plus frame property, table display is friendly region: ' Center ',//layout: {type: ' Fit '},items:[{xtype: ' Gridpanel ', ti Tle: ' Table panel ', columns: [{text: ' name ', Dataindex: ' name '}, {text: ' Email ', Dataindex: ' Email ', flex:1}, {text: ' phone ', dataindex: ' phone '}], store:Ext.create (' Ext.data.Store ', {//ali As: ' Paneldatastore ',//storeid: ' Simpsonsstore ', fields:[' name ', ' email ', ' phone ', data:{' items ': [{' Name ': ' Lisa ', ' Email ": [email protected]", "Phone": "555-111-1224"},{' name ': ' Bart ', "email": "[email protected]", "phone ":" 555-222-1234 "},{' name ': ' Homer '," email ":" [email protected] "," Phone ":" 555-222-1244 "},{' name ': ' Marge '," em Ail ":" [email protected] "," Phone ":" 555-222-1254 "}]}, Proxy: {type: ' Memory ', reader: {type: ' json ', Rootproperty: ' Items '}}),}]} 

Cause: After the panel's Frame property is set to true, the table can be displayed in a friendly format.

[EXTJS5 Study notes] 15th section EXTJS5 table show unfriendly? Panel's Frame property is in mischief