如何在运行时将tpl分配给组合 [英] How to assign tpl to combo at runtime

问题描述

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



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



我的逻辑是：



创建网格

焦点事件 - 动态填充组合并创建tpl

将tpl分配给组合

通过展开方法显示下拉列表。

请建议我是否有任何方法，如combo.setTpl（tpl_string）



逻辑描述：



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

I have a grid in that one column has editor of type combo. This combo fills dynamically. Right now i can show only one column in its drop down list but i want to show more than one column in its drop down list. each drop down list may contain different column names.

I succeed in creating tpl string but fail to assign this tpl to combo.

My logic is:

create grid
in focus event- fill combo dynamically and create tpl
assign tpl to combo
show drop down list by expand method.
Please suggest me if there is any method like combo.setTpl(tpl_string)

Logic Description:

1. Created model which will hold two columns

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中使用模型的创建商店

2. Created store which will use model in step 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.这是为了改变e按EXT JS列的数据类型

3. This is to change data type of columns as per 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.这是一个模型和商店的组合

4. This is a model and store of a combo

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步中创建的商店负载上调用

5. Here is the method which will get called on store load which we created in step 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.此函数正在创建我的网格。

6. This function is creating my grid.

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是在商店加载事件中创建的。

7. On focus event of combo i am calling this function. In this function i loaded store created in step 2. so that combo will filled by new record and as per new records it will have multiple columns. You can see tpl is created in store load event.

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

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

推荐答案

我得到了一个答案，非常感谢堆栈溢出rixo。这很简单，请参考我的代码和一些更新：



1.将setListTpl配置添加到您的组合虽然在文档中描述它可以更新tpl和调用这个配置来自你想要的任何地方。 I called it from focus event, see second updation for how to call

I got an answer, thanks a lot rixo on stack overflow. It is so simple refer my code and some updations are:

1. add setListTpl config to your combo though it is described in documents it does job of updating tpl and call this config from wherever you want. I called it from focus event, see second updation for how to call

......
     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. Call setListTpl config from focus event of combo as:

2. Call setListTpl config from focus event of combo as:

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

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

这篇关于如何在运行时将tpl分配给组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！