10.GridPanel

最新推荐文章于 2024-09-20 11:14:58 发布
最新推荐文章于 2024-09-20 11:14:58 发布
阅读量93 收藏
点赞数
文章标签： json
原文链接：http://www.cnblogs.com/atwanli/articles/4715371.html
版权

数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

 

示例一：最简单的GridPanel。

Ext.onReady(function(){
    var data = [
       [1,"张三",20],
       [2,"李四",20],
       [3,"王五",20],
       [4,"赵六",20]
    ]

    var store = new Ext.data.SimpleStore({
       data:data,
       fields:["id","name","age"]
    });  

    var gridPanel = new Ext.grid.GridPanel({
       id:"gridPanel",
       renderTo:"showGrid",
       title:"员工信息",
       width:400,
       height:400,
       store:store,
       columns:[
           {header:"id",dataIndex:"id"},
           {header:"姓名",dataIndex:"name"},
           {header:"年龄",dataInde:"age"}
       ],
       autoExpandColumn:2// 默认自动扩展宽度的字段
    });
});

 

 

示例二：可排序的GridPanel。

Ext.onReady(function(){
    var data = [
       [1,"张三",43],
       [2,"李四",34],
       [3,"王五",26],
       [4,"赵六",67]
    ]

    var store = new Ext.data.SimpleStore({
       data:data,
        fields:["id","name","age"]
    });   

    var gridPanel = new Ext.grid.GridPanel({
       id:"gridPanel",
       renderTo:"showGrid",
       title:"员工信息",
       width:400,
       height:400,
       store:store,
       columns:[
           {header:"id",dataIndex:"id",sortable:true},
           {header:"姓名",dataIndex:"name",sortable:true},
           {header:"年龄",dataIndex:"age",sortable:true}
       ],
       autoExpandColumn:2// 默认自动扩展宽度的字段
    });
});

 

 

示例三：使用Ext.grid.ColumnModel来创建表格中列的定义信息。

Ext.onReady(function(){
    var data = [
       [1,"张三",43],
       [2,"李四",34],
       [3,"王五",26],
       [4,"赵六",67]
    ]   

    var store = new Ext.data.SimpleStore({
       data:data,
       fields:["id","name","age"]
    });   

    var colM = new Ext.grid.ColumnModel([
           {header:"id",dataIndex:"id",sortable:true},
           {header:"姓名",dataIndex:"name",sortable:true},
           {header:"年龄",dataIndex:"age",sortable:true}
    ]);

    var gridPanel = new Ext.grid.GridPanel({
       id:"gridPanel",
       renderTo:"showGrid",
       title:"员工信息",
       width:400,
       height:400,
       store:store,
       cm:colM,
       autoExpandColumn:2// 默认自动扩展宽度的字段
    });
});

 

 

示例四：添加链接。

function showUrl(value){
       return "<a href=http://"+value+">"+value+"</a>";
}
Ext.onReady(function(){
    var data = [
       [1,"张三",43,"#"],
       [2,"李四",34,"#"],
       [3,"王五",26,"#"],
       [4,"赵六",67,"#"]
    ]   

    var store = new Ext.data.SimpleStore({
       data:data,
       fields:["id","name","age","homePage"]
    });   

    var colM = new Ext.grid.ColumnModel([
           {header:"id",dataIndex:"id",sortable:true},
           {header:"姓名",dataIndex:"name",sortable:true},
           {header:"年龄",dataIndex:"age",sortable:true},
           {header:"个人主页",dataIndex:"homePage",renderer:showUrl}
    ]);   

    var gridPanel = new Ext.grid.GridPanel({
       id:"gridPanel",
       renderTo:"showGrid",
       title:"员工信息",
       width:500,
       height:400,
       store:store,
       cm:colM,
       autoExpandColumn:3// 默认自动扩展宽度的字段
    });
});

 

 

示例五：使用JsonStore数据存储器。

