ExtJS grid表头如何增加下拉项？
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],
//这两个属性是重点，加上去就可以了
});
效果看图片。
建议你去下载官方的源代码，然后看其中的例子。
里面有一个就是如何自定义这个的
