Results 1 to 5 of 5

Thread: I don't understand anything about layouts

  1. #1

    Default I don't understand anything about layouts

    I've been at this for the past 2 hours today, and at least 10 hours total ..so forgive my frustration ..but F#ck. Is there any documentation regarding the proper way to do things with layouts, besides the API? Take a look at this

    Code:
                    items: [{
                        region: 'center',
                        layout: 'fit',
                        bodyStyle: 'padding-top: 3px; background-color: #999999;',                   
                        items: [{
                            xtype: 'panel',
                            layout: 'fit',
                            border: false,
                            items: [tabs]
                        }],
                        
                        tbar: [{
                            xtype: 'toolbar',
                            border: false,
                            items: [{
                                text: 'Add Applicant',
                                iconCls: 'icon-add',
                                width: 100,
                                handler: function() {
                                    createWin("");
                                }
                            }, '-', {
                                text: 'Remove Applicant',
                                iconCls: 'icon-delete',
                                width: 100,
                                handler: deleteTheRow
                            }, '-', {
                                text: 'Generate Resumes',
                                tooltip: 'This option will generate Printable/Emailable Resumes.  <br /><Br /> You must select at least one applicant. <br /><br />  You can select multiple by holding down CTRL while making your selection',
                                handler: function() {
                                    outputToPDF('resumes');
                                }
                            }, '-', {
                                text: 'Merge Records',
                                tooltip: 'This will merge two records into one',
                                handler: mergeRecords
                            }, {
                                text: 'Print Grid',
                                tooltip: 'This will print what you have displayed in the grid.  <br /><br /> Not all fields will be printed <br /><br />',
                                handler: function() {
                                    outputToPDF('grid');
                                }
                            }]
                        }]                
                    }, {
                        region: 'west',
                        xtype: 'panel',
                        layout: 'fit',
                        border: false,
                        width: 250,
                        minWidth: 250,
                        collapsible: true,
                        collapsed: false,
                        split: true,
                        /**Begin setting up WEST region on applicant_tracking**/
                        items: [{
                            xtype: 'panel',
                            border: false,
                            bodyStyle: 'border: 2px solid #999999', 
                            //Quick Search
                            items: [{
                                xtype: 'panel',
                                border: false,
                                bodyStyle: 'background-color: #999999;',
                                padding: '5px 5px 7px 5px',
                                items: [{
                                    xtype: 'panel',
                                    border: true,
                                    title: 'Quick Search',
                                    padding: '5px 5px 5px 5px',
                                    items: [
                                        new Ext.app.SearchField({
                                            store: _ds,
                                            id: 'search_field',
                                            width: '90%'
                                        })
                                    ]
                                }]
                            //Filters
                            }, {                
                                title: 'Filters',
                                xtype: 'panel',
                                layout: 'fit',
                                collapsible: true,
                                border: false,
                                items: [{
                                    xtype: 'panel',        
                                    padding: '2px',
                                    items: [{
                                        xtype: 'fieldset',
                                        title: 'General',
                                        collapsible: true,
                                        items: [genfilterPanel]
                                    }, {
                                        xtype: 'panel', 
                                        layout: 'anchor',
                                        items: [tree]
                                    }]
                                }]
                            }] 
                        }]   
                    }]
                });
    I'm loving this ext stuff, but things that would take me 10 minutes with nested tables are causing me to cuss and pull my hair out. I cannot for the life of me get things to properly give me 100% height. I've have scoured the forums, examples ..you name it and i've been through it. My head hurts from reading so much stuff ..though i have picked up excellent ideas here and there, but nothing I have found has helped, what I would think, would be an easy thing to do. ..at least nothing i've understood thus far.

    My issue lies in the west region. I cannot get my filter section to go the rest of the way so my Skills tree will touch the bottom of my window. I've tried everything i can think of and there's no telling what i've left in the above code that is just wrong. I have resigned myself to just changing layout types here and there with no general direction.

    Help please!

  2. #2

    Default Ah Frustration

    Sorry to hear about the frustration. ExtJs does have a very steep learning curve. I've been on ExtJs for about a year and am still learning a lot, so hopefully I'm right in saying that all components have a default layout. So every time you create something with an "xtype" it will take on it's default layout unless you specify it to be otherwise.

    So, in your code it looks like you are trying to stack components on top of each other. You might want to try the vbox layout. I've taken you code and modified it a bit. My changes are in red. I hope this helps.

    Code:
    items: [{
        region: 'center',
        layout: 'fit',
        bodyStyle: 'padding-top: 3px; background-color: #999999;',                   
        items: [{
            xtype: 'panel',
            layout: 'fit',
            border: false,
            items: [tabs]
        }],
        
        tbar: [{
            xtype: 'toolbar',
            border: false,
            items: [{
                text: 'Add Applicant',
                iconCls: 'icon-add',
                width: 100,
                handler: function() {
                    createWin("");
                }
            }, '-', {
                text: 'Remove Applicant',
                iconCls: 'icon-delete',
                width: 100,
                handler: deleteTheRow
            }, '-', {
                text: 'Generate Resumes',
                tooltip: 'This option will generate Printable/Emailable Resumes.  <br /><Br /> You must select at least one applicant. <br /><br />  You can select multiple by holding down CTRL while making your selection',
                handler: function() {
                    outputToPDF('resumes');
                }
            }, '-', {
                text: 'Merge Records',
                tooltip: 'This will merge two records into one',
                handler: mergeRecords
            }, {
                text: 'Print Grid',
                tooltip: 'This will print what you have displayed in the grid.  <br /><br /> Not all fields will be printed <br /><br />',
                handler: function() {
                    outputToPDF('grid');
                }
            }]
        }]                
    }, {
        region: 'west',
        xtype: 'panel',
        layout: 'fit',
        border: false,
        width: 250,
        minWidth: 250,
        collapsible: true,
        collapsed: false,
        split: true,
        /**Begin setting up WEST region on applicant_tracking**/
        items: [{
            xtype: 'panel',
            border: false,
            bodyStyle: 'border: 2px solid #999999',
            layout: "vbox",
            layoutConfig: {
                align: "stretch",
                pack: "start"
            },
            //Quick Search
            items: [{
                xtype: 'panel',
                height: 75,
                border: false,
                bodyStyle: 'background-color: #999999;',
                padding: '5px 5px 7px 5px',
                items: [{
                    xtype: 'panel',
                    border: true,
                    title: 'Quick Search',
                    padding: '5px 5px 5px 5px',
                    items: [
                        new Ext.app.SearchField({
                            store: _ds,
                            id: 'search_field',
                            width: '90%'
                        })
                    ]
                }]
            //Filters
            }, {                
                title: 'Filters',
                flex: 1,
                xtype: 'panel',
                layout: 'fit',
                collapsible: true,
                border: false,
                items: [{
                    xtype: 'panel',        
                    padding: '2px',
                    //not sure what you are doing here. You might want to use the vbox layout again though
                    items: [{
                        xtype: 'fieldset',
                        title: 'General',
                        collapsible: true,
                        items: [genfilterPanel]
                    }, {
                        xtype: 'panel', 
                        layout: 'anchor',
                        items: [tree]
                    }]
                }]
            }] 
        }]   
    }]
    Good luck.

  3. #3
    Ext JS Premium Member Elijah's Avatar
    Join Date
    Nov 2009
    Location
    USA
    Posts
    382

    Default

    Strongly recommend you buy this book. The print is not out yet but you can get the early edition in PDF format. It has been a huge help for me.

    ExtJS in Action http://www.manning.com/garcia/

  4. #4

    Default

    Ok, here is what I ended up with
    Code:
              
                        region: 'west',
                        xtype: 'panel',
                        layout: 'fit',
                        border: false,
                        width: 250,
                        minWidth: 250,
                        collapsible: true,
                        collapsed: false,
                        /**Begin setting up WEST region on applicant_tracking**/
                        items: [{
                            xtype: 'panel',
                            border: false,
                            bodyStyle: 'border: 2px solid #999999', 
                            layout: 'vbox',
                            layoutConfig: {
                                align: 'stretch',
                                pack: 'start'
                            },
                            //Quick Search
                            items: [{
                                xtype: 'panel',
                                height: 75,
                                border: false,
                                bodyStyle: 'background-color: #999999;',
                                items: [{
                                    xtype: 'panel',
                                    border: true,
                                    title: 'Quick Search',
                                    padding: '5px 5px 5px 5px',
                                    items: [
                                        new Ext.app.SearchField({
                                            store: _ds,
                                            id: 'search_field',
                                            width: '90%'
                                        })
                                    ]
                                }]
                            //Filters
                            }, { 
                                flex: 1,
                                xtype: 'panel',
                                layout: 'accordion',
                                border: false,
                                items: [{
                                    title: 'Filters',
                                    xtype: 'panel',
                                    padding: '2px',
                                    items: [{
                                        xtype: 'fieldset',
                                        title: 'General',
                                        collapsible: true,
                                        items: [genFilterPanel]
                                    }, {
                                        activeTab: 0,
                                        xtype: 'tabpanel',
                                        id: 'skillFilterPanel',
                                        height: 150,
                                        autoScroll: true,
                                        items: [tree]
                                        
                                    }]
                                }, {
                                    title: 'Options',
                                    xtype: 'panel',
                                    layout: 'fit'
                                }]
                            }] 
                        }]   
                    }]
                });
    Thanks for the help with the Vbox. In the end I had to set an actual height though as I needed it to autoscroll and it wouldn't without it. And I had to use to http://examples.extjs.eu/?ex=gridincard this for proper formatting. If I would have put a 'panel' next after my tabpanel (which I was doing yesterday), it would cause it NOT to work again. I didn't even think about using 'title' under my tree for the title of the Tab. But it ended up working out.

    I added some listeners to handle resizing of the window and all seems to be working on my machine. We'll see when my HR manager starts using it on her smaller resolution screen ..

    And I did buy the book, but unfortunately i am so slammed from all directions (work and personal life) that I don't have time to read all of it. I'm hoping after this month I can sit back down and start on it again as what I'm programming is going to be an extremely large application and I would like to do things correctly from the start ..which probably won't matter seeing how i'm the IT/programming/fix the fax, copier, anything else electronics guy at work which means i'm constantly cutting corners and doing maintenance, aka taping until an actual disaster, comes and the upper management finally has their f#cking eyes opened to the fact we need more IT personal in here ..lol, but that's a different story....thanks for the help.

  5. #5

    Default

    Oh ..and love this/couldn't agree more:

    Quote Originally Posted by Elijah View Post
    When it comes to new technologies, a week of training is worth 3 months of drudgery.

Similar Threads

  1. Replies: 3
    Last Post: 25 Apr 2010, 6:43 PM
  2. Something I don't understand about Store objects
    By kczav in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 2 Apr 2009, 1:28 AM
  3. I don't underStand some code for history!
    By everrich in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 8 Sep 2008, 12:50 AM
  4. i don't understand the layouts
    By alex_aam in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 28 Feb 2008, 3:01 PM
  5. Help me understand layouts
    By sfwalter in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 15 Oct 2007, 5:55 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
  •