List Sencha 2.0动态更改标题工具栏

我会动态更改列表标题栏的标题。这是我的

app.js

，您可以在这里查看我的应用程序（请参阅var列表，其中有我要更改的工具栏项和标题）

我该怎么做？ 谢谢

---

Ext.List

组件的超类是

Ext.DataView.

，而不是

Ext.Panel

因此，无法直接在

Ext.List

组件中添加/停靠任何项目

因此，我建议您将

Ext.List

组件包装在

Ext.Panel

中

这样做,

var myStore = Ext.create('Ext.data.Store', {
        storeId: 'MyStore',
        fields: ['txt']
}); // create()

 var listpanel = new Ext.Panel({
        layout: 'fit',   // important to make layout as 'fit'
        items: [
            {
                xtype: 'titlebar',
                id: 'myTitle',
                docked: 'top',
                title: 'Before Change title',
                items: [
                    {
                        xtype:'button',
                        text:'Change Title',
                        align:'right',
                        listeners : {
                            tap : function() {
                                Ext.getCmp('myTitle').setTitle('After Title Change');
                            }
                        }
                    }
                ]
            },
            {
              //Definition of the list
              xtype: 'list',
              itemTpl: '{txt}',
              store: myStore,
            }]
      });

    ....
    ....
       {
           title: '2-tab',
           layout:'fit',
           items: [listpanel],
           cls: 'card2'
       },
    ....
    ....

样本输出：-

更改标题之前

更改标题后

---

仅供参考，如果您查看Sencha文档中的

Ext.List

类，您将在

initComponent（）

方法中看到以下代码

if (Ext.isDefined(this.dockedItems)) {
        console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
    }

if (Ext.isDefined(this.dockedItems)) {
        console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
    }