function showUrl(value){
       return "<a href=http://"+value+">"+value+"</a>";
}

Ext.onReady(function(){
    var data = [
       {
           id:1,name:"张三",age:43,omePage:"#"
       },
       {
           id:2,ame:"李四",age:34,homePage:"#"
       },
       {
           id:3,name:"王五",age:26,homePage:"#"
       },
       {
           id:4,name:"赵六",age:67,homePage:"#"
       }
   ]   

    var store = new Ext.data.JsonStore({
       data:data,
       fields:["id","name","age","homePage"]
    });   

    var colM = new Ext.grid.ColumnModel([
           {header:"id",dataIndex:"id",sortable:true},
           {header:"姓名",dataIndex:"name",sortable:true},
           {header:"年龄",dataIndex:"age",sortable:true},
           {header:"个人主页",dataIndex:"homePage",renderer:showUrl}
    ]);   

    var gridPanel = new Ext.grid.GridPanel({
       id:"gridPanel",
       renderTo:"showGrid",
       title:"员工信息",
       width:500,
       height:400,
       store:store,
       cm:colM,
       autoExpandColumn:3// 默认自动扩展宽度的字段
    });
});

 

 

示例六：使用XML储存数据。

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
    <row>
       <id>1</id>
       <name>张三</name>
       <age>43</age>
       <homePage>#</homePage>
    </row>
    <row>
       <id>2</id>
       <name>李四</name>
       <age>24</age>
       <homePage>#</homePage>
    </row>
    <row>
       <id>3</id>
       <name>王五</name>
       <age>45</age>
       <homePage>#</homePage>
    </row>
    <row>
       <id>4</id>
       <name>赵六</name>
       <age>12</age>
       <homePage>#</homePage>
    </row>
</dataset>

 

 

 

 

1.记录类型。

示例一：当数据为二维数组时

Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";

   

    //数据

    var data = [
       [1,"张三",45],
       [2,"李四",23],
       [3,"王五",12],
       [4,"赵六",56]
    ];

    //创建记录类型Person
    var Person = new Ext.data.Record.create([
       {name:"id",mapping:0},
       {name:"name",mapping:1},
       {name:"age",mapping:2}
    ]);

    //存储器
    var store = new Ext.data.Store({
       reader:new Ext.data.ArrayReader({id:0},Person),
       data:data
    })
   
    //表格面板
    var gridPanel = new Ext.grid.GridPanel({
       id:"gridPanel",
       renderTo:"hello",
       title:"人员信息",
       width:500,
       height:300,
       store:store,
       columns:[
           {header:"id",dataIndex:"id",sortable:true},
           {header:"姓名",dataIndex:"name",sortable:true},
           {header:"年龄",dataIndex:"age",sortable:true}
       ],
       autoExpandColumn:1
    })
});

 

 

示例二：当数据为Json对象数组时

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
    //数据
    var data = [
       {
           id:1,
           name:"张三",
           age:45,
           homePage:"#"
       },
       {
           id:2,
           name:"李四",
           age:23,
           homePage:"#"
       },
       {
           id:3,
           name:"王五",
           age:45,
           homePage:"bbs.ibeifeng.com"
       },
       {
           id:4,
           name:"赵六",
           age:90,
           homePage:"www.qq.com"
       }
    ];

   //创建记录类型Person
    var Person = new Ext.data.Record.create([
       {name:"id",mapping:"id"},
       {name:"name",mapping:"name"},
       {name:"age",mapping:"age"},
       {name:"homePage",mapping:"homePage"}
    ]);

    //存储器
    var store = new Ext.data.Store({
       reader:new Ext.data.JsonReader({id:0},Person),
       data:data
    })
   
    //表格面板
    var gridPanel = new Ext.grid.GridPanel({
       id:"gridPanel",
       renderTo:"hello",
       title:"人员信息",
       width:500,
       height:300,
       store:store,
       columns:[
           {header:"id",dataIndex:"id",sortable:true},
           {header:"姓名",dataIndex:"name",sortable:true},
           {header:"年龄",dataIndex:"age",sortable:true},
           {header:"个人主页",dataIndex:"homePage",sortable:true}
       ],
       autoExpandColumn:3
    })
});

 

