我有一个从商店填充的 ExtJS (4.0.7) GridPanel。我在 GridPanel 的列中显示的值需要具有不同的 View ，具体取决于记录中的数据类型。

最终目标是记录的 type 属性具有“double”或“integer”值的记录向用户呈现一个他们可以调整的 slider ，并且一种类型的“string”只是呈现一些只读文本。

我创建了一个自定义列来执行此操作。它检查渲染器中的类型并确定要渲染的内容。

我的“字符串”在下面的代码中运行良好，但我在努力解决如何动态创建和呈现列中更复杂的 slider 控件的问题。

这个简化的示例只是试图呈现一个带有日期控件的 Panel，就好像我可以做到这一点一样，我可以弄清楚 slider 的其余部分。

Ext.define('MyApp.view.MyColumn', {
    extend: 'Ext.grid.column.Column',
    alias: ['widget.mycolumn'],

    stringTemplate: new Ext.XTemplate('code to render {name} for string items'),

    constructor: function(cfg){
        var me = this;
        me.callParent(arguments);

        me.renderer = function(value, p, record) {
            var data = Ext.apply({}, record.data, record.getAssociatedData());

            if (data.type == "string") {
                return me.renderStringFilter(data);
            } else if (data.type == "double" || data.type == "integer") {
                return me.renderNumericFilter(data);
            } else {
                log("Unknown data.type", data);

        };
    },

    renderStringFilter: function(data) {
        // this works great and does what I want
        return this.stringTemplate.apply(data);
    },

    renderNumericFilter: function(data) {

        // ***** How do I get a component I "create" to render 
        // ***** in it's appropriate position in the gridpanel?
        // what I really want here is a slider with full behavior
        // this is a placeholder for just trying to "create" something to render

        var filterPanel = Ext.create('Ext.panel.Panel', {
            title: 'Filters',
            items: [{
                xtype: 'datefield',
                fieldLabel: 'date'
            }],
            renderTo: Ext.getBody() // this doesn't work
        });
        return filterPanel.html;  // this doesn't work
    }
});

我的问题确实是，如何Ext.create 一个组件，并让它呈现到网格面板中的一个列中？

最佳答案

我已经通过几种方式实现了这一点。由于网格列不是 Ext 容器，因此它不能像其他容器组件那样将 Ext 组件作为子组件作为任何配置的一部分。需要后期网格渲染逻辑才能将 Ext 组件添加到单元格。

此解决方案会修改您的自定义列呈现，以便在呈现的 TD 标记上放置一个特殊的 css 类。 GridView 准备好后，遍历记录并为适当的特殊列找到自定义类。为找到的每一列呈现一个 slider 。

下面的代码是 Sencha 示例中提供的 ext js 数组网格示例的修改版本。修改混合了自定义列渲染器和 slider 到 TD 元素的后网格渲染。

本示例仅对Sencha示例进行了足够的修改，以展示实现思路。它缺少分离的 View 和 Controller 逻辑。

这是从 here 修改而来的

 Ext.require([
     'Ext.grid.*',
     'Ext.data.*',
     'Ext.util.*',
     'Ext.data.Model'
 ]);


 Ext.onReady(function() {

     // sample static data for the store
     Ext.define('Company', {
         extend: 'Ext.data.Model',
         fields: ['name', 'price', 'change', 'pctChange', 'lastUpdated', 'type']
     });

     var myData = [
         ['3m Co', 71.72, 2, 0.03, '9/1/2011', 'integer'],
         ['Alcoa Inc', 29.01, 4, 1.47, '9/1/2011', 'string'],
         ['Altria Group Inc', 83.81, 6, 0.34, '9/1/2011', 'string'],
         ['American Express Company', 52.55, 8, 0.02, '9/1/2011', 'string'],
         ['American International Group, Inc.', 64.13, 2, 0.49, '9/1/2011', 'integer'],
         ['AT&T Inc.', 31.61, 4, -1.54, '9/1/2011', 'integer'],
         ['Boeing Co.', 75.43, 6, 0.71, '9/1/2011', 'string'],
         ['Caterpillar Inc.', 67.27, 8, 1.39, '9/1/2011', 'integer'],
         ['Citigroup, Inc.', 49.37, 1, 0.04, '9/1/2011', 'integer'],
         ['E.I. du Pont de Nemours and Company', 40.48, 3, 1.28, '9/1/2011', 'integer'],
         ['Exxon Mobil Corp', 68.1, 0, -0.64, '9/1/2011', 'integer'],
         ['General Electric Company', 34.14, 7, -0.23, '9/1/2011', 'integer']
     ];

     // create the data store
     var store = Ext.create('Ext.data.ArrayStore', {
         model: 'Company',
         data: myData
     });

     // existing template
     stringTemplate = new Ext.XTemplate('code to render {name} for string items');

     // custom column renderer
     specialRender = function(value, metadata, record) {
         var data;

         data = Ext.apply({}, record.data, record.getAssociatedData());

         if (data.type == "string") {
             return stringTemplate.apply(data);;
         } else if (data.type == "double" || data.type == "integer") {
             // add a css selector to the td html class attribute we can use it after grid is ready to render the slider
             metadata.tdCls = metadata.tdCls + 'slider-target';
             return '';
         } else {
             return ("Unknown data.type");

         }
     };

     // create the Grid
     grid = Ext.create('Ext.grid.Panel', {
         rowsWithSliders: {},
         store: store,
         stateful: true,
         stateId: 'stateGrid',
         columns: [{
             text: 'Company',
             flex: 1,
             sortable: false,
             dataIndex: 'name'
         }, {
             text: 'Price',
             width: 75,
             sortable: true,
             renderer: 'usMoney',
             dataIndex: 'price'
         }, {
             text: 'Change',
             width: 75,
             sortable: true,
             dataIndex: 'change',
             renderer: specialRender,
             width: 200
         }, {
             text: '% Change',
             width: 75,
             sortable: true,
             dataIndex: 'pctChange'
         }, {
             text: 'Last Updated',
             width: 85,
             sortable: true,
             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
             dataIndex: 'lastUpdated'
         }],
         height: 350,
         width: 600,
         title: 'Irm Grid Example',
         renderTo: 'grid-example',
         viewConfig: {
             stripeRows: true
         }
     });

     /**
      * when the grid view is ready this method will find slider columns and render the slider to them
      */
     onGridViewReady = function() {
         var recordIdx,
             colVal,
             colEl;

         for (recordIdx = 0; recordIdx < grid.store.getCount(); recordIdx++) {
             record = grid.store.getAt(recordIdx);
             sliderHolder = Ext.DomQuery.select('.slider-target', grid.view.getNode(recordIdx));
             if (sliderHolder.length) {
                 colEl = sliderHolder[0];

                 // remove div generated by grid template - alternative is to use a new template in the col
                 colEl.innerHTML = '';

                 // get the value to be used in the slider from the record and column
                 colVal = record.get('change');

                 // render the slider - pass in the full record in case record data may be needed by change handlers
                 renderNumericFilter(colEl, colVal, record)
             }
         }

     }

     // when the grids view is ready, render sliders to it
     grid.on('viewready', onGridViewReady, this);

     // modification of existing method but removed from custom column 
     renderNumericFilter = function(el, val, record) {

         var filterPanel = Ext.widget('slider', {
             width: 200,
             value: val,
             record: record,
             minValue: 0,
             maxValue: 10,
             renderTo: el
         });

     }
 });

关于javascript - 使用 Ext.create 在 ExtJS 4 GridPanel Column 中呈现动态组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11323023/