先看看下面的一些主要代码,显示的结果和我原本想要的结果是不一样的,想要知道该如何来修改,如下面的代码是实现的效果: { 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 JScript 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就好了 JScript 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 }; } 此外,还有一个地方要修改,增加的Ext.view.MultiSelectDisplayValue引用,如下: Ext.define('Ext.ux.form.MultiSelect', { extend: 'Ext.form.FieldContainer', mixins: { bindable: 'Ext.util.Bindable', field: 'Ext.form.field.Field' }, alternateClassName: 'Ext.ux.Multiselect', alias: ['widget.multiselectfield', 'widget.multiselect'], requires: ['Ext.panel.Panel', 'Ext.view.BoundList', 'Ext.layout.container.Fit'], uses: ['Ext.view.DragZone', 'Ext.view.DropZone','Ext.view.MultiSelectDisplayValue'],
此文由Web开发之答疑解惑源www.znjcx.com整理,若需转载,请注明原文出处:http://www.znjcx.com/html/y2012/3564_itemselector-ext4-plug-in-implements-a-custom-show.html,谢谢!