我有一个网格，其中一列具有组合类型的编辑器。此组合动态填充。现在我只能在其下拉列表中显示一列，但我想在其下拉列表中显示多列。每个下拉列表可能包含不同的列名。
我成功创建了 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 是在 store load 事件中创建的。
function DataID_Focus(combo, records, eOpts) {
storeTableStructure.load({
url: 'TestCase.ashx?methodname=gettablestructure&stepdisplayname=name'
});
combo.tpl = Ext.create('Ext.XTemplate', tplDataid);
combo.expand();
};