this.fields.get(c) is undefined

最新推荐文章于 2024-02-29 16:16:42 发布

iteye_15968

最新推荐文章于 2024-02-29 16:16:42 发布

阅读量86

点赞数

文章标签： javascript ViewUI

本文介绍了一个关于 ExtJS 中 GridPanel 的分组排序问题。作者在使用 GroupingStore 对数据进行分组并尝试排序时遇到错误，因为排序字段“company”并未在数据中定义。文章详细展示了如何配置 GridPanel 和 GroupingStore，以及如何定义 renderer 和 Cls 函数以自定义单元格样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做项目的时候碰到这个问题,和大家一起分享:

源代码:大家一定需要注意我的Store中的sortInfo:

<script type="text/javascript">
             Ext.onReady(function(){
                 
                 Ext.QuickTips.init();
                 
                 //别名
                 var xg=Ext.grid;
                 
                 //创建一个ArrayReader
                 var reader=new Ext.data.ArrayReader({},[
                   {name:"name",type:"string"},
                   {name:"age",type:"int"},
                   {name:"empno",type:"int"},
                   {name:"sex",type:"int"},
                   {name:"birthday",type:"date",dateFormat:"n/j h:ia"},
                   {name:"salary",type:"float"},
                   {name:"deptno",type:"int"}
                 ]);
                 
                 //创建一个store
                 var store=new Ext.data.GroupingStore({
                   reader:reader,
                   data:xg.dummyData,
                   sortInfo:{field:"company",direction:"ASC"},
                   groupField:"deptno"  //根据部门来分组
                 });
                 
                 
                 //name的renderer
                 function nameCls(val){
                    if(val.length>2){
                    return "<span stype='color:red;'>"+val+"</span>";
                    }
                    return "<span stype='color:blue;'>"+val+"</span>";
                 }

                //age的Cls
                function agCls(val){
                  if(val>25){
                  return "<span stype='color:red;'>"+val+"</span>";
                  }
                  return "<span stype='color:green;'>"+val+"</span>";
                }                 
                 
                 //创建一个gridPanel
                 var grid=new xg.GridPanel({
                  store:store,
                  columns:[
                     {header:"姓名",width:20,sortable:true,renderer:nameCls,dataIndex:"name"},
                     {header:"年龄",width:40,sortable:true,renderer:agCls,dataIndex:"age"},
                     {id:"empno",header:"编号",width:60,sortable:true,dataIndex:"empno"},
                     {header:"性别",width:20,sortable:true,dataIndex:"sex"},
                     {header:"生日",width:50,sotrable:true,renderer:Ext.util.Format.dateRenderer("m/d/Y"),dataIndex:"birthday"},
                     {header:"工资",width:30,sortable:true,renderer:Ext.util.Format.usMoney,dataIndex:"salary"},
                     {header:"部门编号",width:50,sortable:true,dataIndex:"deptno"}
                  ],
                  view:new Ext.grid.GroupingView({
                      forceFit:true,
                      groupTextTpl:"{text} ({[values.rs.length]} {[values.rs.length>1 ? 'Items' : 'Item']})"
                  }),
                  frame:true,
                  width:700,
                  height:450,
                  collapsible:true,//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。false表示为保持面板为一个静止的尺寸
                  animCollapse:true,//True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。
                  title:"雇员信息",
                  iconCls:"icon-grid",
                  fbar:["->",{
                    text:"clear Groping",
                    iconCls:"icon-clear-group",
                    handler:function(){
                      store.clearGouping();
                    }
                  }],
                  renderTo:document.body              
                 });
                 
              
             });
             
                //数据
                 Ext.grid.dummyData=[
                ["张三00",12,1001,1,"1990-05-20",3000,50],
                ["张三01",16,1002,0,"1990-05-21",3000,20],
                ["张三02",19,1003,1,"1990-05-22",3000,20],
                ["张三03",25,1004,1,"1990-05-23",3000,10],
                ["张三04",22,1005,1,"1990-05-24",3000,30],
                ["张三05",24,1006,1,"1990-05-25",3000,20],
                ["张三06",23,1007,0,"1990-05-26",3000,60],
                ["张三07",21,1008,0,"1990-05-27",3000,90],
                ["张三08",25,1009,0,"1990-05-28",3000,10],
                ["张三09",28,1010,1,"1990-05-29",6000,20],
                ["张三20",26,1011,0,"1990-05-20",2000,50],
                ["张三21",29,1012,0,"1990-06-20",8000,40],
                ["张三22",22,1013,1,"1990-01-20",3000,50],
                ["张三23",28,1014,0,"1990-02-20",3000,60],
                ["张三24",21,1015,1,"1990-08-20",3000,50]
               ];
                 
        
              		
		</script>

错误就出现在那里,没有company列但是,我却给company列排序所以报错,