ExtJS grid表头如何增加下拉项

extjs自己提供复选框列

// checkbox列

var filecheckbox = new ExtgridCheckboxSelectionModel();

// GridPanel

var fileGrid = new ExtgridGridPanel({

store : fileStore,

columns : [

new ExtgridRowNumberer(), //显示列数

filecheckbox,//显示复选框列

{//其他显示列}]

//省略其他属性

});

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

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

//定义filters

var filters = new ExtuxgridGridFilters({

// 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: ExtutilFormatdateRenderer('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 ExtgridColumnModel({

columns: columnsslice(start || 0, finish),

defaults: {

sortable: true

}

});

};

然后

var grid = new ExtgridGridPanel({

colModel: createColModel(4),

plugins: [filters],

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

});

效果看。

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

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

var columns = [{header:'100',dataIndex:'100'},

{header:'80',dataIndex:'80'},

{header:'7',dataIndex:'7'},]

多了一个逗号

最新版本是Extjs501，我们可以在官方网站进行下载。（这里不得不提一句，Extjs5到目前为止还没有免费的授权，所以下载到的版本是试用版。）

下载到的压缩包解压以后，你会看到一大堆的文件夹和文件，我们该如何使用Extjs5呢？

之前看到过别人说的通过Sencha CMD创建Extjs5项目，但个人觉得那种方式并不适合我们目前的开发模式。我说做ASPNET的，需要在ASPNET MVC或WebForm中使用Extjs，所以绝对不上简单的通过Sencha CMD 生成Extjs5项目那么简单。

//extjs grid是没有列index的，他是只有行的index。

//你要获取列数据，其实也就是获取store里面的数据值。只能用遍历store的方法。

//比如你要获取name列的所有值，那么就遍历这个store。

var name_str;

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

var record = storegetAt(i);

alert(recordget('name'));

//name_str  = name_str + name;  //进行拼接

} 

alert(name_str);

以上就是关于ExtJS grid表头如何增加下拉项全部的内容，包括:ExtJS grid表头如何增加下拉项、EXT 'id'为空或不是对象 坐等解答 复合表头 Ext.ux.grid.ColumnHeaderGroup、Extjs5的grid表头和内容没有对齐是怎么回事等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！