EXTJS 中Grid控件的常用代码

1、定义列



     var cm = new ExtgridColumnModel([

         {header:编号,dataIndex:id},

         {header:名称,dataIndex:name},

         {header:描述,dataIndex:descn}

     ]);





 2、数据源



     var data = [

         [1,name1,descn1],

         [2,name2,descn2],

         [3,name3,descn3],

         [4,name4,descn4],

         [5,name5,descn5]

     ];





 3、数据store,用来获得与解析数据



     var store = new ExtdataStore({

         proxy: new ExtdataMemoryProxy(data),

         reader: new ExtdataArrayReader({}, [

             {name: id},

             {name: name},

             {name: descn}

         ])

     });

     storeload();



 4、展示GridPanel



     var grid = new ExtgridGridPanel({

         autoHeight: true,

         renderTo: grid,

         store: store,

         cm: cm

     });





 5、自动列宽



     var grid = new ExtgridGridPanel({

         autoHeight: true,

         renderTo: grid,

         store: store,

         cm: cm,

         autoExpandColumn: descn    //将要自动列宽的列设置即可

     });





 6、设置按照字母拼音来进行排序（重载方法applySort）





         ExtdataStoreprototypeapplySort = function () {

             if (thissortInfo && !thisremoteSort) {

                 var s = thissortInfo, f = sfield;

                 var st = thisfieldsget(f)sortType;

                 var fn = function (r1, r2) {

                     var v1 = st(r1data[f]), v2 = st(r2data[f]);

                     if (typeof (v1) == string) {

                         return v1localeCompare(v2);

                     }

                     return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);

                 };

                 thisdatasort(sdirection, fn);

                 if (thissnapshot && thissnapshot != thisdata) {

                     thissnapshotsort(sdirection, fn);

                 }

             }

         };



 7、用renderer显示指定格式日期



     var cm = new ExtgridColumnModel([

         {header:编号,dataIndex:id},

         {header:名称,dataIndex:name},

         {header:描述,dataIndex:descn},

         {header:日期,dataIndex:date, renderer: ExtutilFormatdateRenderer(Y-m-d)}

     ]);





 8、用renderer来显示指定要求的复杂的列



     function renderSex(value) {

         if (value == male) {

             return <span style=color:red;font-weight:bold;>红男</span><img src=user_malepng />;

         } else {

             return <span style=color:green;font-weight:bold;>绿女</span><img src=user_femalepng />;

         }

     }



     function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {

         var str = <input type=button value=查看详细信息 οnclick=alert(\ +

             这个单元格的值是： + value + \\n +

             这个单元格的配置是：{cellId: + cellmetacellId + ,id: + cellmetaid + ,css: + cellmetacss + }\\n +

             这个单元格对应行的record是： + record + ，一行的数据都在里边\\n +

             这是第 + rowIndex + 行\\n +

             这是第 + columnIndex + 列\\n +

             这个表格对应的ExtdataStore在这里： + store + ，随便用吧。 +

             \)>;

         return str;

     }



     var cm = new ExtgridColumnModel([

         {header:编号,dataIndex:id},

         {header:性别,dataIndex:sex,renderer:renderSex},

         {header:名称,dataIndex:name},

         {header:描述,dataIndex:descn,renderer:renderDescn}

     ]);



 9、根据grid列表中的数据值来指定行的样式（设置行的颜色）



    样式：

         <style type=text/css>

             white-row{ background-color: white; }

             red-row{ background-color: #F5C0C0 !important; }

             yellow-row{ background-color: #FBF8BF !important; }

             green-row{ background-color: #99CC99 !important; }

        </style>



    Grid中的viewConfig项：



                     viewConfig: {

                         forceFit: true,

                         enableRowBody: true,

                         getRowClass: function (record, rowIndex, p, ds) {

                             var cls = white-row;

                             switch (recorddatacolor) {

                                 case #FBF8BF:

                                     cls = yellow-row

                                     break;

                                 case #99CC99:

                                     cls = green-row

                                     break;

                                 case #F5C0C0:

                                     cls = red-row

                                     break;

                             }

                             return cls;

                         }

                     }





 10、根据数据设置列中的颜色

     

     处理函数

     function renderMotif(data, cell, record, rowIndex, columnIndex, store){

         var value = recordget(color)

          cellattr = style=background-color: + value;

          return data;

     }

     绑定处理函数到列上

     var cm = new ExtgridColumnModel([

         {header: name, dataIndex: name},

         {header: sex, dataInex: sex},

         {header: color, dataIndex: color, renderer: renderMotif}

     ]);





 11、自动产生序号列

         var cm = new ExtgridColumnModel([

         new ExtgridRowNumberer(),

         { header: 编号, dataIndex: id },

         { header: 性别, dataIndex: sex },

         { header: 名称, dataIndex: name },

         { header: 描述, dataIndex: descn }

     ]);





 14、在每行前生成选择框

         var sm = new ExtgridCheckboxSelectionModel();



         var cm = new ExtgridColumnModel([

         new ExtgridRowNumberer(),

         sm,

         { header: 编号, dataIndex: id },

         { header: 性别, dataIndex: sex },

         { header: 名称, dataIndex: name },

         { header: 描述, dataIndex: descn }

     ]);





 15、单选模式



                 var grid = new ExtgridGridPanel({

                     autoHeight: true,

                     renderTo: grid,

                     store: store,

                     cm: cm,

                     sm: new ExtgridRowSelectionModel({ singleSelect: true })

                 });



 16、列表的单击事件获取



                 gridon(click, function () {

                     var selections = gridgetSelectionModel()getSelections();

                     for (var i = 0; i < selectionslength; i++) {

                         var record = selections[i];

                         ExtMsgalert(提示, recordget(id) + , + recordget(name) + , + recordget(descn));

                     }

                 });



 17、 列表的分页导航控件

                 var grid = new ExtgridGridPanel({

                     renderTo: grid,

                     autoHeight: true,

                     store: store,

                     cm: cm,

                     bbar: new ExtPagingToolbar({

                         pageSize: 10,

                         store: store,

                         displayInfo: true,

                         displayMsg: 显示第 {0} 条到 {1} 条记录，一共 {2} 条,

                         emptyMsg: 没有记录

                     })

                 });

                 storeload();





 18、后台实现分页导航功能

     var grid = new ExtgridGridPanel({

         renderTo: grid,

         autoHeight: true,

         store: store,

         cm: cm,

         bbar: new ExtPagingToolbar({

             pageSize: 10,

             store: store,

             displayInfo: true,

             displayMsg: 显示第 {0} 条到 {1} 条记录，一共 {2} 条,

             emptyMsg: 没有记录

         })

     });

     storeload({params:{start:0,limit:10}});



 19、双击可进行编辑的列

     

     先定义可编辑的列：



                 var cm = new ExtgridColumnModel([{

                     header: 编号,

                     dataIndex: id,

                     editor: new ExtgridGridEditor(

                             new ExtformTextField({allowBlank: false}))

                 }, {

                     header: 名称,

                     dataIndex: name,

                     editor: new ExtgridGridEditor(new ExtformTextField({allowBlank: false}))

                 }, {

                     header: 描述,

                     dataIndex: descn,

                     editor: new ExtgridGridEditor(new ExtformTextField({allowBlank: false}))

                 }]);



      再定义可编辑的Grid控件

                 var grid = new ExtgridEditorGridPanel({

                     autoHeight: true,

                     renderTo: grid,

                     store: store,

                     cm: cm

                 });





 20、为Grid添加toolbar，并且有添加与删除功能



                 var grid = new ExtgridEditorGridPanel({

                     autoHeight: true,

                     renderTo: grid,

                     store: store,

                     cm: cm,

                     tbar: new ExtToolbar([-, {

                         text: 添加一行,

                         handler: function () {

                             var p = new Record({

                                 id: ,

                                 name: ,

                                 descn: 

                             });

                             gridstopEditing();

                             storeinsert(0, p);

                             gridstartEditing(0, 0);

                         }

                     }, -, {

                         text: 删除一行,

                         handler: function () {

                             ExtMsgconfirm(信息, 确定要删除？, function (btn) {

                                 if (btn == yes) {

                                     var sm = gridgetSelectionModel();

                                     var cell = smgetSelectedCell();



                                     var record = storegetAt(cell[0]);

                                     storeremove(record);

                                 }

                             });

                         }

                     }, -])

                 });





 21、将实时添加的数据保存到数据库中



 {

                         text: 保存,

                         handler: function () {

                             var m = storemodifiedslice(0);

                             for (var i = 0; i < mlength; i++) {

                                 var record = m[i];

                                 var fields = recordfieldskeys;



                                 for (var j = 0; j < fieldslength; j++) {

                                     var name = fields[j];

                                     var value = recorddata[name];



                                     var colIndex = cmfindColumnIndex(name);

                                     var rowIndex = storeindexOfId(recordid);

                                     var editor = cmgetCellEditor(colIndex)field;



                                     if (!editorvalidateValue(value)) {

                                         ExtMsgalert(提示, 请确保输入的数据正确。, function () {

                                             gridstartEditing(rowIndex, colIndex);

                                         });

                                         return;

                                     }

                                 }

                             }

                             // 进行到这里，说明数据都是有效的

                             var jsonArray = [];

                             Exteach(m, function (item) {

                                 jsonArraypush(itemdata);

                             });



                             ExtlibAjaxrequest(

                     POST,

                     grid2jsp,

                     { success: function (response) {

                         ExtMsgalert(信息, responseresponseText, function () {

                             storereload();

                         });

                     }, failure: function () {

                         ExtMsgalert(错误, 与后台联系的时候出现了问题);

                     } 

                     },

                     data= + encodeURIComponent(Extencode(jsonArray))

                 );

                         }

                     }







 22、属性表格，并且设置成不可编辑

                 var grid = new ExtgridPropertyGrid({

                     title: 属性表格,

                     autoHeight: true,

                     width: 300,

                     renderTo: grid,

                     source: {

                         名字: 不告诉你,

                         创建时间: new Date(Dateparse(12/15/2007)),

                         是否有效: false,

                         版本号: 01,

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

                     }

                 });

                 gridon(beforeedit, function (e) {

                     ecancel = true;

                     return false;

                 });



 23、分组的列表

                 var store = new ExtdataGroupingStore({

                     reader: reader,

                     data: data,

                     groupField: sex,

                     sortInfo: { field: id, direction: ASC }

                 });



                 var grid = new ExtgridGridPanel({

                     autoHeight: true,

                     store: store,

                     columns: columns,

                     view: new ExtgridGroupingView(),

                     renderTo: grid

                 });



 24、列表中的右键事件



                 var contextmenu = new ExtmenuMenu({

                     id: theContextMenu,

                     items: [{

                         text: 查看详情,

                         handler: function () {

                         }

                     }]

                 });

                 gridon(rowcontextmenu, function (grid, rowIndex, e) {

                     epreventDefault();

                     gridgetSelectionModel()selectRow(rowIndex);

                     contextmenushowAt(egetXY());

                 });