2

リストのタイトルバーのタイトルを動的に変更します。これは私app.jsのアプリを表示できる場所です（変更するツールバー項目とタイトルがある変数リストを参照してください）

これどうやってするの？ありがとう。

    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'
                               }
                               ]
                   });
               }
});
4

1 に答える 1

2

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参考までに、Sencha Docsのクラスの内部を見ると、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-29T14:42:22.020 に答える