Results 1 to 5 of 5

Thread: Creating a Layout for my new project

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Default Creating a Layout for my new project

    I am starting a new project and just a little confused on how to lay this out. Based on one of the tab bar layout examples I started with that. I have these different screens, for this example we will say 5. Using the card layout I have this so far.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo</title>

    <link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script type="text/javascript" src="../ext-touch-debug.js"></script>
    <script type="text/javascript" src="index.js"></script>

    </head>
    <body>

    <div id="card1">
    <h1>Card 1</h1>

    </div>

    <div id="card2">
    <h1>Card 2</h1>

    </div>

    <div id="card3">
    <h1>Card 3</h1>

    </div>

    <div id="card4">
    <h1>Card 4</h1>

    </div>

    <div id="card5">
    <h1>Card 5</h1>

    </div>

    </body>
    </html>

    And here is the js...

    Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: true,
    onReady: function() {
    var tabpanel = new Ext.TabPanel({
    tabBar: {
    dock: 'bottom',
    layout: {
    pack: 'center'
    }
    },
    fullscreen: true,
    ui: 'light',
    animation: {
    type: 'slide',
    cover: true
    },
    defaults: {
    scroll: 'vertical'
    },
    items: [{
    title: 'Card 1 Title',
    iconCls: 'time',
    cls: 'card1',
    contentEl: 'card1'
    }, {
    title: 'Card 2 Title',
    iconCls: 'team',
    cls: 'card2',
    contentEl: 'card2'
    }, {
    title: 'Card 3 title',
    cls: 'card3',
    iconCls: 'download',
    contentEl: 'card3'
    }, {
    title: 'Card 4 Title',
    cls: 'card4',
    iconCls: 'settings',
    contentEl: 'card4'
    }, {
    title: 'Card 5 Title',
    cls: 'card5',
    iconCls: 'user',
    contentEl: 'card5'
    }
    ]
    });
    }
    });


    So far so good. My question is how can I add a nice bar to the top that will have the title of each "card". The other question is how can I load these "cards" via ajax. Right now all of this content is pretty static but if each of these card divs had the actual content this thing would take forever to load.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243

    Default

    In order to get the title from the active card you can do the following.

    Code:
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        glossOnIcon: true,
        onReady: function() {
            var titleBar = new Ext.Toolbar({
                dock: 'top'
            });
            
            var tabpanel = new Ext.TabPanel({
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
                dockedItems: [titleBar],
                fullscreen: true,
                ui: 'light',
                animation: {
                    type: 'slide',
                    cover: true
                },
                defaults: {
                    scroll: 'vertical'
                },
                listeners: {
                    afterlayout : function() {
                        titleBar.setTitle(this.layout.getActiveItem().title);
                    },
                    cardswitch: function(card) {
                        titleBar.setTitle(card.title);
                    }
                },
                items: [{
                    title: 'Card 1 Title',
                    iconCls: 'time',
                    cls: 'card1',
                    contentEl: 'card1'
                },
                {
                    title: 'Card 2 Title',
                    iconCls: 'team',
                    cls: 'card2',
                    contentEl: 'card2'
                },
                {
                    title: 'Card 3 title',
                    cls: 'card3',
                    iconCls: 'download',
                    contentEl: 'card3'
                },
                {
                    title: 'Card 4 Title',
                    cls: 'card4',
                    iconCls: 'settings',
                    contentEl: 'card4'
                },
                {
                    title: 'Card 5 Title',
                    cls: 'card5',
                    iconCls: 'user',
                    contentEl: 'card5'
                }
                ]
            });
        }
    });
    To load content into a component you can do the following.
    Code:
    Ext.Ajax.request({
        url: 'card1.html',
        success: function(response) {
            card1.update(response.responseText);
        }
    });
    You could do this in the afterrender event of each card for example to only load the data as soon as the card is shown for the first time.

  3. #3

    Default

    Quote Originally Posted by TommyMaintz View Post
    In order to get the title from the active card you can do the following.
    To load content into a component you can do the following.
    Code:
    Ext.Ajax.request({
        url: 'card1.html',
        success: function(response) {
            card1.update(response.responseText);
        }
    });
    You could do this in the afterrender event of each card for example to only load the data as soon as the card is shown for the first time.
    Sorry for the dumb question, I cant figure out exactly where to put this. I searched but I can't figure it out. Anyone have a full example of its use?
    Thanks for any input...

  4. #4

    Default Card Layout with ajax cards

    OK I am almost there.. thanks for the help guys.. I just don't understand how you set the inner html of a <div>. If the item that made that call had an id of card1 the code below might work but it doesn't. I tried giving the first item an id:'card1' but that didn't work either.

    Sorry for the easy questions here but its been awhile since I have used Ext

    Code:
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        glossOnIcon: true,
        onReady: function() {
           
    	    var titleBar = new Ext.Toolbar({
    			dock:'top'
    		});
    	   
    	    var tabpanel = new Ext.TabPanel({
    		    tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
    			dockedItems: [titleBar],
                fullscreen: true,
                ui: 'light',
                animation: {
                    type: 'slide',
                    cover: true
                },
                defaults: {
                    scroll: 'vertical'
                },
    			listeners: {
    				afterlayout : function() {
    					titleBar.setTitle(this.layout.activeItem.title);
    				},
    				cardswitch: function(card) {
    					titleBar.setTitle(card.title);
    				}
    			},
                items: [{
    				id:'card1',
                    title: 'Card 1',
                    iconCls: 'time',
                    cls: 'card1',
    				listeners: {
    					afterrender : function(){
    						Ext.Ajax.request({
    							url: 'card1.cfm',
    							method: 'GET',
    							success: function(response){
    								
    								/**
    								 * How do you update the body of a <div> with the id of card1
    								 * this will obviously give you a card1 is not defined.
    								 * 
    								 */
    								card1.update(response);
    
    							},
    							failure: function(){
    								handleError("There was an issue getting the card 1 data");
    							}
    						});
    					}
    				}
                }, {
                    title: 'Card 2',
                    iconCls: 'team',
                    cls: 'card2',
    				contentEl: 'card2'
                }, {
                    title: 'Card 3',
                    cls: 'card3',
                    iconCls: 'download',
    				contentEl: 'card3'
                }, {
                    title: 'Card 4',
                    cls: 'card4',
                    iconCls: 'settings',
    				contentEl: 'card4'
                }, {
                    title: 'Card 5',
                    cls: 'card5',
                    iconCls: 'user',
    				contentEl: 'card5'
                }	
    			]
            });
    		
        }
    });
    
    function handleError(e){
    	console.log(e);
    }

  5. #5

    Default

    Figured it out, this should work the only difference is if you don't use ColdFusion you won't need that param.

    Code:
    Ext.setup({
        icon: 'icon.png',
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        glossOnIcon: true,
        onReady: function() {
           
    	    var titleBar = new Ext.Toolbar({
    			dock:'top'
    		});
    	   
    	    var tabpanel = new Ext.TabPanel({
    		    tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
    			dockedItems: [titleBar],
                fullscreen: true,
                ui: 'light',
                animation: {
                    type: 'slide',
                    cover: true
                },
                defaults: {
                    scroll: 'vertical'
                },
    			listeners: {
    				afterlayout : function() {
    					titleBar.setTitle(this.layout.activeItem.title);
    				},
    				cardswitch: function(card) {
    					titleBar.setTitle(card.title);
    				}
    			},
                items: [{
    				id:'card1',
                    title: 'Card 1',
                    iconCls: 'time',
                    cls: 'card1',
    				listeners: {
    					afterrender : function(){
    						Ext.Ajax.request({
    							url: 'card1.cfm',
    							method: 'GET',
    							params: {
    								"_cf_nodebug":true
    							},
    							success: function(response){
    								Ext.getCmp("card1").update(response.responseText);
    							},
    							failure: function(){
    								handleError("There was an issue getting the card 1 data");
    							}
    						});
    					}
    				}
                }, {
                    title: 'Card 2',
                    iconCls: 'team',
                    cls: 'card2',
    				contentEl: 'card2'
                }, {
                    title: 'Card 3',
                    cls: 'card3',
                    iconCls: 'download',
    				contentEl: 'card3'
                }, {
                    title: 'Card 4',
                    cls: 'card4',
                    iconCls: 'settings',
    				contentEl: 'card4'
                }, {
                    title: 'Card 5',
                    cls: 'card5',
                    iconCls: 'user',
    				contentEl: 'card5'
                }	
    			]
            });
    		
        }
    });
    
    function handleError(e){
    	console.log(e);
    }

Similar Threads

  1. Replies: 1
    Last Post: 7 Jun 2010, 4:39 AM
  2. Problem executing a Java Project class in GXP project
    By efsiken in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 22 Apr 2010, 7:15 AM
  3. New to ext: creating a project management system...
    By Selfish in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 14 Feb 2009, 4:18 AM
  4. New GXT Advanced Layout Manager Project
    By stefan.popescu in forum Community Discussion
    Replies: 0
    Last Post: 14 Jan 2009, 2:04 AM
  5. Creating Layout Inside Tab Panel with Grids and Images in Regions of Layout
    By mrkevans in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 15 Oct 2008, 8:16 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
  •