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

[hatoh]

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 :-)

[haduki]

Your mainview extends by 'Ext.TabPanel',see the doc, there is no 'push' method in Ext.TabPanel.

  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);

[hatoh]

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.

[haduki]

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