Question

我使用ExtJS 4.0.7的ItemSelector元素。默认情况下＆＃34;标题＆＃34; ItemSelector的内容是：＆＃34;可用＆＃34;和＆＃34;选择＆＃34;。我可以动态更改吗？

Answer 1

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

所以我想如果你设置你的itemselector与自定义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');
    }
});

ExtJS 4.0.7 ItemSelector动态更改“标题”

1 个答案:

更新

更新2