Extjs Table Control Grid

The following describes the most common table controls in extjs: gridpanel, editorgridpanel, and propertygrid.

1. Create a common grid table

/**
Create a common grid table
*/
Function creategridpanel (){
VaR mydata = [// define data as an array
['3 M co', 71.72, 0.02, 0.03, '2017 am ', 'www .baidu.com'],
['Alcoa inc', 29.01, 0.42, 1.47, '2017 am ', 'www .163.com'],
['Boeing Co. ', 75.43, 0.53, 0.71, '2017 am', 'www .sina.com.cn '],
['Hewlett-Packard Co. ', 36.53,-0.03,-0.08, '2017 am', 'www .iteye.com '],
['Wal-Mart stores, Inc. ', 45.45, 0.73, 1.63, '2017 am', 'www .oracle.com ']
];
VaR mystore = new Ext. Data. arraystore ({// defines the store for storing data, and name each field
Data: mydata, // bind data to the store
Fields: [// name each column and set the Data Type
{Name: 'name '},
{Name: 'price', type: 'float '},
{Name: 'change', type: 'float '},
{Name: 'pctchang', type: 'float '},
{Name: 'lastchang', type: 'date', dateformat: 'n'/j h: '},
'Url'
]
});
VaR mygrid = new Ext. Grid. gridpanel ({// definition list
Store: mystore, // bind the defined store to this list
Columns: [// Bind Column data to the corresponding list header Based on the column name defined in store
{Header: 'name', width: 200, sortable: True, dataindex: 'name'}, // dataindex: fieldname defined in store.
{Header: 'price', Renderer: ext. util. format. usmoney, dataindex: 'price'}, // Renderer: ext. util. format. usmoney: the currency symbol of the dollar.
{Header: 'change', Renderer: function (v ){
If (v <= 0 ){
Return "<font color = 'red'>" + V + "</font> ";
} Else {
Return V;
}
}, Dataindex: 'change '},
{Header: 'change percentage ', dataindex: 'pctchang '},
{
Header: 'Last modified time', width: 135, dataindex: 'lastchange ',
Xtype: 'datecolumn', format: 'Y-m-d' // display the format of the date type variable
},
{Header: 'website', Renderer: function (v ){
Return v. Link (V); // rendered as a hyperlink
}, Dataindex: 'url'}]
});

New Ext. viewport ({layout: 'fit', items: mygrid}); // the whole body is displayed.
} Why do people allocate $ this = $ (this) Many jquery plug-ins?

2. Create an editable grid table

/**
Create an editable grid table
Note: The difference between editorgrid and grid lies in the following Attribute Editor: Ext. Form. textfield (datefield) defined in the columns to be editable)
*/
Function createeditorgridpanel (){
VaR mydata = [// define data as an array
['3 M co', 71.72, 0.02, 0.03, new date (), 'www .baidu.com '],
['Alcoa inc', 29.01, 0.42, 1.47, new date (), 'www .163.com '],
['Boeing Co. ', 75.43, 0.53, 0.71, new date (), 'www .sina.com.cn'],
['Hewlett-Packard Co. ', 36.53,-0.03,-0.08, new date (), 'www .iteye.com'],
['Wal-Mart stores, Inc. ', 45.45, 0.73, 1.63, new date (), 'www .oracle.com']
];
VaR mystore = new Ext. Data. arraystore ({// defines the store for storing data, and name each field
Data: mydata, // bind data to the store
Fields: [// name each column and set the Data Type
{Name: 'name '},
{Name: 'price', type: 'float '},
{Name: 'change', type: 'float '},
{Name: 'pctchang', type: 'float '},
{Name: 'lastchang', type: 'date '},
'Url'
]
});
VaR mygrid = new Ext. Grid. editorgridpanel ({// definition list
Store: mystore, // bind the defined store to this list
Columns: [// Bind Column data to the corresponding list header Based on the column name defined in store
{Header: 'name', width: 200, sortable: True, Editor: Ext. Form. textfield, dataindex: 'name'}, // dataindex: fieldname defined in store.
{Header: 'price', Renderer: ext. util. format. usmoney, dataindex: 'price'}, // Renderer: ext. util. format. usmoney: the currency symbol of the dollar.
{Header: 'change', Renderer: function (v ){
If (v <= 0 ){
Return "<font color = 'red'>" + V + "</font> ";
} Else {
Return V;
}
}, Dataindex: 'change '},
{Header: 'change percentage ', dataindex: 'pctchang '},
{
Header: 'Last modified time', width: 135, dataindex: 'lastchange', Editor: Ext. Form. datefield, // this field can be edited.
Xtype: 'datecolumn', format: 'Y-m-d h: I: s' // display the format of the date type variable
},
{Header: 'website', Renderer: function (v ){
Return v. Link (V); // rendered as a hyperlink
}, Dataindex: 'url'}]
});

New Ext. viewport ({layout: 'fit', items: mygrid}); // the whole body is displayed.
}

3. Create a grid table of property (key-value)

/**
Create a grid table of property (key-value)
Name and corresponding value (default value) are defined in source. You can edit and modify the value in the list on the page.
*/
Function createpropertygridpanel (){

VaR grid = new Ext. Grid. propertygrid ({
Title: 'properties grid ',
Autoheight: True,
Width: 300,
Source :{
"(Name)": "My object ",
"Created": new date (),
"Available": false,
"Version":. 01,
"Description": "A test object"
}
});
New Ext. viewport ({layout: 'fit', items: Grid}); // the whole body is displayed.
}

4. Load the corresponding list

/**
Load the corresponding list
*/
// Ext. onready (creategridpanel );
// Ext. onready (createeditorgridpanel );
Ext. onready (createpropertygridpanel );