1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    hatoh is on a distinguished road

      0  

    Default Unanswered: Unable to push HTML view for List with Tab Panel in a Tab Panel View

    Unanswered: Unable to push HTML view for List with Tab Panel in a Tab Panel View


    Hi to Sencha Touch Community, I am new to Sencha Touch 2.x.

    I am currently trying out the following design:

    1. Upon launch of my program, user will see 3 bottom Tab Icons. Below is the main.js:

    Ext.define('Sencha.view.Main', {

    extend: 'Ext.TabPanel',
    xtype: 'mainpanel',


    requires: [ 'Sencha.view.MainView' ],

    config: {
    tabBar: {
    docked: 'bottom',
    layout: { pack: 'center' }
    },

    items: [
    // Tab 1
    { xtype: 'mainview' },

    // Tab 2
    {
    title: 'Item 2',
    iconCls: 'search',
    html: '<p>Not implemented yet</p>'
    },

    // Tab 3
    {
    title: 'Item 3',
    iconCls: 'info',
    html: '<p>Not implemented yet</p>'
    }
    ]
    }
    });


    2. For the main Tab 1, it will display another Tab panel, which displays a list of items. When user clicks on an item, it will display an html content. Below is my mainView.js:

    Ext.define('Sencha.view.MainView', {
    extend: 'Ext.TabPanel', // this does not work
    //extend: 'Ext.navigation.View', // this works, but not what is desired


    xtype: 'mainview',

    config: {


    iconCls: 'home',
    title: 'Item 1',

    items: [
    // Add a Toolbar
    {
    docked: 'top',
    xtype: 'toolbar',
    title: 'My App'
    },
    {
    xtype: 'list',
    title: 'Tab 1',

    fields: ['itemName'],

    data: [
    { itemName: "List Item 01"},
    { itemName: "List Item 02"},
    ],

    itemTpl: '{itemName}',

    //onItemDisclosure: false,

    listeners: {
    itemtap: function(list, index, item, record) {
    // this alert works
    //Ext.Msg.alert('Tap', 'Message for ' + record.data.itemName, Ext.emptyFn);


    this.up('mainview').push({
    title: record.data.itemName,
    html: '<p>Hello</p>'
    });
    }
    }
    },
    {
    title: 'Tab 02',
    scrollable: 'vertical',
    html: '<p>Not implemented yet</p>'
    },
    {
    title: 'Tab 03',
    scrollable: 'vertical',
    html: '<p>Not implemented yet</p>'
    },
    ]
    }
    });

    For the code that I have written, somehow, I am not able to populate the view of the html content with the listener I have created. However, it is able to pop up Alert message box.

    Anybody knows what went wrong?

    Thanks :-)

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Your mainview extends by 'Ext.TabPanel',see the doc, there is no 'push' method in Ext.TabPanel.
    Code:
      var newItem = this.up('mainview').add({
         title: record.data.itemName,
         html: '<p>Hello</p>'
      });
      // if you want to switch to this new content 
      this.up('mainview').setActiveItem(newItem);

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    hatoh is on a distinguished road

      0  

    Default


    Hi,

    Thanks for the fast reply.

    The add method will create a new tab with the html content. Is there a way to populate my content under the same Tab 01?

    Thanks.

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Code:
    {
        title: 'Tab 1',
        layout: 'vbox',
        items: [
            {
               //your list config
                flex:1,//or height:xxxx
                listeners:{
                    itemtap: function(list, index, item, record) {
                        var newItem=this.up('container[title="Tab 1"]').add({
                            title: record.data.itemName,
                            html: '<p>Hello</p>',
                            height:40
                        });
                    }
                }
            }
        ]
    }

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi