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

サンプル出力にそれを実行します。 - タイトルタイトル

を変更した後

を変更する前に

をあなたは煎茶ドキュメントでExt.Listクラス内で見れば

---

はFYI、あなたは、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'"); 
    }