extjs4 - 将动态 tpl 分配给网格中的组合

Question

我有一个网格，其中一列有组合类型的编辑器。此组合动态填充。现在我只能在其下拉列表中显示一列，但我想在其下拉列表中显示多于一列。每个下拉列表可能包含不同的列名称。

我成功创建了 tpl 字符串，但未能将此 tpl 分配给组合。

我的逻辑是:

1. 创建网格
2. 聚焦事件-动态填充组合并创建tpl
3. 将 tpl 分配给组合
4. 通过扩展方法显示下拉列表。

请建议我是否有类似 combo.setTpl(tpl_string) 的方法

逻辑说明:

1。创建的模型将包含两列

i. column_name: Name of column from data base.
ii. data_type: Data type of column

Ext.define('modelTableStructure',
{
    extend: 'Ext.data.Model',
    fields:
    [
        { name: 'column_name', type: 'string' },
        { name: 'data_type', type: 'string' }
    ]
});

2。创建的商店将在步骤 1 中使用模型

  var storeTableStructure = Ext.create('Ext.data.Store',
  {
    model: 'modelTableStructure',
    autoLoad: false,
    proxy: new Ext.data.HttpProxy
    ({
        type: 'ajax',
        reader:
        {
            type: 'json',
            root: 'rows',
            idProperty: 'column_name'
         }// reader end
    }), // proxy end
        listeners:
    {
        load: onLoadStore
    }

});

3。这是根据 EXT JS 更改列的数据类型

var type_lookup = new Object;
type_lookup['int'] = 'numberfield';
type_lookup['float'] = 'numberfield';
type_lookup['string'] = 'textfield';
type_lookup['date'] = 'datefield';
type_lookup['boolean'] = 'checkbox';
type_lookup['varchar'] = 'textfield';
type_lookup['bit'] = 'checkbox';

4。这是一个模型和商店的组合

Ext.define('modelTableData',
{
    extend: 'Ext.data.Model'
});

var storeDataID = new Ext.data.JsonStore
({
    model: 'modelTableData',
    autoLoad: false,
    proxy: new Ext.data.HttpProxy
    ({
        type: 'ajax',
        url: 'url to get data',
        reader:
        {
            type: 'json',
            root: 'rows',
            idProperty: 'primary key column name'
         }
        }) 
});

5。这是我们在步骤 2 中创建的将在商店加载时调用的方法

function onLoadStore() {
var cnt = storeTableStructure.getCount();
fields = [];
var colNames = [];
for (var i = 0; i < cnt; i++) {
    var Col_nm = storeTableStructure.getAt(i).data.column_name;
    var Col_Type = storeTableStructure.getAt(i).data.data_type;
    colNames[i] = Col_nm;
    fields[i] = {
        name: Col_nm,
        type: Col_Type,
        editor:
        {
            xtype: type_lookup[Col_Type]
        }
    };
}
DataID_createHeaderTPL(colNames);
modelTableData.setFields(fields, 'COL_PK_ID', 'COL_PK_ID');
var proxy = new Ext.data.HttpProxy
({
    type: 'ajax',
    url: 'TestCase.ashx?methodname=getdataids&stepdisplayname=name',
    reader:
    {
        type: 'json',
        root: 'rows',
        idProperty: 'COL_PK_ID'
    }// reader end
 });  // proxy end

proxy.setModel(modelTableData, true)
storeDataID.setProxy(proxy);
storeDataID.load({
    url: 'TestCase.ashx?methodname=getdataids&stepdisplayname=name'
});
};

var tplDataid = '';

function DataID_createHeaderTPL(colNames) {
var hd = '';
var td = '';
for (var i_f = 0; i_f < colNames.length; i_f++) {
    hd = hd + '<th width=100> ' + colNames[i_f] + ' </th>';
    td = td + '<td width=100> {' + colNames[i_f] + '} </td>';
}

tplDataid = '<tpl>' +
            '<table width=500>' +
                    '<tr style="text-align: left;">' +
                        hd +
                    '</tr>' +
                '</table>' +
            '</tpl>' +
            '<tpl for=".">' +
                '<div class="x-boundlist-item">' +
                    '<table width=500>' +
                        '<tr>' +
                            td +
                        '</tr>' +
                    '</table>' +
                '</div>' +
            '</tpl>';
}

6。此函数正在创建我的网格。

