How to create something like iPhone settings menu?

[tomalex0]

I would like to know few things

to which panel you have assigned this items

items: [
'settingsBasePanel',
MyApp.views.RegisterCard,
MyApp.views.SettingsCard,
MyApp.views.ModulesCard 
]

if the varibale name is baseSettingsPanel

try like this

listeners:{
                        itemtap : function(dataview,index,item,e){
				var newindex = index + 1;
				baseSettingsPanel.setActiveItem(newindex,'slide');
				
                        }
                    }

It should work

[fairport]

I really appreciate your help! Many Thanks!
I have changed things around a bit, trying to get this working. I now have just one single record in the 'settingsStore' which has a childpanel = 'registercard

I have your code for the following in a separate js file...
Ext.SettingsPanel = ...
Ext.regModel('settingsModel', ...
var settingsStore = ...

Then, I have a TabPanel set up with 4 cards,
One of those cards is my 'homecard'

at the top of my homecard.js I have your
var settingsBasePanel = new Ext.Panel({ ... ...
it has this in it ....

listeners:{
itemtap : function(dataview,index,item,e){
console.log(dataview.store.getAt(index).data.childpanel);
MyApp.views.Homecard.setActiveItem(index, 'slide');
}
}

then all I have below that is:

MyApp.views.Homecard = Ext.extend(Ext.Panel, {
iconCls: "home",
layout: 'card',
items:[settingsBasePanel, MyApp.views.RegisterCard]
});

Ext.reg('homecard', MyApp.views.Homecard);

It displays ok, but on tapping I get this

error message = Uncaught TypeError: Object function (){ superclass.apply(this, arguments); } has no method 'setActiveItem'

[tomalex0]

If i can get a working demo code that you trying i can look into. Based on one of your previous question i tried something like this. Have a look.

Ext.SettingsPanel = Ext.extend(Ext.List, {
        groupTpl : [
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',,
                '<h3 class="x-list-header x-settings-header" ></h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>'
	]
});
var baseSettingsPanel;
Ext.reg('settingspanel',Ext.SettingsPanel);
Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady : function() {
            Ext.regModel('settingsModel', {
                fields: ['section', 'type','childpanel']
            });
		var bookSettingsPanel = new Ext.Panel({
			html : 'bookSettingsPanel'
		})
		var bookServiceGroupsPanel = new Ext.Panel({
			html : 'bookServiceGroupsPanel'
		})
		var sellSetingsPanel = new Ext.Panel({
			html : 'sellSetingsPanel'
		})
		var sellVendorPanel = new Ext.Panel({
			html : 'sellVendorPanel'
		})
		var sellProductGroupsPanel = new Ext.Panel({
			html : 'sellProductGroupsPanel'
		})
            var settingsStore = new Ext.data.JsonStore({
                model  : 'settingsModel',
                getGroupString : function(record) {
                    return record.get('type');
                },
                data: [
                    {"section":"Airplane Mode","type":"network","childpanel" : bookSettingsPanel,"icon":'data:image/png;base64,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'},
                    {"section":"Wifi","type":"network","childpanel" : bookServiceGroupsPanel,"icon":'data:image/png;base64,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'},
                    
                    {"section":"Sound","type":"utility","childpanel" : sellSetingsPanel,"icon":'data:image/png;base64,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'},
                    {"section":"Brightness","type":"utility","childpanel" : sellVendorPanel,"icon":'data:image/png;base64,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'},
                    {"section":"Wallpaper","type":"utility","childpanel" : sellProductGroupsPanel,"icon":'data:image/png;base64,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'}
                ]
            });
            var settingsBasePanel =  new Ext.Panel({
                layout:{
                    type:'vbox',
                    align:'stretch'
                },
                baseCls: 'blackback',
                fullscreen:true,
                scroll:'vertical',
                items: [{
                    fullscreen:true,
                    scroll:false,
                    xtype: 'settingspanel',
                    cls:'settingscls',
                    grouped     : true,
                    indexBar    : false,
                    singleSelect: true,
                    onItemDisclosure: true,
                    store:settingsStore,
                    itemTpl: '<tpl for="."><div ><img src ="{icon}" class="icon" /><strong>{section}</strong></div></tpl>',
                    listeners:{
                        itemtap : function(dataview,index,item,e){
				console.log(index);
				var newindex = index + 1;
				baseSettingsPanel.setActiveItem(newindex,'slide');
				//console.log(dataview.store.getAt(index).data.childpanel);
				//var child = (dataview.store.getAt(index).data.childpanel);
				//baseSettingsPanel.setActiveItem(child,'slide');
                        }
                    }
                }]
            });
            baseSettingsPanel = new Ext.Panel({
                layout:'card',
                scroll:false,
                fullscreen:true,
                items:[settingsBasePanel,bookSettingsPanel,bookServiceGroupsPanel,sellSetingsPanel,sellVendorPanel,sellProductGroupsPanel]
            });
    }
});

[fairport]

Thanks ..
It certainly works OK with your code.
Seems I am declaring the variables (panels) in the wrong place ... or not early enough in the setup phase

.. Roger

[fairport]

Finally...
Having got my declarations correct in the ViewPort.js and corrected all my cases in the nameSpaces etc.
I have it working!!

Thanks for the help

[vinaykrypton]

Hiiii ! nice information. its very useful for me.Thanks

[cmujica2]

Hi all

Nice thread, I need a List look like Iphone menu too, but I can't merge this code with my code. My results:
menu_test.png
My item list is biggest as iphone menu, the words aren't align in the middle, the border for first and last can't be obtain.

Code:

var store = new Ext.data.JsonStore({
    model  : 'Contact',


    getGroupString : function(record) {
        return record.get('menu')[0];
    },


    data: [
        {menu: '<img src="images/summary2.png" height="42" width="42" /> Shipment Summary ',item:'1'},
            {menu: '<img src="images/detail2.png" height="42" width="42" /> Shipment Details ',item:'2'},
        {menu: '<img src="images/documents2.png" height="42" width="42" /> Shipment Documents ',item:'3'}
    ]
});

SL.views.mainMenuBottomBar = new Ext.List
({
        id: 'MBB',
        fullscreen: false,
        centered: true,
        cls: 'settingscls',
        disableSelection: true,
        scroll: false,
        dock: 'bottom',
        itemTpl : '<tpl for="."><div class="x-list-group-items">{menu}</div></tpl>',
        grouped : false,
        indexBar: false,
        onItemDisclosure: 
                function(record)
               {
                    if(record.get('item')=='1')               {
                   }
                    ...
               },
   store: store
});

CSS Code:

.settingscls
{
    background:transparent;
}
.settingscls .x-list-disclosure
{
        margin-top:0.6em;
        right:1em !important;
        -webkit-mask:none;
        -webkit-mask-box-image: url('images/list-arrow.png');
}
.settingscls .x-list-item
{
    background:white;
    left:10px;
    right:10px;
    bottom:10px;
     -webkit-border-top-left-radius: 0.4em ;
         -webkit-border-top-right-radius: 0.4em;
     -webkit-border-bottom-left-radius: 0.4em;
         -webkit-border-bottom-right-radius: 0.4em;
}

One question more, it's possible touch all item zone to go? not only disclosure icon

Thank you in advance