示例三：当数据为xml文件时。

Ext.onReady(function(){
   Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
   //创建记录类型Person
   var Person = new Ext.data.Record.create([
      {name:"id",mapping:"id"},
      {name:"name",mapping:"name"},
      {name:"age",mapping:"age"},
      {name:"homePage",mapping:"homePage"}
   ]);
   //存储器
   var store = new Ext.data.Store({
      reader:new Ext.data.XmlReader({
          record: "row",
          id: "id"
      },Person),
      url:"data.xml"
   })
   store.load();
   //表格面板
   var gridPanel = new Ext.grid.GridPanel({
      id:"gridPanel",
      renderTo:"hello",
      title:"人员信息",
      width:500,
      height:300,
      store:store,
      columns:[
          {header:"id",dataIndex:"id",sortable:true},
          {header:"姓名",dataIndex:"name",sortable:true},
          {header:"年龄",dataIndex:"age",sortable:true},
          {header:"个人主页",dataIndex:"homePage",sortable:true}
      ],
      autoExpandColumn:3
   })
});

 

1.自定义表格渲染函数

function showUrl(value){
      return "<a href=http://"+value+" target='_blank'>"+value+"</a>";
}

function formatAge(value,metadata){
   if(value > 30) {
      metadata.attr = 'style="background-color:#CCFFFF"';
   }
   return value;
}

Ext.onReady(function(){
   var store=new Ext.data.Store({
      url:"data.xml",
      reader:new Ext.data.XmlReader({
      record:"row"},
      ["id","name","age","homePage"])
   });
   var colM = new Ext.grid.ColumnModel([
          {header:"id",dataIndex:"id",sortable:true},
          {header:"姓名",dataIndex:"name",sortable:true},
          {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge},
          {header:"个人主页",dataIndex:"homePage",renderer:showUrl}
   ]);
   var gridPanel = new Ext.grid.GridPanel({
      id:"gridPanel",
      renderTo:"showGrid",
      title:"员工信息",
      width:500,
      height:400,
      store:store,
      cm:colM,
      autoExpandColumn:3// 默认自动扩展宽度的字段
   });
   store.load();

});

 

 

2.单元格选择模式

function showUrl(value){
      return "<a href=http://"+value+" target='_blank'>"+value+"</a>";
}

function formatAge(value,metadata){
   if(value > 30) {
      metadata.attr = 'style="background-color:#CCFFFF"';
   }
   return value;
}

Ext.onReady(function(){
   var store=new Ext.data.Store({
      url:"data.xml",
      reader:new Ext.data.XmlReader({
      record:"row"},
      ["id","name","age","homePage"])
   });
   var colM = new Ext.grid.ColumnModel([
          {header:"id",dataIndex:"id",sortable:true},
          {header:"姓名",dataIndex:"name",sortable:true},
          {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge},
          {header:"个人主页",dataIndex:"homePage",renderer:showUrl}
   ]);
   var gridPanel = new Ext.grid.GridPanel({
      id:"gridPanel",
      renderTo:"showGrid",
      title:"员工信息",
      width:500,
      height:400,
      store:store,
      cm:colM,
      sm:new Ext.grid.CellSelectionModel(),
      autoExpandColumn:3,// 默认自动扩展宽度的字段,
      bbar:[
          {
             text:"获得所选单元格",
             handler:function(){
                 var cell = gridPanel.getSelectionModel().getSelectedCell();
                 alert(cell);
                 alert(cell[0]);
                 alert(cell[1]);
                 alert(gridPanel.getColumnModel().getDataIndex(cell[1]));
                 var colName = gridPanel.getColumnModel().getDataIndex(cell[1]);
                 alert(gridPanel.getStore().getAt(cell[0]).get(colName));
             }
          }
      ]
   });
   store.load();

});

 

 

