View Full Version : Displaying the Tab panel from the Nested List edit button

7 Oct 2010, 9:59 AM
I've been modifying the Kitchen Sink example to get a better understanding of Sencha Touch, but have run into something I cant seem to work out (i'm new to Sencha/ExtJS).

Basically what I am doing is; on the nested list example, when you navigate to the a car, the edit button becomes enabled, and clicking it loads up an edit panel. What I would like to do instead, is then load up the tabs example (like you had selected tabs from the menu), but I'm not really sure where to look in the API for find an answer, and cant see an example that seems to do this that I can look at.

I've located the button code in nestedList.js ( http://dev.sencha.com/deploy/touch/examples/kitchensink/src/demos/nestedlist.js )

var editBtn = new Ext.Button({
text: 'Edit',
disabled: true,
handler: function() {

var activeList = demos.NestedList.getActiveItem(),
record = activeList.getSelectedRecords()[0];

//todo: need to load the tabs example card/panel here.


I'm guessing I need to so something similar to "onNavPanelItemTap" in index.js ( http://dev.sencha.com/deploy/touch/examples/kitchensink/src/index.js ) But not quite sure how to reference the card from in nestedList.js

7 Oct 2010, 2:52 PM
Instead I would make the demos.nestedList be a panel with a card layout, then embed the nested list as the first item, the tabs as the second item.

var list = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'}, editBtn]
store: store

demos.NestedList = new Ext.Panel({
layout: 'card',
items: [list, tabs]