Extjs怎么给Grid增加一个CheckBox列

需要使用Ext.grid.CheckColumn 或者使用渲染器生成

var checkColumn_chg_page = new Ext.grid.CheckColumn({  

header: '换页',

dataIndex: 'chang_page',

width:40

})

columns: [{  text: '状态',

        sortable: false,

        dataIndex: 'state',//数据源中的状态列

        renderer: function (v) { return '<input type="checkbox"'+(v=="1"?" checked":"")+'/>' }//根据值返回checkbox是否勾选

        },

        checkColumn_chg_page

       ]

extjs自己提供复选框列

// checkbox列

var filecheckbox = new Ext.grid.CheckboxSelectionModel()

// GridPanel

var fileGrid = new Ext.grid.GridPanel({

store : fileStore,

columns : [

new Ext.grid.RowNumberer(), //显示列数

filecheckbox,//显示复选框列

{//其他显示列}]

//省略其他属性

})

这样你就可以而得到一个复选框，可以进行单选、全选了

如果你想自己定义的话，也可以

//定义filters

var filters = new Ext.ux.grid.GridFilters({

// encode and local configuration options defined previously for easier reuse

encode: encode, // json encode the filter query

local: local,   // defaults to false (remote filtering)

filters: [{

type: 'numeric',

dataIndex: 'id'

}, {

type: 'string',

dataIndex: 'company',

disabled: true

}, {

type: 'numeric',

dataIndex: 'price'

}, {

type: 'date',

dataIndex: 'date'

}, {

type: 'list',

dataIndex: 'size',

options: ['small', 'medium', 'large', 'extra large'],

phpMode: true

}, {

type: 'boolean',

dataIndex: 'visible'

}]

})

// use a factory method to reduce code while demonstrating

// that the GridFilter plugin may be configured with or without

// the filter types (the filters may be specified on the column model

var createColModel = function (finish, start) {

var columns = [{

dataIndex: 'id',

header: 'Id',

// instead of specifying filter config just specify filterable=true

// to use store's field's type property (if type property not

// explicitly specified in store config it will be 'auto' which

// GridFilters will assume to be 'StringFilter'

filterable: true

//,filter: {type: 'numeric'}

}, {

dataIndex: 'company',

header: 'Company',

id: 'company',

filter: {

type: 'string'

// specify disabled to disable the filter menu

//, disabled: true

}

}, {

dataIndex: 'price',

header: 'Price',

filter: {

//type: 'numeric'  // specify type here or in store fields config

}

}, {

dataIndex: 'size',

header: 'Size',

filter: {

type: 'list',

options: ['small', 'medium', 'large', 'extra large']

//,phpMode: true

}

}, {

dataIndex: 'date',

header: 'Date',

renderer: Ext.util.Format.dateRenderer('m/d/Y'),

filter: {

//type: 'date'     // specify type here or in store fields config

}

}, {

dataIndex: 'visible',

header: 'Visible',

filter: {

//type: 'boolean'  // specify type here or in store fields config

}

}]

return new Ext.grid.ColumnModel({

columns: columns.slice(start || 0, finish),

defaults: {

sortable: true

}

})

}

然后

var grid = new Ext.grid.GridPanel({

colModel: createColModel(4),

plugins: [filters],

//这两个属性是重点，加上去就可以了

})

效果看图片。

建议你去下载官方的源代码，然后看其中的例子。

里面有一个就是如何自定义这个的

var sm = new Ext.grid.CheckboxSelectionModel({

//singleSelect: true,

listeners:{

//选中

"rowselect": function (grid,rowIndex,e) {

//使用这种方法会在先点击最后一组数据的时候报错

//var row=grid.getSelections()

//var val=row[rowIndex].get("id")

var grid = Ext.getCmp("shopGrid")

var val = grid.getStore().getAt(rowIndex).get("id")

sendUsersId.push(val)//存放用户id

//alert(sendUsersId.toString())

},

//取消选中

"rowdeselect": function (grid, rowIndex, e) {

var grid = Ext.getCmp("shopGrid")

var val=grid.getStore().getAt(rowIndex).get("id")

sendUsersId.remove(val)//移除用户id

//alert(sendUsersId.toString())

}

}

})

---