3.行选择模式。

function showUrl(value){
      return "<a href=http://"+value+" target='_blank'>"+value+"</a>";
}

function formatAge(value,metadata){
   if(value > 30) {
      metadata.attr = 'style="background-color:#CCFFFF"';
   }
   return value;
}

Ext.onReady(function(){
   var store=new Ext.data.Store({
      url:"data.xml",
      reader:new Ext.data.XmlReader({
      record:"row"},
      ["id","name","age","homePage"])
   });
   var colM = new Ext.grid.ColumnModel([
          {header:"id",dataIndex:"id",sortable:true},
          {header:"姓名",dataIndex:"name",sortable:true},
          {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge},
          {header:"个人主页",dataIndex:"homePage",renderer:showUrl}
   ]);
   var gridPanel = new Ext.grid.GridPanel({
      id:"gridPanel",
      renderTo:"showGrid",
      title:"员工信息",
      width:500,
      height:400,
      store:store,
      cm:colM,
      sm:new Ext.grid.RowSelectionModel(),
      autoExpandColumn:3,// 默认自动扩展宽度的字段,
      bbar:[
          {
             text:"获得所选行",
             handler:function(){
                 var msg = '';
                 var cell = gridPanel.getSelectionModel().each(function(rec){
                    msg = msg + rec.get('id') + "," +  rec.get('name') + '\n';
                 });
                 alert(msg);
             }
          }
      ]
   });
   store.load();
});

 

 

4.复选框选择模式。

function showUrl(value){
      return "<a href=http://"+value+" target='_blank'>"+value+"</a>";
}

function formatAge(value,metadata){
   if(value > 30) {
      metadata.attr = 'style="background-color:#CCFFFF"';
   }
   return value;
}


Ext.onReady(function(){
   var store=new Ext.data.Store({
      url:"data.xml",
      reader:new Ext.data.XmlReader({
      record:"row"},
      ["id","name","age","homePage"])
   });
   var sm = new Ext.grid.CheckboxSelectionModel();
   var colM = new Ext.grid.ColumnModel([
          sm,
          {header:"id",dataIndex:"id",sortable:true},
          {header:"姓名",dataIndex:"name",sortable:true},
          {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge},
          {header:"个人主页",dataIndex:"homePage",renderer:showUrl}
   ]);
   var gridPanel = new Ext.grid.GridPanel({
      id:"gridPanel",
      renderTo:"showGrid",
      title:"员工信息",
      width:500,
      height:400,
      store:store,
      cm:colM,
      sm:sm,
      autoExpandColumn:3,// 默认自动扩展宽度的字段,
      bbar:[
          {
             text:"获得所选行",
             handler:function(){
                 var msg = '';
                 var cell = gridPanel.getSelectionModel().each(function(rec){
                    msg = msg + rec.get('id') + "," +  rec.get('name') + '\n';
                 });
                 alert(msg);
             }
          }
      ]
   });
   store.load();
});

 

 

 

1.表格视图。

<?xml version="1.0" encoding="UTF-8"?>

<dataset>
   <row>
      <id>1</id>
      <name>张三</name>
      <age>43</age>
      <homePage>#</homePage>
      <jianli>
          本人来自**大学，。。。。。。。
      </jianli>
   </row>
   <row>
      <id>2</id>
      <name>李四</name>
      <age>24</age>
      <homePage>#</homePage>
      <jianli>
          本人来自**大学，。。。。。。。
      </jianli>
   </row>
   <row>
      <id>3</id>
      <name>王五</name>
      <age>45</age>
      <homePage>#</homePage>
      <jianli>
          本人来自**大学，。。。。。。。
      </jianli>
   </row>
   <row>
      <id>4</id>
      <name>赵六</name>
      <age>12</age>
      <homePage>#</homePage>
      <jianli>
          本人来自**大学，。。。。。。。
      </jianli>
   </row>

