我有一个网格，其中一列具有组合类型的编辑器。该组合动态填充。现在，我只能在其下拉列表中显示一列，但我想在其下拉列表中显示不止一列。每个下拉列表可能包含不同的列名。
我成功创建了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();
};
最佳答案
您应该将模板分配给组合的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);
});
关于extjs4 - 将动态tpl分配给网格中的组合，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16828766/