ExtJS 4.0.7 ItemSelector 动态更改“标题”

Question

我使用 ExtJS 4.0.7 的 ItemSelector 元素。默认情况下，ItemSelector 的“标题”是：“Available”和“Selected”。我可以动态更改吗？

Answer 1

查看这里的源代码：http://docs.sencha.com/extjs/4.2.2/source/ItemSelector.html#Ext-ux-form-ItemSelector-method-setupItems 似乎有两个配置可用于告诉项目选择器用于列表的标题：fromTitle 和 toTitle。

所以我想，如果您使用自定义 fromTitle（左侧“可用”列表的标题）和 toTitle（右侧“已选择”列表的标题）属性设置项目选择器，它将实现您的目标想。不过我自己没试过……

更新

抱歉，以上内容仅适用于 Ext 4.2.2。我查看了 Ext 4.0.7，看来您需要使用不同的配置。您需要使用的配置称为“多选”，您可以在其中设置标题。请参见下面的示例：

{
  xtype: 'itemselector',
  name: 'itemselector',
  id: 'itemselector-field',
  anchor: '100%',
  fieldLabel: 'ItemSelector',
  imagePath: '../ux/images/',
  store: myStore,
  displayField: 'text',
  valueField: 'value',
  value: ['3', '4', '6'],
  allowBlank: false,
  msgTarget: 'side',
  multiselects: [{listTitle: 'First title'},{listTitle: 'Second title'}]
}

更新 2

为了动态设置标题，您需要使用 multiselects 属性配置带有 id 的面板：

{
            xtype: 'itemselector',
            name: 'itemselector',
            id: 'itemselector-field',
            anchor: '100%',
            fieldLabel: 'ItemSelector',
            imagePath: '../ux/images/',
            store: ds,
            displayField: 'text',
            valueField: 'value',
            value: ['3', '4', '6'],
            allowBlank: false,
            msgTarget: 'side',
            multiselects: [{listTitle: 'First title', id: 'itemselector-from-panel'},{listTitle: 'Second title', id: 'itemselector-to-panel'}]
}

这将允许您稍后获得对它们的引用。我创建了一个按钮来动态设置以下标题：

Ext.create('Ext.button.Button',{
    text: 'Change Titles',
    renderTo: Ext.getBody(),
    handler: function(){
        var fromField = Ext.getCmp('itemselector-from-panel'),
                toField = Ext.getCmp('itemselector-to-panel');
        fromField.panel.setTitle('my new title');
        toField.panel.setTitle('my newer title');
    }
});