ExtJS grid表头如何增加下拉项?

2024-12-21 15:42:47
推荐回答(1个)
回答1:

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],

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

    });

效果看图片。

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

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