javascript - Sencha Ext Js 如何将对象添加到 Ext.grid.Panel

Question

我正在使用 Sencha Ext Js 4，并且我有一个 Ext.grid.Panel。我会在标题中添加另一个元素，例如文本框。是否可以？

{filterable: true, header: 'Unique' /*Here i want add a textbox*/,  dataIndex: 'label', flex: 1, sortable: true}

它应该看起来像这张图片 .

编辑:这是我定制的网格:

  var grid1 = Ext.create('Ext.grid.Panel', {
    store: getLocalStore(),
    enableLocking: true,
    width: 600,
    height: 300,
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl : new Ext.XTemplate(
            '<p><b>Company:</b> {company}</p>',
            '<p><b>Change:</b> {change:this.formatChange}</p><br>',
            '<p><b>Summary:</b> {desc}</p>',
        {
            formatChange: function(v){
                var color = v >= 0 ? 'green' : 'red';
                return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
            }
        })
    }],
    collapsible: true,
    animCollapse: false,
    title: 'Expander Rows in a Collapsible Grid with lockable columns',
    iconCls: 'icon-grid',
    margin: '0 0 20 0',
    renderTo: Ext.getBody()
    initComponent: function() {

    var filter = Ext.ComponentQuery.query('[ftype="filters"]'); 
    filter.local = false;

    console.log('initComponent function in View has been called...');

    this.columns = [
          {tooltip:'The unque id associated with the current node', 
            hidden: true, header: 'id', width: 45, sortable: false, hideable: true, id: 'id'},
          {tooltip:'Friendly name of current node. This can be edited',
              filterable: true, header: [
                                         'Label',{
                                             text: 'action'}

                                         ],  dataIndex: 'label', flex: 1, sortable: true, 
              editor: {
                  xtype: 'textfield',
                  allowBlank: false
              }
          },
          {filterable: true, header: 'Unique', dataIndex: 'address_unique', flex: 1},
          {filterable: true, header: 'Address network', dataIndex: 'address_network', flex: 1},
          {tooltip:'The current node status', 
            filterable: true, header: 'Node status', dataIndex: 'online', flex: 1},
          {tooltip:'Tells whether this node has been accepted or not.', 
            hidden: true, filterable: true, header: 'Accepted', dataIndex: 'accepted', flex: 1},
          {tooltip:'Type of node: this can be a router, a leaf node, a virtual node',
            hidden: true, filterable: true, header: 'Type', dataIndex: 'type', flex: 1}
    ];
    Ext.getStore('M2MResources').guaranteeRange(0, 200);

    this.callParent(arguments);
  }
});

Answer 1

我这里有一个 ExtJs 3 的工作代码，

可能您需要进行某些更改才能使其适应 Extjs 4。

/****************************************************
 * Filter row class.
 * @class Ext.ux.grid.FilterRow
 ************************************************/
Ext.namespace('Ext.ux.grid');
Ext.ux.grid.FilterRow = function(config) {
    Ext.apply(this, config);
    this.addEvents(
        "change"
    );
    Ext.ux.grid.FilterRow.superclass.constructor.call(this);
};

Ext.extend(Ext.ux.grid.FilterRow, Ext.util.Observable, {    
    init: function(grid) {
        this.grid = grid;
         this.grid.addClass('filter-row');
        var view = grid.getView();
        var headerTpl = new Ext.Template(
            '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                '<thead><tr class="x-grid3-hd-row  ">{cells}</tr></thead>',
            "</table>"
        );
        Ext.applyIf(view, { templates: {} });
        view.templates.header = headerTpl;
        view.templates.hcell = new Ext.Template(
            '<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
                '<div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">',
                    '<span style="cursor:hand">{value}</span>&#160;&#160;',
                    '<img id="'+grid.id+'-SortImg-{id}" src="Images/Setting.gif" />',
                    '<div class="x-small-editor filterInput" id="'+grid.id+'-filter-{id}"></div>',
                '</div>',
            '</td>'
        ); 

        Ext.applyIf(view, { templates: {} });
        view.templates.header = headerTpl;

        grid.on('resize', this.syncFields, this);
        grid.on('columnresize', this.syncFields, this);
        grid.on('render', this.renderFields, this);
        // private
        var FilterRow = this;
        view.updateHeaders = function(){
            this.innerHd.firstChild.innerHTML = this.renderHeaders();
            this.innerHd.firstChild.style.width = this.getOffsetWidth();
            this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
            FilterRow.renderFields();
        };
        Ext.apply(grid, {
            enableColumnHide_: false,
            enableColumnMove: false
        });

         this.on('change', function(){
            Ext.getBody().mask('Loading Please Wait...','x-mask-loading');
            var filterRecord = getData(grid);
            var wfStatus = 1;
            for(var i=0;i<filterRecord.length;i++)
            {
            var filterColumn = filterRecord[i].filterColumn;
                if(filterColumn == "FormStatus")
                {
                    var Status = filterRecord[i].filterText;
                    if(Status == "10")
                        wfStatus = 2;   
                }
            }
            getFilterXML(1,gblPageCount,0,chevronId,"",wfStatus,0,grid,filterRecord);

        }, grid); 

         grid.on('keypress', function(e){
            if (e.getKey() == e.ENTER) { 
            Ext.getBody().mask('Loading Please Wait...','x-mask-loading');
            var filterRecord = getData(grid);
            getFilterXML(1,gblPageCount,0,chevronId,"","",0,grid,filterRecord);

        }
        }, grid); 
    },

    renderFields: function() {          
        var grid = this.grid;
        var filterRow = this;
        var cm = grid.getColumnModel();
        var cols = cm.config;
        var gridId = grid.id;
        Ext.each(cols, function(col) {
            if (!col.hidden) {
                var filterDivId = gridId + "-filter-" + col.id;
                var sortImgId = grid.id+"-SortImg-"+ col.id;
                var editor      = col.filter;
                var clearFilter = col.clearFilter;
                if (editor) {
                    if(Ext.isIE){
                        col.filter = editor = editor.cloneConfig({value:editor.getValue()});
                    }
                    if (editor.getXType() == 'combo') {
                        editor.on('select', this.resetNoFilterOption, this, editor);
                    } else {
                    editor.on("keypress", this.onKeyPress, this);
                    }
                    new Ext.Panel({border:false, layout:'fit', items:editor, renderTo:filterDivId});
                }
                if(col.sortIcon)
                        document.getElementById(sortImgId).src =   col.sortIcon ;
            }
        }, this);
    },

    onKeyPress: function(field, e) {
        this.fireEvent("keypress", { filter: this });
    },

    resetNoFilterOption: function(editor) {
        if(editor.filterOption=='NoFilter'){//if filter value have been changed , but "NoFilter" menu is still selected then reset it 
            editor.filterOption = '';
        }
        this.onChange();
    },
    onChange: function() {  
        this.fireEvent("change", { filter: this });
    },

    clearFilters: function() {
        this.fireEvent("change", { filter: this, data: {} });
    },

    syncFields: function() {
        var grid = this.grid;
        var cm = grid.getColumnModel();
        var cols = cm.config;
        Ext.each(cols, function(col) {
            if (!col.hidden) {              
                var editor = col.filter; 
                if (editor) {
                    editor.setSize(col.width - 18);
                }else if(col.clearFilter && col.clearFilter.setSize){
                     col.clearFilter.setSize(col.width - 10);
                }
            }
        });
    }
});