Sencha 2.0动态更改标题栏

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

我该怎么做？谢谢。

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/[email protected]', 
     114: 'lib/sencha-touch/resources/icons/[email protected]', 
     144: 'lib/sencha-touch/resources/icons/[email protected]' 
    }, 
    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' 
           } 
           ] 
        }); 
       } 
});

来源

2012-04-29 michele

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' 
     }, 
    .... 
    ....

样本输出： -

更改标题

enter image description here

更改标题

之后之前

enter image description here

仅供参考，如果你看看在煎茶文档的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'"); 
    }

来源

2012-04-29 14:42:22

Sencha 2.0动态更改标题栏

回答

相关问题