Ext. onready (function () {<br/> // initialize the global quicktips instance to make tip prompt available <br/> Ext. quicktips. init (); <br/> // alias <br/> var XG = ext. GRID; </P> <p> // create an arrayreader <br/> var reader = new Ext. data. arrayreader ({}, [<br/> {name: "name", type: "string" },< br/> {name: "Age", type: "int" },< br/> {name: "empno", type: "int" },< br/> {name: "sex", type: "int" },< br/> {name: "Birthday", type: "date", dateformat: "N/j h: IA "}, <br/> {name: "sala Ry ", type:" float "},< br/> {name:" deptno ", type:" int "},< br/> {name:" DESC ", type: "string" }< br/>]); </P> <p> // create a rowexpander, style when the row is expanded <br/> var expander = new Ext. UX. grid. rowexpander ({<br/> TPL: New Ext. template (<br/> '<p> <B> name: </B> {name} </P> <br/> ', <br/> '<p> <B> Description: </B> {DESC} </P>' <br/>) <br/> }); </P> <p> // gender ernderer <br/> function sexcls (VAL) {<br/> return val = 0? "Male": "female"; <br/>}</P> <p> // create a grid <br/> var grid1 = new XG. gridpanel ({<br/> store: New Ext. data. store ({<br/> reader: reader, <br/> data: XG. dummydata // Data Model <br/>}), <br/> CM: New XG. columnmodel ({<br/> defaults: {<br/> width: 20, <br/> sortable: True <br/>}, <br/> columns: [<br/> expander, <br/> {header: "name", dataindex: "name" },< br/> {header: "Age", dataindex: "Age" },< br/> {ID: "empno", header: "edited ", Width: 40, dataindex:" empno "},< br/> {header:" gender ", dataindex:" sex ", Renderer: sexcls }, <br/> {header: "Birthday", dataindex: "Birthday", Renderer: ext. util. format. daterenderer ("Y-m-d"), dataindex: "birtdhay" },< br/> {header: "salary", dataindex: "salary", dataindex: "salary" },< br/> {header: "department ID", dataindex: "deptno" }< br/>] <br/> }), <br/> viewconfig: {// The configuration item object applied to the grid's UI attempt, any Ext. grid. available configuration options of the gridview can be specified here. If view is specified, this item is invalid <br/> forcefit: True <br/>}, <br/> width: 600, <br/> Height: 300, <br/> plugins: expander, <br/> collapsible: True, // true indicates that the Panel is retractable <br/> animcollapse: false, // true indicates that animation effects are attached to the Panel closure process. <br/> title: "employee information", <br/> iconcls: "icon-grid ", // set the style class of the icon for this panel. This method overwrites the existing icon <br/> renderto: document. body // provided to the body of the form <br/>}); </P> <p> // data <br/> Ext. grid. dummydata = [<br/> ["Zhang san00", 1, "1990-05-20",], <br/> ["Zhang san01", 0, "1990-05-21",], <br/> ["Zhang San 02", 1, "1990-05-22",], <br/> ["Zhang San 03, 1, "1990-05-23",], <br/> ["Zhang San 04", 1, "1990-05-24",], <br/> ["Zhang San 05 ", 24, 1, "1990-05-25", 20], <br/> ["Zhang San 06", 0, "1990-05-26", 60], <br/> ["Zhang san07", 0, "1990-05-27",], <br/> ["Zhang san08", 0, "1990-05-28 ", ], <br/> ["Zhang San 09", 1, "1990-05-29",], <br/> ["Zhang San 20", 0, "1990-05-20",], <br/> ["Zhang San 21", 0, "1990-06-20",], <br/> ["Zhang San 22, 1, "1990-01-20",], <br/> ["Zhang San 23", 0, "1990-02-20",], <br/> ["Zhang San 24 ",, 1, "1990-08-20",] <br/>]; </P> <p> // Add description information <br/> for (VAR I = 0; I <Ext. grid. dummydata. length; I ++) {<br/> Ext. grid. dummydata [I]. push ('This is a simple demonstration information, test description information. '); <br/>}
The above is my code:
Note the format of my date,
Resolution format
Note what your format looks like, so you need to parse it in what format: Y-m-d
] There is another place:
It should be changed to the same as in birthday and reader.