function showRecordDetails() {
storeTableStructure.load({
    url: 'TestCase.ashx?methodname=gettablestructure&stepdisplayname=name'
});

    Ext.define('gridTCStep',
{
    extend: 'Ext.grid.Panel',
    alias: 'widget.gridTCStep',

    requires:
    [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],
    initComponent: function() {
        this.editing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        });
        Ext.apply(this,
        {
            store: StoreTCStep,
            width: 980,
            height: 340,
            plugins: [this.editing],
            columns:
            [
                {
                    id: "DATA_ID",
                    header: "Data ID",
                    minWidth: 50,
                    dataIndex: 'DATA_ID',
                    flex: 3,
                    editor:
                    {
                        xtype: 'combo',
                        allowBlank: false,
                        forceSelection: true,
                        store: storeDataID,
                        hideTrigger: true,
                        displayField: 'Data_ID',
                        valueField: 'Data_ID',
                        enableKeyEvents: true,
                        matchFieldWidth: false,
                        listeners:
                        {
                            'focus': DataID_Focus,
                            'keypress': combo_KeyPress
                        },
                        tpl: Ext.create('Ext.XTemplate', tplDataid),
                        displayTpl: Ext.create('Ext.XTemplate',
                            '<tpl for=".">',
                                '{Data_ID}',
                            '</tpl>'
                        )
                    }
                }
            ]
        }); // EXT.APPLY
        this.callParent();
    } //in it component
}); // gridTCStep end

    button = Ext.get('btnNewEntry');
    var lblWd = 90;

    var formPanel = new Ext.form.FormPanel
({
    bodyStyle: 'padding:5px 5px 5px 5px',
    submitEmptyText: true,
    items:
    [
        {
            xtype: 'panel',
            name: 'gridpanel',
            shadow: false,
            items:
                [
                    {
                        id: 'griddata',
                        items: gridTCStep,
                        store: StoreTCStep
                    }
                ]
        }
    ]// items

});       // form panel end

    win = Ext.create('widget.window',
    {
        closable: true,
        frame: false,
        closeAction: 'destroy',
        width: 1000,
        minWidth: 350,
        height: 600,
        shadow: false,
        resizable: false,
        draggable: false,
        items:
        [
            {
                id: 'westpanel',
                name: 'westpanel',
                items: formPanel
            }
        ]// items of window
    }); // Window creation


    win.show();          // win.show end

}; // function end

7.在组合的焦点事件上，我调用了这个函数。在这个函数中，我加载了在步骤 2 中创建的商店。这样组合将由新记录填充，并且根据新记录，它将有多个列。你可以看到 tpl 是在商店加载事件中创建的。

   function DataID_Focus(combo, records, eOpts) {
    storeTableStructure.load({
        url: 'TestCase.ashx?methodname=gettablestructure&stepdisplayname=name'
    });

    combo.tpl = Ext.create('Ext.XTemplate', tplDataid);
    combo.expand();
   };

Answer 1

您应该将模板分配给组合的 BoundList，而不是在事件中，而是在您创建它(或扩展它)时。我认为您正在搜索的选项是 Ext.view.BoundList#tpl .

您不会自己创建 BoundList，但您可以使用 Ext.form.field.ComboBox#listConfig 向其传递一些配置选项。列出这个:

Ext.widget('combobox', {
    listConfig: {
        tpl: myTpl
    }
    // ...
});

编辑:如何让它变得动态

请参阅下面的 setListTpl 方法的实现。

// example templates
var templates = [
    Ext.create('Ext.XTemplate', [
        '<tpl for=".">',
             '<div style="background-color: {color};">{text}</div>',
        '</tpl>'
    ])
    ,Ext.create('Ext.XTemplate', [
        '<tpl for=".">',
             '<div style="color: {color};">{text}</div>',
        '</tpl>'
    ])    
];

var combo = Ext.widget('combo', {
    renderTo: Ext.getBody()
    ,store: {
        fields: ['text', 'color']
        ,data: [
            {text: 'Foo', color: 'red'}
            ,{text: 'Bar', color: 'green'}
            ,{text: 'Baz', color: 'blue'}
        ]
    }

    // initial template
    ,listConfig: {
        tpl: templates[0]
    }

    // changes the list template dynamically
    ,setListTpl: function(tpl) {
        var picker = this.getPicker();    
        picker.tpl = tpl;
        picker.refresh();
    }
});

// example usage: alternate between template on each expand
combo.getPicker().on('beforeshow', function() {
    var nextTpl = templates.shift();
    templates.push(nextTpl);
    combo.setListTpl(nextTpl);
});