ExtJs中的Grid具体操作

一.基本操作步骤

1. var cm=new Ext.grid.ColumnModel([  //对列的定义，cm是它的简写，作为真个表格的列模式，需要首先创建的
                   {header:'编号',dataIndex:'id',sortable:true}, //header是表的首部显示文本。dataIndex是列对应的记录集字段,sortable表示列是否可排序，可能还会用到的参数：renderer列的渲染函数，format格式化信息
                   
                   {header:'名称',dataIndex:'name'},
                   {header:'描述',dataIndex:'descn'}
             ]);
2.  var data=[
             ['1','name1','descn1'],  //5组具体的数据，每组数据分别对应每一列
             ['2','name2','descn2'],
             ['3','name3','descn3'],
             ['4','name4','descn4'],
             ['5','name5','descn5']
             ];
            
3.               //store用来创建一个数据存储对象，是GridPanel必备的属性
   var store=new Ext.data.Store({
                    proxy:new Ext.data.MemoryProxy(data),  //是指获取数据的方式
                    reader:new Ext.data.ArrayReader({},[    //是指如何解析这一堆数据，ArrayReader就是解析数组的
                    {name:'id'},
                    {name:'name'},
                    {name:'descn'}
                    ])
             });
             store.load();//要执行一次，以对数据初始化，很重要
            
            
4. var grid=new Ext.grid.GridPanel({
                     autoHeight:true,
                     renderTo:'grid',  //要渲染的地方(就是在哪里显示)
                     enableColumnMove:false,//设置是否可以拖放列
                     enableColumnResize:false,//设置是否可以改变列的大小
                     stripeRows:true,//斑马线效果 
                     store:store,
                     cm:cm,
                     autoExpandColumn:'descn', //可以制定列的宽度自动伸展。只能制定一列的id
                     viewConfig:{
                             forceFit:true   //每列自动充满Grid
                             }
                   });

注：Ext中renderer一般用于Grid中对列模型的渲染上 其详细信息记录在 Ext.grid.ColumnModel 中的 setRenderer( Number col, Function fn )方法里

 

renderer:function(value, cellmeta, record, rowIndex,columnIndex, store){

}

 

含有的参数的介绍：

1.value是当前单元格的值

2.cellmeta里保存的是cellId单元格id，id是列号，css是这个单元格的css样式。

3.record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。

4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。

5.columnIndex列号。

6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。

二.常用的属性：

 

1.sortable:true,//sortable设为排序

 

2.enableColumnMove:false,//设置是否拖放列

 

3.enableColumnResize:false,//设置是否改变列大小

 

4.stripeRows:true, //每列是否是斑马线分开

 

5.loadMask:true, //加载时有加载的图标

 

6.autoExpandColumn:'要自定义宽度的id'//可以制定列的宽度自动伸展。只能制定一列的id,所以要在前面指定的列先写好id

 

7.viewConfig:{
                      forceFit:true  //每列自动充满Grid
                  }

 

8.sortInfo: {field: "name", direction:"ASC"}//在原来的前提下，加此行：field代表排序列名，direction代表排序方式(ASC是升序，DESC是降序)

 

9.renderer: Ext.util.Format.dateRenderer('Y-m-d')

//这里需要添加的renderer属性的值设置为Ext.util.Format.dateRenderer。这是为我们提供的格式

 

10.type:'date',dateFormat:'Y-m-dTH:i:s'//type是reader解析时把这一列作为日期类型处理，dateFormat是把得到的字符串转换成相应的日期格式

 

10-2.在写数据的时候要：'1970-01-15T02:58:04',//添加一列时间的数据，格式要和下面设置的dateFormat一样

 

11.new Ext.grid.RowNumberer(), //自动显示行号

 

 

12.<inputtype="button" id="remove" value="删除第二行" />//新建按钮，id="remove"

 

Ext.get('remove').on('click',function() {//获得id，执行点击事件

            store.remove(store.getAt(1));//store.getAt(a)是找到要找的那行的内容,a从0开始(及第一行就是0)，该代码表示删除改行的信息

grid.view.refresh();//清除一行信息，最左边显示的行的id重新编号

    });

 

13.var sm = newExt.grid.CheckboxSelectionModel();//新建复选框的对象，使用的时候直接写 'sm'

 

14.Ext.grid.RowSelectionModel({singleSelect:true})//设置行是否可以按shift多选（true为不可以）

 

15.只选一行执行

grid.on('click',function() {

        var selections =grid.getSelectionModel().getSelections();

        for (var i = 0; i <selections.length; i++) {

            var record = selections[i];

            Ext.Msg.alert('提示',record.get("id") + "," + record.get("name") +"," + record.get("descn"));

        }

   }); //点击一行，就输出该行的信息

 

16.表格视图

var grid = new Ext.grid.GridPanel({

//设置各种监听器可看做控制器

        height: 80,

        width: 450,

        renderTo: 'grid',

        store: new Ext.data.Store({

            autoLoad: true,

            proxy: newExt.data.MemoryProxy(data),

            reader: newExt.data.ArrayReader({}, meta)

        }),

        columns: meta

   });//表格定义太小的话，自己默认产生滚动条

 

grid.getView().scrollToTop();//滚动条滚动到最上面

grid.getView().focusCell(0, 0);//焦点定位在第一行的第一列

 

17.自己定义，改变GridView的初始参数

  viewConfig: {

            columnsText: '显示的列',

            scrollOffset: 30,//表示表格右侧为滚动条预留的宽度

            sortAscText: '升序',

            sortDescText: '升序',

            forceFit: true//表格自动延展每列的长度，使内容充满整个表格

        }

 

18.Grid添加分页工具条

  var grid = new Ext.grid.GridPanel({

        renderTo: 'grid',

        autoHeight: true,

        store: store,

        cm: cm,

          bbar: newExt.PagingToolbar({

           pageSize: 10,    //每页显示信息的条数

            store: store,

           displayInfo: true,    //是否显示数据信息

           displayMsg: '显示第 {0} 条到 {1} 条记录，一共{2} 条',    //在displayInfo有效的前提上，{0}{1}{2}中的数据会自己替换掉

           emptyMsg: "没有记录"    //没有数据时显示的信息

        })

    });

store.load();

 

19.通过后台获取分页数据

var store = newExt.data.Store({

        proxy: newExt.data.HttpProxy({url:'09_02_01.jsp'}), //直接通过Http访问数据

        reader: new Ext.data.JsonReader({  

            totalProperty:'totalProperty', //对应JSP代码中返回的totalProperty，就是数据的总数

            root: 'root'//root对应的JSP代码中的返回的root，也就是一个包含返回数据的数组

        }, [

            {name: 'id'},

            {name: 'name'},

            {name: 'descn'}

        ])

    });

以及要改变store.load();为：

 store.load({params:{start:0,limit:10}});//初始化时通过传参数去获得希望得到的那部分数据，start指示从第几条数据开始显示，limit指从start开始一共几条数据

 

 

20.可编辑表格控件——EditorGrid

var cm = newExt.grid.ColumnModel([{

        header: '编号',

        dataIndex: 'id',

        editor: new Ext.grid.GridEditor(   //每列添加editor属性，里边的属性都是完全一样的TextField

            newExt.form.TextField({//TextField的方式是随意修改单元格

               allowBlank: false //表示不允许输入空值 

            })

        )

    }, {

       ……

           })

        )

   }]);

 

还有要改变的：

  var grid = new Ext.grid.EditorGridPanel({

        autoHeight: true,

        renderTo: 'grid',

clicksToEdit:1,//要编辑单元格时点击的次数，默认是双击

        store: store,

        cm: cm

    });

 

添加和删除行：

 (表示出现在表的顶部新建一行工具条)

          tbar: new Ext.Toolbar(['-', {

            text: '添加一行',

           handler:function(){  //handler定义按钮被按下时要执行的内容

               var p = new Record({

                   id:'',

                   name:'',

                   descn:''

               });

               grid.stopEditing();

               store.insert(0, p);//新建一行

               grid.startEditing(0,0);//激活第一行第一列的编辑状态,及新建后焦点默认选在上面

            }

        }, '-', {

            text: '删除一行',

            handler: function(){

               Ext.Msg.confirm('信息', '确定要删除？',function(btn){

                   if (btn == 'yes') {

                       var sm =grid.getSelectionModel();

                       var cell =sm.getSelectedCell();

 

                       var record =store.getAt(cell[0]);

                       store.remove(record); //删除一行

                   }

               });

            }

        }, '-'])

    });

 

保存数据:

{

            text: '保存',

            handler: function(){

               var m =store.modified.slice(0);//作用是复制store.modified。保证其原始数据不受影响

               var jsonArray = [];

               Ext.each(m,function(item) {//作用是遍历m，并对每项分别调用fn函数

                   jsonArray.push(item.data);

               });

 

               Ext.lib.Ajax.request(

                   'POST',

                   '11_03_01.jsp',

                   {success:function(response){

                       Ext.Msg.alert('信息',response.responseText, function(){

                           store.reload();

                       });   //success是请求成功后返回的信息

                   },failure:function(){

                       Ext.Msg.alert("错误", "与后台联系的时候出现了问题");

                   }}, //failere是请求失败后返回的信息

                   'data=' +encodeURIComponent(Ext.encode(jsonArray))

               );

            }

 

验证数据:

                    varm = store.modified.slice(0);

               for (var i = 0; i <m.length; i++) {

                   var record =m[i];//获得被修改的每行数据

                   var fields =record.fields.keys;//表示一共几行

 

                   for (var j = 0; j <fields.length; j++) {

                       var name =fields[j];//列名

                       var value =record.data[name];//单元格的数值

 

                       var colIndex =cm.findColumnIndex(name);//列号

                       var rowIndex =store.indexOfId(record.id);//行号

                       var editor =cm.getCellEditor(colIndex).field;//colIndex使用的编辑器

 

                       if(!editor.validateValue(value)) {

                           Ext.Msg.alert('提示','请确保输入的数据正确。', function(){

                               grid.startEditing(rowIndex, colIndex);

                           });

                           return;

                       }

                   }

 

21.属性表格——PropertyGrid(只要两个值:key和value,即:列的名称和具体的值)

 var grid = new Ext.grid.PropertyGrid({

        title: '属性表格',

        autoHeight: true,

        width: 300,

        renderTo: 'grid',

        source: {

            "名字": "不告诉你",

            "创建时间": newDate(Date.parse('12/15/2007')),

            "是否有效": false,

            "版本号": .01,

            "描述":"嗯，估计没啥可说的"

        }

    });

 

禁止对属性进行编辑：(只能看不能动)

grid.on("beforeedit",function(e){

        e.cancel = true;

        return false;

    });

 

获取属性表格的值：

Ext.Msg.alert('名字', grid.store.getById('名字').get('value')); //弹出警告框，是对应key所对应的value

 

设置时间选择：

 customEditors: {

            'Start Time': newExt.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))

       }//TimeField，可以自己再source中设置开始的时间（如：StartTime：‘10:00 AM’）

 

 

22.表格分组：

    var store = new Ext.data.GroupingStore({

        reader: reader,

        data: data,

       groupField: 'sex', //按性别分组

       sortInfo: {field:'id', direction: "ASC"}//如何排序的对象，分组后，每组按id进行升序排列显示

    });

 

    view: newExt.grid.GroupingView(),//获得Ext.grid.GroupingView的实例

        grid.getView().expandAllGroups();//展开所以分组

         grid.getView().collapseAllGroups();//折叠所有分组

       grid.getView().toggleAllGroups();//自动判断分组的状态

 

23.可以拖拉调整大小的表格：

 var rz = new Ext.Resizable(grid.getEl(), {

        wrap: true,//在构造Resizable时自动在制定的id的外边包裹一层div

        minHeight:100, //限制改变的最小的高度

maxHeight:200,

        pinned:false,//控制可拖动区域的显示状态，false是鼠标悬停在拖拉区域上才出现

        handles: 's'//设置拖拉的方向（n,s,e,w,all...）

    });

    rz.on('resize', grid.syncSize,grid);//注册事件(作用:将调好的大小传个scope执行)

 

 

24.可以拖拉行，在同一个表中拖动

 enableDragDrop: true//设置允许拖动行

设置DropTarget：

var ddrow = newExt.dd.DropTarget(grid.container, {

        ddGroup : 'GridDD',

        copy   : false,//拖动是否带复制属性

        notifyDrop : function(dd, e, data) {//对应的函数处理拖放事件

            // 选中了多少行

            var rows = data.selections;

            // 拖动到第几行

            var index =dd.getDragData(e).rowIndex;

            if (typeof(index) =="undefined") {

               return;

            }

            // 修改store

            for(i = 0; i < rows.length; i++){

               var rowData = rows[i];

               if(!this.copy)store.remove(rowData);

               store.insert(index, rowData);

            }

        }

    });

 

25.表格与右击菜单

 var contextmenu = new Ext.menu.Menu({

        id: 'theContextMenu',

        items: [{

            text: '查看详情',

            handler: function(){

写点击后要执行的函数，可以类似于：//Ext.Msg.alert('详情','ExtJs的表格右击事件');

            }

        }]

    });

    grid.on("rowcontextmenu",function(grid, rowIndex, e){

        e.preventDefault();//防止浏览器弹出默认的右键菜单

       grid.getSelectionModel().selectRow(rowIndex);//调用

       contextmenu.showAt(e.getXY());//右击显示现在自己的菜单

    });