I encountered this problem during my project today and shared it with you:
Source code: Pay attention to the sortinfo in my store:
<SCRIPT type = "text/JavaScript"> <br/> Ext. onready (function () {</P> <p> Ext. quicktips. init (); </P> <p> // 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: "s Alary ", type:" float "},< br/> {name:" deptno ", type:" int "} <br/>]); </P> <p> // create a store <br/> var store = new Ext. data. groupingstore ({<br/> reader: reader, <br/> data: XG. dummydata, <br/> sortinfo: {field: "company", direction: "ASC" },< br/> groupfield: "deptno" // group by Department <br/>}); </P> <p> // Renderer of name <br/> function namecls (VAL) {<br/> If (Val. length> 2) {<br/> return "<span stype = 'color: red; '>" + Val + "</span> "; <Br/>}< br/> return" <span stype = 'color: Blue; '> "+ Val +" </span> "; <br/>}</P> <p> // age CLS <br/> function agcls (VAL) {<br/> If (Val> 25) {<br/> return "<span stype = 'color: red; '>" + Val + "</span> "; <br/>}< br/> return "<span stype = 'color: green; '>" + Val + "</span> "; <br/>}</P> <p> // create a gridpanel <br/> var grid = new XG. gridpanel ({<br/> store: store, <br/> columns: [<br/> {header: "name", width: 20, sortable: TR UE, Renderer: namecls, dataindex: "name" },< br/> {header: "Age", width: 40, sortable: True, Renderer: agcls, dataindex: "Age" },< br/> {ID: "empno", header: "No.", width: 60, sortable: True, dataindex: "empno "}, <br/> {header: "gender", width: 20, sortable: True, dataindex: "sex" },< br/> {header: "Birthday", width: 50, sotrable: True, Renderer: ext. util. format. daterenderer ("m/D/y"), dataindex: "Birthday" },< br/> {header: "salary", width: 30, sortable: True, Renderer: ext. util. format. usmoney, dataindex: "salary" },< br/> {header: "department ID", width: 50, sortable: True, dataindex: "deptno"} <br/>], <br/> View: New Ext. grid. groupingview ({<br/> forcefit: True, <br/> grouptexttpl: "{text} ({[values. rs. length]} {[values. rs. length> 1? 'Items ': 'item']}) "<br/>}), <br/> frame: True, <br/> width: 700, <br/> height: 450, <br/> collapsible: True, // true indicates that the Panel can be shrunk, and a rotation button for expansion/contraction is automatically rendered in the header toolbar. False indicates to keep the panel as a static size <br/> animcollapse: True, // true indicates that the Panel closure process is accompanied by an animation effect (the default value is true, in the class Ext. if FX is available ). <Br/> title: "employee information", <br/> iconcls: "icon-grid", <br/> fbar: ["-> ", {<br/> text: "Clear groping", <br/> iconcls: "icon-clear-group", <br/> handler: function () {<br/> store. cleargouping (); <br/>}< br/>}], <br/> renderto: document. body <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> </SCRIPT>
The error is reported because there is no company column, but I ordered the company column,
I posted it for a long time. I don't know if it will help you.