Question

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

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

我的逻辑是：

创建网格
在焦点事件中 - 动态填充组合并创建tpl
将tpl指定给组合
按展开方式显示下拉列表。

如果有任何方法，例如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);
});

Answer 2

我得到了答案，非常感谢rixo。它是如此简单，请参考我的代码和一些更新：

1。将setListTpl配置添加到您的组合虽然它在文档中描述它可以更新tpl并从任何您想要的地方调用此配置。我从焦点事件中调用它，请参阅第二次更新以了解如何调用

     ......
     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>'
                    ),
                    setListTpl: function(tpl) {
                            var picker = this.getPicker();
                            picker.tpl = tpl;
                            picker.refresh();
                        }
                }
            }
     ....

2。从combo的焦点事件调用setListTpl config为：

     function DataID_Focus(combo, records, eOpts) {
    storeTableStructure.load({
        url: 'url to load store'
    });

    combo.setListTpl(Ext.create('Ext.XTemplate', newTplstring));
    combo.expand();
};

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