今天在做項目的時候碰到這個問題,和大家一起分享:
原始碼:大家一定需要注意我的Store中的sortInfo:
<script type="text/javascript"><br /> Ext.onReady(function(){</p><p> Ext.QuickTips.init();</p><p> //別名<br /> var xg=Ext.grid;</p><p> //建立一個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:"salary",type:"float"},<br /> {name:"deptno",type:"int"}<br /> ]);</p><p> //建立一個store<br /> var store=new Ext.data.GroupingStore({<br /> reader:reader,<br /> data:xg.dummyData,<br /> sortInfo:{field:"company",direction:"ASC"},<br /> groupField:"deptno" //根據部門來分組<br /> });</p><p> //name的renderer<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> //建立一個gridPanel<br /> var grid=new xg.GridPanel({<br /> store:store,<br /> columns:[<br /> {header:"姓名",width:20,sortable:true,renderer:nameCls,dataIndex:"name"},<br /> {header:"年齡",width:40,sortable:true,renderer:agCls,dataIndex:"age"},<br /> {id:"empno",header:"編號",width:60,sortable:true,dataIndex:"empno"},<br /> {header:"性別",width:20,sortable:true,dataIndex:"sex"},<br /> {header:"生日",width:50,sotrable:true,renderer:Ext.util.Format.dateRenderer("m/d/Y"),dataIndex:"birthday"},<br /> {header:"工資",width:30,sortable:true,renderer:Ext.util.Format.usMoney,dataIndex:"salary"},<br /> {header:"部門編號",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表示為面板是可收縮的,並自動渲染一個展開/收縮的輪換按鈕在頭部工具條。false表示為保持面板為一個靜止的尺寸<br /> animCollapse:true,//True 表示為面板閉合過程附有動畫效果(預設為true,在類 Ext.Fx 可用的情況下)。<br /> title:"僱員資訊",<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> });</p><p> //資料<br /> Ext.grid.dummyData=[<br /> ["張三00",12,1001,1,"1990-05-20",3000,50],<br /> ["張三01",16,1002,0,"1990-05-21",3000,20],<br /> ["張三02",19,1003,1,"1990-05-22",3000,20],<br /> ["張三03",25,1004,1,"1990-05-23",3000,10],<br /> ["張三04",22,1005,1,"1990-05-24",3000,30],<br /> ["張三05",24,1006,1,"1990-05-25",3000,20],<br /> ["張三06",23,1007,0,"1990-05-26",3000,60],<br /> ["張三07",21,1008,0,"1990-05-27",3000,90],<br /> ["張三08",25,1009,0,"1990-05-28",3000,10],<br /> ["張三09",28,1010,1,"1990-05-29",6000,20],<br /> ["張三20",26,1011,0,"1990-05-20",2000,50],<br /> ["張三21",29,1012,0,"1990-06-20",8000,40],<br /> ["張三22",22,1013,1,"1990-01-20",3000,50],<br /> ["張三23",28,1014,0,"1990-02-20",3000,60],<br /> ["張三24",21,1015,1,"1990-08-20",3000,50]<br /> ];</p><p></script>
錯誤就出現在那裡,沒有company列但是,我卻給company列排序所以報錯,
找了很長時間,特地貼出來,不知道對大家有沒有協助.