Results 1 to 4 of 4

Thread: Trying to understand how to apply layouts to components (mainly panels / containers)

  1. #1
    Sencha User JeanNiBee's Avatar
    Join Date
    Nov 2009
    Location
    Montreal, Quebec CANADA
    Posts
    20

    Question Trying to understand how to apply layouts to components (mainly panels / containers)

    Hi

    First off, love this framework good work to all the devs and to the support people both official and non-official on this forum.

    On to my question.

    I've been able to get a lot of what I want done without maybe fully understanding better ways of using CSS applied to my components to get layout working. (That says a lot about the frameworks ease of use).

    Where I am trying to get a better understanding is when laying out form fields / buttons etc in panels. (Not using form layout either, I'm talking table / column and mixes of the two).

    Most examples I see here and on other site all use simplistic "html" which automatically just applies any 'cls' config option you set, but this isn't the case with panels and/or its' child panels/buttons.

    Ex: Aligning a button on a panel, I can get it nicely centered like I want using "bodyCfg: { tag: center } }" but that doesn't help if I want to right align or even use vertical alignments.

    So my question, how can I get a better grip of when to apply 'special' configurations like bodyCfg, style, cellCls, cls, ctCls etc etc.

    I'm sure it would be easy to say RTFC (Read the 'freaking' code) but I'm hoping (at this very short term) to get a general overview, maybe with example(s), which will then HELP me understand the code I've been reading.

    Thanks for everything.

    Keep up the good work all.

    -
    Jean

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

    Default

    Not sure what you are asking.

    Just use the layout config that provides the layout you want.

    hbox lays out as a row of boxes managing their widths (and optionally, syncing their heights)

    vbox does that in the other dimension, managing heights and optionally widths

    table lays out as a table

    column floats them across the Container..

    etcetera. Most of them are documented, and all of them have examples in the examples directory.

  3. #3
    Sencha User JeanNiBee's Avatar
    Join Date
    Nov 2009
    Location
    Montreal, Quebec CANADA
    Posts
    20

    Default

    Hi

    Okay let me illustrate with an example.

    Code:
    Ext.onReady( function() {
    var panel = new Ext.Panel({
        id:'main-layout'
        ,layout:'table'
        ,layoutConfig:{columns: 3}
        ,defaults:{border: false}
        ,items:[
            {
                id: '1'
                ,html: 'Title: '
            },{
                id: '1a'
                ,html: ''
            },{
                id: '1b'
                ,items: {
                    xtype: 'textfield'
                    ,name: 'testField'
                    ,msgTarget: 'under'
                }
            },{
                id: '2'
                ,html: ''
            },{
                id: '2a'
                ,items: {
                    xtype: 'button'
                    ,icon: 'images/red_minus.png'
                    ,text: ''
                    ,handler: function () {
                        // Do something here.
                    }
                }
            },{
                id: '2b'
                ,items: {
                    xtype: 'datefield',
                    format: 'Y-m-d',
                    msgTarget: 'under'
                }
            }
        ]
    });
    panel.render(Ext.getBody());
    In this example I have an "html" (or plain text" label, followed by an action button and then the field. (PLS note that TriggerField and TwinTriggerField are not options for me to replace this layout at the moment... we can discuss later if need be.)

    So using the table layout I have everything left aligned 'out of the box'. If I want to change that alignment, adding some css works nicely on the html field label but does nothing to the button or field itself. Trying to use ctCls also shows no change.

    What did work for me (when aligning the button as I can live with left aligned fields) was modifying the button config to the following (As per a previous post you made Animal).

    Code:
    id: '2a'
    ,bodyCfg: {
        tag: 'center'
    }
    ,items: {
        xtype: 'button'
        ,icon: 'images/red_minus.png'
        ,text: ''
        ,handler: function () {
            // Do something here.
        }
    }
    In the examples posted above by Animal; hbox, vbox, table layout, container layout etc (I'm confident that) those are clear to me when to use them.. what's not clear is when I want to ADD style to the items IN those layouts.

    Here is hoping I'm a bit clearer in my explanations sorry for the initial confusion.

    Thanks for the patience.
    Last edited by JeanNiBee; 12 Feb 2010 at 10:30 AM. Reason: typos etc...
    -
    Jean

    Only 24,000 more posts to tie Animal...

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2010
    Posts
    86

    Default

    Keep at it, Jean. I have the same sort of questions about button alignment. What I have found is I either live with it or stumble across someone like you who has figured it out. Sorry, this is one I ended up living with.

Posting Permissions

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