items within collapsible border layout always visible

[mfearby]

For some time this has been bugging me but I've been getting by (it's an app for my own use) but I just can't seem to get items within the East border layout to collapse with the region itself when I hide it. I've stripped all the unnecessary stuff so that the attached HTML is a working stand-alone example of my problem. I've also commented out an attempt at fixing the problem (which was unsuccessful). Can anybody see what I've done wrong?

Thanks. I'm using Sencha 3.2.1

[Condor]

You have duplicate ids (e.g. searchpanel). Ids need to be unique!

ps. Wouldn't it be easier to use:

{
    region: 'north',
    id: 'searchform',
    height: 50,
    xtype: 'form',
    labelWidth: 30,
    items: [{
        fieldLabel: 'L:',
        anchor: '0',
        xtype: 'combo',
        ...
    },{
        fieldLabel: 'R:',
        anchor: '0',
        xtype: 'combo'
        ...
    }]
}

[mfearby]

Thanks, Condor. That has solved my problem. Can't believe I missed that one. Most of my really annoying problems have usually turned out to be silly mistakes.

Also, I'm using a column layout for the field labels and combo boxes so that half of the area isn't wasted with needless white space between the short label and the combo box.

Thanks again.

[Condor]

That is what 'labelWidth' is for!

[mfearby]

Thanks. Hadn't seen labelWidth before (I'm new to Sencha, and one thing I'm discovering is that it's big!). I tried this but still can't get my tiny label to appear centred using some CSS as before:

xtype: 'form',
labelWidth: 15,
labelStyle: 'margin-left: 6px;',
items: [{
    fieldLabel: 'L',
    anchor: '0',
    xtype: 'combo',
}

I'm happy with what I've got so far. My way of centring the label might be nasty but it looks right on screen :-)

Thanks for your help.

[Condor]

That labelStyle is weird. Don't you want padding on the whole form instead?

ps. Do you really want to label centered? Usually people only want them aligned left or right (see labelAlign).

[mfearby]

It's not necessarily that I want the label centred but I do want it to be not right up against the splitter to the left, but since I want the two search combo boxes (one to look up Latin words, the other English, by the way) to take up the maximum space possible, I don't want to go with a general padding setting. As each word is found I click on the auto-completed item below the combo and it gets added to the grid below. Just makes finding words easier, and screen real-estate is at a premium :-)

Thanks.

[Condor]

You probably want 6px both left and right, so I would recommend:

labelWidth: 15,
bodyStyle: 'padding: 0 6px;'

ps. To save space you could even set labelPad:0.