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         };     }

Copyright © 2007-2012 www.chuibin.com 六维论文网 版权所有