Results 1 to 6 of 6

Thread: TabPanel, NestedList and card problems

  1. #1
    Ext User mozicodo's Avatar
    Join Date
    Oct 2010
    Location
    Colorado Springs, CO
    Posts
    14

    Default TabPanel, NestedList and card problems

    I have to following code below which is not showing any of the cards. I'm sure I'm missing something obvious.

    Code:
    var aboutPanel = new Ext.Panel({
    		fullscreen: true,
            items: [{
            	html: 'about'	
            }]
    	});
    	
    var testPanel = new Ext.Panel({
    		fullscreen: true,
    	    items: [{
    	    	html: 'test panel'	
    	    }]
    	});
    
    var menuData = {
        text: 'Test Menu',
        items: [{
    	        text: 'My Test',
    	        card: testPanel,
    	        leaf: true
    	    },{
    	        text: 'Blank Leaf',
    	        leaf: true
    	    }]
    };
    
    Ext.regModel('ListItem', {
        fields: [{name: 'text', type: 'string'}]
    });
    
    var store = new Ext.data.TreeStore({
        model: 'ListItem',
        root: menuData,
        proxy: {
            type: 'ajax',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });
    
    var nestedList = new Ext.NestedList({
        fullscreen: true,
        title: 'Test Menu',
        displayField: 'text',
        store: store
    });
    
    Ext.setup({
    	icon: 'icon.png',
    	glossOnIcon: false,
    	tabletStartupScreen: 'tablet_startup.png',
    	phoneStartupScreen: 'phone_startup.png',
    	
    	onReady: function() {
    
    		new Ext.TabPanel({
    			tabBar: {
    				dock: 'bottom',
    				layout: {
    					pack: 'center'
    				}
    			},
    			fullscreen: true,
    			ui: 'light',
    			animation: {
    				type: 'cardslide',
    				cover: true
    			},
    			items: [nestedList, 
    				{title: 'About', 
    				card: aboutPanel,
    				leaf: true
    			}
    			]
    		}); 
    	}
    })

  2. #2
    Ext User mozicodo's Avatar
    Join Date
    Oct 2010
    Location
    Colorado Springs, CO
    Posts
    14

    Default

    Ok. I answered one of my questions. The About tab now works. I'm still not sure why the card is not showing when clicking on the first item in the nested list:

    Code:
    var aboutPanel = new Ext.Panel({
    	title: 'About',
    	iconCls: 'info',
    	fullscreen: true,
        items: [{
        	html: 'about'	
        }]
    });
    	
    var testPanel = new Ext.Panel({
    	fullscreen: true,
        items: [{
        	html: 'test panel'	
        }]
    });
    
    var menuData = {
        text: 'Test Menu',
        items: [{
            text: 'My Test',
            card: testPanel,
            leaf: true
        },{
            text: 'Blank Leaf',
            leaf: true
        }]
    };
    
    Ext.regModel('ListItem', {
        fields: [{name: 'text', type: 'string'}]
    });
    
    var store = new Ext.data.TreeStore({
        model: 'ListItem',
        root: menuData,
        proxy: {
            type: 'ajax',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });
    
    var nestedList = new Ext.NestedList({
        fullscreen: true,
        title: 'Test Menu',
        displayField: 'text',
        store: store
    });
    
    Ext.setup({
    	icon: 'icon.png',
    	glossOnIcon: false,
    	tabletStartupScreen: 'tablet_startup.png',
    	phoneStartupScreen: 'phone_startup.png',
    	
    	onReady: function() {
    
    		new Ext.TabPanel({
    			tabBar: {
    				dock: 'bottom',
    				layout: {
    					pack: 'center'
    				}
    			},
    			fullscreen: true,
    			ui: 'light',
    			animation: {
    				type: 'cardslide',
    				cover: true
    			},
    			items: [
    				nestedList, 
    				aboutPanel
    			]
    		}); 
    	}
    })

  3. #3
    Ext User mrnap's Avatar
    Join Date
    Oct 2010
    Location
    Chicago
    Posts
    13

    Default

    Pretty sure this code:

    Code:
    Ext.regModel('ListItem', {
        fields: [{name: 'text', type: 'string'}]
    });
    needs to be something like this:

    Code:
    var listItemModel = new Ext.regModel('ListItem', {
        fields:  [
            {name: 'text', type: 'string'}
        ]
    });
    You can also get rid of the array stuff from the fields param since you're only using 'text' as a field.

  4. #4
    Ext User mozicodo's Avatar
    Join Date
    Oct 2010
    Location
    Colorado Springs, CO
    Posts
    14

    Default

    According to the docs and the kitchen sink example, I shouldn't have to do it that way. I did tweak one thing but it didn't make a difference.


    Code:
    Ext.regModel('ListItem', {
        fields: [
        	{name: 'text', type: 'string'}, 
        	{name: 'card'}
        ]
    });

  5. #5
    Ext User mozicodo's Avatar
    Join Date
    Oct 2010
    Location
    Colorado Springs, CO
    Posts
    14

    Default

    Ok. Figured it out. I think in a previous version of Sench Touch the NestedList setup didn't need to be so involved. In the current version, I needed to change the card on the tap event. The specific code is as follows:

    Code:
    nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
        var store      = subList.getStore(),
            record     = store.getAt(subIdx),
            recordNode = record.node,
            title      = nestedList.renderTitleText(recordNode),
            card, preventHide, anim;
    
        if (record) {
            card        = record.get('card');
            anim        = record.get('animation');
            preventHide = record.get('preventHide');
        }
    
        if (card) {
            tabPanel.setCard(card, anim || 'slide');
            tabPanel.currentCard = card;
        }
    });
    and the full code for those interested is:

    Code:
    var tabPanel;
    
    var aboutPanel = new Ext.Panel({
    	title: 'About',
    	iconCls: 'info',
    	fullscreen: true,
        items: [{
        	html: 'about'	
        }]
    });
    
    var optionsPanel = new Ext.Panel({
    	title: 'Options',
    	iconCls: 'settings',
    	fullscreen: true,
        items: [{
        	html: 'options'	
        }]
    });
    	
    var testPanel = new Ext.Panel({
    	fullscreen: true,
        items: [{
        	html: 'test panel'	
        }]
    });
    
    var menuData = [{
        text: 'Test Menu',
        items: [{
            text: 'My Test',
            card: testPanel,
            leaf: true
        },{
            text: 'Blank Leaf',
            leaf: true
        }]
    }];
    
    Ext.regModel('ListItem', {
        fields: [
        	{name: 'text', type: 'string'}, 
        	{name: 'card'}
        ]
    });
    
    var store = new Ext.data.TreeStore({
        model: 'ListItem',
        root: {
        	items: menuData
        },
        proxy: {
            type: 'ajax',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });
    
    var nestedList = new Ext.NestedList({
        fullscreen: true,
        title: 'Test Menu',
        displayField: 'text',
        store: store
    });
    
    nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
        var store      = subList.getStore(),
            record     = store.getAt(subIdx),
            recordNode = record.node,
            title      = nestedList.renderTitleText(recordNode),
            card, preventHide, anim;
    
        if (record) {
            card        = record.get('card');
            anim        = record.get('animation');
            preventHide = record.get('preventHide');
        }
    
        if (card) {
            tabPanel.setCard(card, anim || 'slide');
            tabPanel.currentCard = card;
        }
    });
    
    Ext.setup({
    	icon: 'icon.png',
    	glossOnIcon: false,
    	tabletStartupScreen: 'tablet_startup.png',
    	phoneStartupScreen: 'phone_startup.png',
    	
    	onReady: function() {
    
    		tabPanel = new Ext.TabPanel({
    			tabBar: {
    				dock: 'bottom',
    				layout: {
    					pack: 'center'
    				}
    			},
    			fullscreen: true,
    			ui: 'light',
    			animation: {
    				type: 'cardslide',
    				cover: true
    			},
    			items: [
    				nestedList,
    				optionsPanel, 
    				aboutPanel
    			]
    		}); 
    	}
    })

  6. #6
    Ext User mrnap's Avatar
    Join Date
    Oct 2010
    Location
    Chicago
    Posts
    13

    Default

    Very cool, looks like you fixed your JSON data, I was just about to put it in the validator because it looked a bit funky to me

Similar Threads

  1. Nestedlist in a Tabpanel?
    By Sany in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 11 Aug 2010, 7:54 PM
  2. Toggle.setValue() and NestedList.Add() Problems
    By SuperTron in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 30 Jul 2010, 9:51 PM
  3. fullscreen nestedList as container in tabpanel
    By tissot in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 22 Jul 2010, 11:51 PM
  4. TabPanel (w/ TabBar) and NestedList as Content
    By sjh in forum Sencha Touch 1.x: Discussion
    Replies: 24
    Last Post: 13 Jul 2010, 1:18 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •