读书人

Javascript 之 Ext.grid.ColumnModel

发布时间: 2012-11-08 08:48:11 作者: rapoo

Javascript 之 Ext.grid.ColumnModel 综合运用,加按钮,单选框

先来张图片,做出来的样子如下:

Javascript 之 Ext.grid.ColumnModel 综合施用,加按钮,单选框

源码

function appgroup_message_list(mainpanel){    var checkbox = new Ext.grid.CheckboxSelectionModel();//单选框    var cm = new Ext.grid.ColumnModel([    checkbox,        {header: _("Name"), width: 80, sortable: true, dataIndex: 'appgroup'},        {header: _("Description"), width: 80, sortable: true, dataIndex: 'description'},{header: _("Status"), width: 80, sortable: true, dataIndex: 'status'},{header:_("Manage"),dataIndex:"manage_button",width:80,renderer: function(){return " <button type='button' onclick=''>Manage</button>"}},//这里用的是renderer,放入了一个button{header:_("Delete"),dataIndex:"delete_button",width:80,renderer: function(){return " <button type='button' onclick=''>Delete</button>"}},    ]);var app_group_store = new Ext.data.JsonStore({//发url请求去后台得到列表数据        url: '/apply/get_application_group_list',        root: 'rows',        fields: ['appgroup'],        successProperty:'success',        listeners:{            loadexception:function(obj,opts,res,e){                var store_response=Ext.util.JSON.decode(res.responseText);                Ext.MessageBox.alert(_("Error"),store_response.msg);            }        }    });app_group_store.load();    var grid = new Ext.grid.GridPanel({cm:cm,selModel:checkbox,        store: app_group_store,        stripeRows: true,        frame:false,        autoExpandColumn:1,        autoHeight:true,        autoExpandMax:300,        autoExpandMin:150,        maxHeight:100,        enableHdMenu:true    });grid.addListener('cellclick',cellclick); //添加触发的函数   function cellclick(grid, rowIndex, columnIndex, e) {           var record = grid.getStore().getAt(rowIndex);//这里得到的是一个对象,即你点击的某一行的一整行数据//alert(record.data.appgroup);//取出其中元素appgroup的值var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  if (fieldName == 'manage_button'){//通过加判断条件限制当点击某个列表内容的时候触发,不然只要你点列表的随便一个地方就触发了。    //show_user_manager(record);    }else if (fieldName == 'delete_button'){    delete_app_group(record.data.appgroup,mainpanel);}    }     return grid;}

很简单吧

读书人网 >JavaScript

热点推荐