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

[JeanNiBee]

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

[Animal]

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.

[JeanNiBee]

Hi

Okay let me illustrate with an example.

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).

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.

[plmdoctor]

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.