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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar