ext4中的插件itemselector如何做到自定义显示
ext4中的插件itemselector如何做到自定义显示
先看主要的代码:
{
xtype: "itemselector",
name: "itemselectorList",
id: "itemselectorList",
height: 400,
store: Ext.create('Ext.data.Store',{
fields: ['id', 'name'],
data: [{id: "1", name: "name1"}, {id: "2", name: "name2"}]
}),
displayField: "name",
valueField: "id",
// listConfig:
// {
// getInnerTpl: function()
// {
// return "<div data-qtip='{id}'>{name}{id}</div>";
// }
// },
fromTitle: "fromTitle",
toTitle: "toTitle"
}
这样会显示的列表是:name1
name2
我想要把id也显示出来,即:
name1(1)
name2(2)
我要怎么写呢?
我改下下面这样子,无效果,请高人指点,谢谢
// listConfig:
// {
// getInnerTpl: function()
// {
// return "<div data-qtip='{id}'>{name}({id})</div>";
// }
// },
过修改源代码来实现,按照那篇文章新建一个Ext.view.BoundList的扩展Ext.view.MultiSelectDisplayValue,通过tpl来实现带value的显示即可。。
在ext的examples\ux\form中找到MultiSelect.js,主要修改这个文件
再顶部定义Ext.view.MultiSelectDisplayValue
JavaScript code?Ext.define('Ext.view.MultiSelectDisplayValue', { extend : 'Ext.view.BoundList', // alias : 'widget.multiselectdisplayvalue', // alternateClassName : 'Ext.MultiSelectDisplayValue', initComponent: function() { var me = this; if (!me.tpl) { alert(me.displayField+'-'+me.valueField) me.tpl = new Ext.XTemplate( '<ul><tpl for=".">', '<li role="option" class="' + me.itemCls + '">' + me.getInnerTpl(me.displayField) +'('+me.getInnerTpl(me.valueField)+')' + '</li>', '</tpl></ul>'); } else if (Ext.isString(me.tpl)) { me.tpl = Ext.create('Ext.XTemplate', me.tpl); } me.callParent(); } });
然后找到setupItems配置方法,修改创建Ext.view.BoundList为Ext.view.MultiSelectDisplayValue就好了
JavaScript code?setupItems: function() { var me = this; /* me.boundList = Ext.create('Ext.view.BoundList', Ext.apply({ deferInitialRefresh: false, border: false, multiSelect: true, store: me.store, displayField: me.displayField, disabled: me.disabled }, me.listConfig));*/ me.boundList = Ext.create('Ext.view.MultiSelectDisplayValue', { deferInitialRefresh: false, multiSelect: true, store: me.store, displayField: me.displayField, valueField: me.valueField, border: false, disabled: me.disabled }); me.boundList.getSelectionModel().on('selectionchange', me.onSelectChange, me); return { border: true, layout: 'fit', title: me.title, tbar: me.tbar, items: me.boundList }; }