Results 1 to 6 of 6

Thread: list in tab Panel

  1. #1
    Ext User
    Join Date
    Oct 2010
    Posts
    27

    Default list in tab Panel

    I am sure this kind of question has been answered a few hundred times but (anyway).

    I want to put a list in each of my 2 tabPanels. Have got so far as putting all the details together but having a problem with putting it all together. Can anyone help me with this?

    Here is my code so far:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
    		// TOOLBAR/TOP
    		var toolbar = new Ext.Toolbar ({
    			dock: 'top',
    			title: 'bodymetrics',
    			cls: 'main_bar',
    			items:[{
    			ui:'back',
    			html:'back',
    			}]
    		});
    		
    		var content = new Ext.TabPanel({
                fullscreen: true,
    			animation: {type: 'flip', duration: 900},
                type: 'dark',
                items: [
    					{
    					title: 'Scanner 1',					
    					},{
    					title: 'Scanner 2',
    					},
    					]
    		});
    		
    
    		
    		
    		
    				
    		// ROOT PANEL
    		new Ext.Panel({
    		fullscreen: true,
    		dockedItems: [toolbar, content],
    		});	
    		
    		Ext.regModel('Contact', {
        	fields: ['firstName', 'lastName']
    		});
    
    		var store = new Ext.data.JsonStore({
      	  	model  : 'Contact',
        	sorters: 'lastName',
    
        	getGroupString : function(record) {
            return record.get('lastName')[0];
        	},
    
    		data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'},
            {firstName: 'Jamie',   lastName: 'Avins'},
            {firstName: 'Aaron',   lastName: 'Conran'},
            {firstName: 'Dave',    lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jim',     lastName: 'Smith'},
            {firstName: 'Lucy',    lastName: 'Jones'},
            {firstName: 'Zara',    lastName: 'Smith'},
            {firstName: 'Jane',    lastName: 'Robinson'},
            {firstName: 'Bea',     lastName: 'Pewter'},
            {firstName: 'Caroline',lastName: 'Penn'},
            {firstName: 'Jenny',   lastName: 'Graham'},
            {firstName: 'Laura',   lastName: 'Hilts'},
            {firstName: 'Alice',   lastName: 'Greene'},
            {firstName: 'Jess',    lastName: 'Philips'},
            {firstName: 'Anne',    lastName: 'Robinson'},
        	]
    		});
    
    		var list = new Ext.List({
        	fullscreen: true,
        
        	itemTpl : '{firstName} {lastName}',
        	indexBar: true,
        
        	store: store
    		});
    		list.show();
    		
        }
    });
    am sure there are lots of other noob issues in my code which would appreciate being picked up (even if I get slated for them )

    Any help - hugely appreciated.

    PS. I will add another store for the second tabPanel when I know that it can work..

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    use it as an item

  3. #3
    Ext User
    Join Date
    Oct 2010
    Posts
    27

    Default

    thanks...

    Tried putting as...
    Code:
    var content = new Ext.TabPanel({
                fullscreen: true,
    			animation: {type: 'flip', duration: 900},
                type: 'dark',
                items: [
    					{
    					title: 'Scanner 1',
    					style: 'background-color:red',
    					html: 'this is the page for scanner one, use the selector above to see scanner two'	,
    					items: [Contact]			
    					},{
    					title: 'Scanner 2',
    					style: 'background-color:green',
    					html:'this is the page for scanner two',				
    					},
    					]
    		});
    ... Not working, presumably wrong. Also the "animation" effect is not working - it is moving as a "swipe/default"

    Sorry.

  4. #4
    Ext User
    Join Date
    Oct 2010
    Posts
    27

    Default

    [btw] When I say "presumably wrong" - this is regarding me and my lack of knowledge.

  5. #5
    Ext User
    Join Date
    Oct 2010
    Posts
    27

    Default

    Should I be referencing it or putting the entire code into the "items" section? When I create a sub-items section for it and add the entire code I get a parse issue on the "Ext.regModel('Contact', {" line. When I try to reference the Ext.regModel as an item I also get a blank screen. Am sure this is an easy to fix issue and I am being a bit dense but... ohwell.

    HEADACHE.

  6. #6
    Sencha User
    Join Date
    Jul 2010
    Posts
    31

    Default

    check the forum, there are examples...

Similar Threads

  1. How to wrap tab title so that it fits tab width in a Vertical Tab Panel
    By koala.lam in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Oct 2010, 8:39 AM
  2. Displaying the Tab panel from the Nested List edit button
    By CoastWeb in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 7 Oct 2010, 2:52 PM
  3. Replies: 0
    Last Post: 17 Sep 2010, 3:40 AM
  4. Replies: 1
    Last Post: 11 Feb 2010, 2:20 AM

Posting Permissions

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