</dataset>

 

 

function showUrl(value){
      return "<a href=http://"+value+" target='_blank'>"+value+"</a>";
}

function formatAge(value,metadata){
   if(value > 30) {
      metadata.attr = 'style="color:red"';
   }
   return value;
}

function formateID(value,metadata){
   if(value % 2 == 0) {
      metadata.attr = 'style="background-color:red"';
   }
   return value;
}

Ext.onReady(function(){
   Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
   //记录类型
   var Person = new Ext.data.Record.create([
      {name:"id",mapping:"id"},
      {name:"name",mapping:"name"},
      {name:"age",mapping:"age"},
      {name:"homePage",mapping:"homePage"},
      {name:"jianli",mapping:"jianli"}
   ]);
   //存储器
   var store = new Ext.data.Store({
      url:"data.xml",
      reader:new Ext.data.XmlReader(
          {record: "row",id:"id"},
      Person)
   });
   store.load();
   var sm = new Ext.grid.CheckboxSelectionModel();
   //表格面板
   var gridPanel = new Ext.grid.GridPanel({
      id:"gridPanel",
      renderTo:"hello",
       title:"人员信息",
      width:700,
      height:300,
      store:store,
      columns:[
          sm,
          {header:"id",dataIndex:"id",sortable:true,renderer:formateID},
          {header:"姓名",dataIndex:"name",sortable:true},
          {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge},
          {header:"个人主页",dataIndex:"homePage",sortable:true,renderer:showUrl}
      ],
      autoExpandColumn:4,
      sm:sm,
      bbar:[
          {text:"获得所选行",handler:function(){
             var msg = "";
             var row = gridPanel.getSelectionModel().each(function(rec){
                 msg = msg + rec.get("id") + "," + rec.get("name") + "," +
                    rec.get("age") + "," + rec.get("homePage") + "\n";
             });
             alert(msg);
          }}
      ],
      viewConfig:{
          enableRowBody : true,//使用行体
          getRowClass : function(record,index,rowParams,store){
             rowParams.body = "<div style='padding:10px,10px,10px,10px'>" + record.get("jianli") + "</div>";           
             rowParams.cols=5;
             rowParams.bodyStyle="background-color:#FFFFCC"
          }
      }
   })
});

 

 

 

2.可编辑的表格。

function showUrl(value){
      return "<a href=http://"+value+" target='_blank'>"+value+"</a>";
}

function formatAge(value,metadata){
   if(value > 30) {
      metadata.attr = 'style="color:red"';
   }
   return value;
}

function formateID(value,metadata){
   if(value % 2 == 0) {
      metadata.attr = 'style="background-color:red"';
   }
   return value;
}


Ext.onReady(function(){
   Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
   //记录类型
   var Person = new Ext.data.Record.create([
      {name:"id",mapping:"id"},
      {name:"name",mapping:"name"},
      {name:"age",mapping:"age"},
      {name:"homePage",mapping:"homePage"},
      {name:"jianli",mapping:"jianli"}
   ]);
   //存储器
   var store = new Ext.data.Store({
      url:"data.xml",
      reader:new Ext.data.XmlReader(
          {record: "row",id:"id"},
      Person)
   });
   store.load();
   var sm = new Ext.grid.CheckboxSelectionModel();
   //表格面板
   var gridPanel = new Ext.grid.EditorGridPanel({
      id:"gridPanel",
      renderTo:"hello",
      title:"人员信息",
      width:700,
      height:300,
      store:store,
      columns:[
          sm,
          {header:"id",dataIndex:"id",sortable:true,renderer:formateID},
          {header:"姓名",dataIndex:"name",sortable:true,
              editor:new Ext.form.TextField({
                 allowBlank:false        
              })
           },
          {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge},
          {header:"个人主页",dataIndex:"homePage",sortable:true,renderer:showUrl}
      ],
      autoExpandColumn:4,
      sm:sm,
      bbar:[
          {text:"获得所选行",handler:function(){
             var msg = "";
             var row = gridPanel.getSelectionModel().each(function(rec){
                 msg = msg + rec.get("id") + "," + rec.get("name") + "," +
                    rec.get("age") + "," + rec.get("homePage") + "\n";
             });
             alert(msg);
          }}
      ],
      viewConfig:{
          enableRowBody : true,//使用行体
          getRowClass : function(record,index,rowParams,store){
             rowParams.body = "<div style='padding:10px,10px,10px,10px'>" + record.get("jianli") + "</div>";           
             rowParams.cols=5;
             rowParams.bodyStyle="background-color:#FFFFCC"
          }
      }
   })

});

 

 

3.属性表格面板。

Ext.onReady(function(){
   Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
   Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget="qtip";
   var propertyGrid = new Ext.grid.PropertyGrid({
      id:"propertyPanel",
      title:"propertyPanel",
      width:300,
      height:300,
      renderTo:"hello",
      source: {
             "员工名称" : "张三",
             "出生日期" : new Date(2008,5,23),
             "性别" : '男',
             "是否已婚" : false,
             "年龄" : 29
      }
   })
});

 

设置时间格式。

propertyGrid.getColumnModel().dateFormat = "Y年m月d日";

 

自定义编辑框。

Ext.onReady(function(){
   Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
   Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget="qtip";
   var propertyGrid = new Ext.grid.PropertyGrid({
      id:"propertyPanel",
      title:"propertyPanel",
      width:300,
      height:300,
      renderTo:"hello",
      source: {
             "员工名称" : "张三",
             "出生日期" : new Date(2008,4,23),
             "性别" : '男',
             "是否已婚" : false,
             "年龄" : 29
      },
      customEditors:{
          "性别":new Ext.grid.GridEditor(new Ext.form.ComboBox({
             mode: 'local',
             displayField:"sex",
             triggerAction:"all",
             store:new Ext.data.SimpleStore({
                 fields:["sex"],
                 data:[["男"],["女"]]
             })
          })),
          "年龄":new Ext.grid.GridEditor(new Ext.form.NumberField({
             allowBlank:false,
             allowDecimals:false,
             allowNegative:false,
             maxValue:100,
             maxText:"年龄不能大于100",
             minValue:1,
             minText:"年龄不能小于1",
             selectOnFocus:true,
             blankText:"必须填写年龄信息"
          }))
      }
   });
   propertyGrid.getColumnModel().dateFormat = "Y年m月d日";
});

 

4.创建分组。

function showUrl(value){
      return "<a href=http://"+value+" target='_blank'>"+value+"</a>";
}

function formatAge(value,metadata){
   if(value > 30) {
      metadata.attr = 'style="color:red"';
   }
   return value;
}

function formateID(value,metadata){
   if(value % 2 == 0) {
      metadata.attr = 'style="background-color:red"';
   }
   return value;
}

