Sencha 2.0 动态更改标题工具栏

Question

我会动态更改列表标题栏的标题。这是我的app.js，您可以在其中查看我的应用程序（请参阅 var 列表，其中有我要更改的工具栏项和标题）

我该怎么做？ 谢谢。

    var mainForm ;
var mainFormPanel={};


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

var list= Ext.create('Ext.List', {
    fullscreen: true,
    store: 'MyStore',
    itemTpl: '{txt}',
    items: [{
        xtype: 'titlebar',
        docked: 'top',
        title:'change dinamically this title!!!!'
    }] // items (list)
}); // create()

Ext.application({
    glossOnIcon: false,
    autoMaximize: false,
    icon: {
        57: 'lib/sencha-touch/resources/icons/icon.png',
        72: 'lib/sencha-touch/resources/icons/icon@72.png',
        114: 'lib/sencha-touch/resources/icons/icon@2x.png',
        144: 'lib/sencha-touch/resources/icons/icon@114.png'
    },
    phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
    tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',


    requires: [
               'Ext.tab.Panel',
               'Ext.form.*',
               'Ext.field.*',
               'Ext.Button',
               'Ext.data.Store'
               ],

               launch: function() {
                   mainForm = Ext.create('Ext.form.Panel', {
                       xtype:'formpanel',
                       items: [
                               {
                                   xtype: 'textfield',
                                   name : 'distance',
                                   label: 'Distance'
                               },
                               {
                                   xtype: 'textfield',
                                   name : 'quantity',
                                   label: 'Quantity'
                               }
                               ]
                   });

                   mainFormPanel={            
                           xtype: 'toolbar',
                           docked: 'bottom',
                           layout: {
                               pack: 'center'
                           },
                           items: [
                                   {
                                       xtype: 'button',
                                       text: 'Set Data',
                                       handler: function() {
                                           mainForm.setValues({
                                               distance: '300',
                                               quantity: '25'
                                           })
                                       }
                                   },
                                   {
                                       xtype: 'button',
                                       text: 'Get Data',
                                       handler: function() {
                                           Ext.Msg.alert('Form Values', JSON.stringify(mainForm.getValues(), null, 2));
                                       }
                                   },
                                   {
                                       xtype: 'button',
                                       text: 'Clear Data',
                                       handler: function() {
                                           mainForm.reset();
                                       }
                                   }
                                   ]
                   };

                Ext.Viewport.add({
                       xtype: 'tabpanel',
                       items: [
                               {
                                   //each item in a tabpanel requires the title configuration. this is displayed
                                   //on the tab for this item
                                   title: '1-tab',
                                   layout:'fit',
                                   //next we give it some simple html
                                   items: [mainForm,mainFormPanel],
                                   //then a custom cls so we can style it
                                   cls: 'card1'
                               },
                               {
                                   //title
                                   title: '2-tab',
                                   layout:'fit',
                                   items: [list],
                                   cls: 'card2'
                               },
                               {
                                   //title
                                   title: '3-tabs',
                                   //the items html
                                   items: {
                                       html: 'mia auto',
                                       centered: true
                                   },
                                   //custom cls
                                   cls: 'card3'
                               }
                               ]
                   });
               }
});

Answer 1

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 Docs 中的 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'");
    }