Ext.onReady(function(){
   Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif";
   //记录类型
   var Person = new Ext.data.Record.create([
      {name:"id",mapping:"id"},
      {name:"name",mapping:"name"},
      {name:"age",mapping:"age"},
      {name:"homePage",mapping:"homePage"},
      {name:"jianli",mapping:"jianli"}
   ]);
   //存储器
   var store = new Ext.data.GroupingStore({
      url:"data.xml",
      reader:new Ext.data.XmlReader(
          {record: "row",id:"id"},
      Person),
      groupField:"homePage"
   });
   store.load();
   var sm = new Ext.grid.CheckboxSelectionModel();
   //表格面板
   var gridPanel = new Ext.grid.GridPanel({
      id:"gridPanel",
      renderTo:"hello",
      title:"人员信息",
      width:700,
      height:300,
      store:store,
      columns:[
          sm,
          {header:"id",dataIndex:"id",sortable:true,renderer:formateID},
          {header:"姓名",dataIndex:"name",sortable:true},
          {header:"年龄",dataIndex:"age",sortable:true,renderer:formatAge},
          {header:"个人主页",dataIndex:"homePage",sortable:true,renderer:showUrl}
      ],
      autoExpandColumn:4,
      sm:sm,
      bbar:[
          {text:"获得所选行",handler:function(){
             var msg = "";
             var row = gridPanel.getSelectionModel().each(function(rec){
                 msg = msg + rec.get("id") + "," + rec.get("name") + "," +
                    rec.get("age") + "," + rec.get("homePage") + "\n";
             });
             alert(msg);
          }}
      ],
      view:new Ext.grid.GroupingView({
          groupTextTpl : '{text}(共{[values.rs.length]}条)',//定义分组行模板
          groupByText : '使用当前字段进行分组',//表头菜单提示信息
          showGroupsText : '表格分组',//表头菜单提示信息
          showGroupName : true,//显示分组字段名称
          startCollapsed : false,//展开分组
          hideGroupedColumn : true//隐藏分组列
      })
   })
});

 

转载于:https://www.cnblogs.com/atwanli/articles/4715371.html

dengyiyu5280
关注
Ext.grid.GridPanel
xingyu15的专栏
03-03 4270
var grid = new Ext.grid.GridPanel({    store   //数据源    cm      //Ext.grid.columnModel    columns //功能和Ext.grid.columnModel一样。与cm有一个就行    autoWidth:true    width    title    border:false    columnLine
Extjs学习 Ext.grid.GridPanel
jazywoo_在路上
07-13 1215
1、Ext.grid.GridPanel  主要配置项：  store：表格的数据集  columns：表格列模式的配置数组，可自动创建ColumnModel列模式  autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0  stripeRows：表格是否隔行换色，默认为false  cm、colModel：表格的列模式，渲染表格时必须设置该配置项
EXT 3.x 使用详解之Ext.grid.GridPanel(一)
xiezhenxiang的专栏
01-12 1063
很强大的grid总算登场啦，先来热热身，看下最简单的应用，详细就看注释吧，写的很全面 //页面加载完前执行 Ext.onReady(function() { //根据元素id获得页面元素 var page = Ext.get("Page"); //定义json类型对象 var myData
Extjs-表格 Ext.grid.GridPanel
热门推荐
itlwc
08-15 1万+
项目中的grid 自动显示行号 rn = new Ext.grid.RowNumberer(); 复选框 var sm = new Ext.grid.CheckboxSelectionModel({ //如果只允许用户通过复选框执行选中操作放开下面配置项 //handleMouseDown : Ext.emptyFn//可复用的空函数 //true表示只允许选择单行 //singl
ExtJs_Ext.grid.GridPanel解说
cenyebao的专栏
08-01 7354
/*  * Ext JS Library 3.3.0  */ /**  * @class Ext.grid.GridPanel  * @extends Ext.Panel  * This class represents(描述) the primary(主要的)
Extjs4.x GridPanel用法详解
iteye_2762的博客
11-30 238
参考资料：http://www.qeefee.com/article/extjs-grid-in-detail   创建GridPanel 要使用GridPanel，首先要定义Store // 创建store var store = Ext.create("Ext.data.Store", { fields: [{ name: 'name', // 与...
Ext.GridPanel 用法总结（一）—— Grid基本用法
zc490256503的博客
11-09 414
GridPanel类是基于基础列表接口具代表性的主要实现类。也是最常用的Ext组件之一。 一：首先定义grid的数据源 view plaincopy to clipboardprint?  //初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载                        Ext.state.Mana
Ext.grid.GridPanel .
mengzhengjie的专栏
03-29 846
Ext.grid.GridPanel .   var grid = new Ext.grid.GridPanel({     store   //数据源     cm      //Ext.grid.columnModel     columns //功能和Ext.grid.columnModel一样。与cm有一个就行     autoWidth:true
ExtJs之Ext.grid.GridPanel（部分未完）
weixin_33881050的博客
05-16 73
今天在家休息，年假不用就作费啊。 看了几部香港老电影，陪爸爸看了勇士占奇才， 然后，测试了一下EXTJS未完的内容， 在京东上订了七本历史普及书，近两百块。。：） 搞定。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32...
Ext.grid.GridPanel属性祥解
04-24
### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...
Ext.Net 1.x_Ext.Net.GridPanel字体格式化、颜色配置
德仔
04-01 5318
财务报表通常有这样的需求：数值千分位,靠右显示，字体颜色 解决办法： 方法一： 方法二：javaScript处理 var template = '{1}'; var change
Ext.Net 1.x_Ext.Net.GridPanel CRUD
德仔
05-31 4457
Grid.aspx http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                 function Details(v) {             var temp = '详细…';             return
Ext.Net 1.x_Ext.Net.GridPanel之Access数据库分页显示
德仔
07-02 2065
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data; using System.Data.SqlClient; using System.Data.OleDb; namespace DzPlatForm.DBUtility { publ
适用于QF的存档系统
2301_80005044的博客
09-20 375
今天分享一个适用于QF的存档系统这个系统的优点为1、轻量化，总共代码不超过400行2、自动化，基于QF框架，自动注入值缺点：1、不能序列化Unity内部类型，如Vector2、需要给能被序列化的类加上【Serialize】属性。
Unity3D 游戏数据本地化存储与管理详解
voidinit的专栏
09-18 1037
但是，使用JsonUtility需要手动编写序列化和反序列化的代码，增加了开发的复杂性。本文介绍了Unity3D中游戏数据的本地化存储与管理技术，包括PlayerPrefs类、JsonUtility类和SQLite数据库等。这不仅涉及到游戏状态、玩家信息、游戏设置等关键数据的保存，还关系到游戏的稳定性和用户体验。本文将详细介绍Unity3D中游戏数据的本地化存储与管理的技术方法，并给出相应的代码实现。除了选择合适的存储技术外，还需要制定合理的数据管理策略，以确保数据的完整性和安全性。csharp复制代码。
@JsonFormat 和 @DateTimeFormat 的区别
a405828的专栏
09-19 478
DateTimeFormat 是 Spring Framework 提供的注解，主要用于在数据绑定（Data Binding）过程中指定日期时间的格式，尤其是在处理 HTTP 请求参数和表单数据时。@JsonFormat 是 Jackson 库提供的注解，主要用于序列化（对象转JSON）和反序列化（JSON转对象）过程中指定日期时间的格式。@JsonFormat 和 @DateTimeFormat 都是用来指定日期时间格式的注解，但它们分别属于不同的框架，并且应用场景有所不同。
京东商品属性的详细api数据解析：颜色、尺寸与材质
最新发布
api77的博客
09-20 1125
京东（JD.com）作为一个大型电商平台，其商品信息通过API接口提供给开发者或第三方服务使用，以便进行商品搜索、展示、分析等操作。然而，直接访问京东的详细商品属性（如颜色、尺寸、材质等）API通常需要遵循京东的开放平台政策，并注册成为开发者以获取相应的API访问权限和密钥。
json Date格式化时间偏差8小时，而@JsonFormat注解有无法动态指定时区，如何解决？
xglinux的博客
09-20 227
【代码】json Date格式化时间偏差8小时，而@JsonFormat注解有无法动态指定时区，如何解决？
ExtJS 2.02 Gridpanel：创建与配置实战
10. **编辑功能**：GridPanel支持单元格编辑，可以对数据进行即时修改。 11. **添加、删除行**：允许用户添加新行或删除现有行，更新数据。 12. **脏数据提示**：当用户未保存编辑时，会显示提示信息。 13. **拖拽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值