Combo box list width (again)

**luv2hike** · 22 Feb 2008 9:57 AM

I've seen lots of threads on this but none of the solutions work in my case. The code below works ONLY if spanel starts expanded. If I set collapsed:true in its config options, the combo box drop list is only 68px wide. When set to false, so the panel is in view at startup, the list is the correct width, the same as the text field. This line is noted in RED. Any ideas? I've tried combinations of deferredRender, hideMode, lazyRender but none have solved it. 2 thumbnails attached. First shows it correct with collapsed:false, the second shows the problem with collapsed:true. I know the root of the problem is width being calculated on a display:none, but I do not know how to fix it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
</head>

<body>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function()
{
    var blankBgStyle = "background-color:#bdc0d9; border:0";

    var myData = [
        [27,'AA and once again','incline'],
        [44,'AA Another test','rowing'],
        [11,'Ab Crunch','flat'],
        [31,'AB new event handler','rowing'],
        [32,'Again...','rowing'],
        [25,'AND and again','incline'],
        [50,'And now make it paint','squat'],
        [22,'Another new key 2','rowing'],
        [24,'another new one','incline'],
        [46,'AY huh Do it Now','incline'],
        [6,'Bench Press','incline'],
        [13,'Chinups','squat'],
        [33,'Did it finally work?','rowing'],
        [29,'Double Commit','flat'],
        [36,'Final Sorting Test','leg'],
        [49,'Fix sort error and Repaint','flat'],
        [17,'Friday 1','leg'],
        [18,'Friday 2','rowing'],
        [21,'Get the key','flat'],
        [8,'Leg Extension','leg'],
        [7,'Leg Press','rowing'],
        [1,'Lying Biceps Curl','flat'],
        [2,'Lying Shoulder Press','flat'],
        [54,'MIDNIGHT','--'],
        [23,'new one','flat'],
        [38,'Now without a sort','squat'],
        [26,'one more time','incline'],
        [14,'pushups','flat'],
        [37,'Really last sort test','incline'],
        [3,'Rear Deltoid Rows','flat'],
        [4,'Reverse Fly','flat'],
        [53,'rock on','--'],
        [10,'Seated Ab Crunch','incline'],
        [9,'Seated Shoulder Press','flat'],
        [5,'Seated Triceps Extension','incline'],
        [48,'Slimline','incline'],
        [12,'Squat','squat'],
        [19,'Test add 1','rowing'],
        [20,'test add 2','flat'],
        [39,'Test Commit single','flat'],
        [34,'Test the sort','flat'],
        [35,'testing sort again','rowing'],
        [15,'the first test','incline'],
        [16,'Thursday night test','incline'],
        [40,'Tuesday 1','flat'],
        [41,'Tuesday 2','leg'],
        [42,'Tuesday 3','squat'],
        [52,'wbyp','--'],
        [47,'ZZ Top','squat']
    ];

    var Exercise = Ext.data.Record.create(
    [
        { name: 'exerID', type: 'int' },
        { name: 'exerName' },
        { name: 'bench' }
    ]);

    var myReader = new Ext.data.ArrayReader({}, Exercise);

    var combostore = new Ext.data.Store(
    {
        proxy: new Ext.data.MemoryProxy(myData),
        reader: myReader,
        autoLoad: true,
        sortInfo: { field: "exerName", direction: "ASC" }
    });

    var repDetailsPanel = new Ext.Panel(
    {
        layout: 'border',
        id: 'card2',
        hideMode: 'offsets',   // this makes combo box drop list width accurate if panel starts expanded
        bodyStyle: blankBgStyle,
        items: [
            repDetailsForm = new Ext.form.FormPanel(
            {
                id: 'repDetailsForm',
                region: 'north',
                url: 'saveRep.jsp',  // not important for this issue
                method: 'POST',
                onSubmit: Ext.emptyFn,
                monitorValid: true,
                defaultType: 'numberfield',
                labelAlign: 'top',
                buttonAlign: 'left',
                bodyStyle: blankBgStyle,
                items: [
                    {
                        name: 'workoutID',
                        xtype: 'hidden'
                    },
                    {
                        name: 'repID',
                        xtype: 'hidden'
                    },
                    {
                        // the combo box
                        fieldLabel: 'Exercise',
                        hiddenName: 'exerciseID',
                        tabIndex: 1,
                        id: 'exCombo',
                        xtype: 'combo',
                        allowBlank: false,
                        forceSelection: true,
                        typeAhead: true,
                        triggerAction: 'all',
                        selectOnFocus: true,
                        lazyInit: false,     // tried all combinations
                        lazyRender: true,    // of these two as well
                        mode: 'local',
                        store: combostore,
                        valueField: 'exerID',
                        displayField: 'exerName'
                    },
                    {
                        fieldLabel: 'Weight',
                        name: 'weight',
                        allowBlank: false,
                        allowDecimals: false,
                        allowNegative: false,
                        maxLength: 3,
                        selectOnFocus: true,
                        tabIndex: 2,
                        validationDelay: 100,
                        width: 32
                    },
                    {
                        fieldLabel: 'Reps',
                        name: 'lifts',
                        allowBlank: false,
                        allowDecimals: false,
                        allowNegative: false,
                        maxLength: 2,
                        selectOnFocus: true,
                        validationDelay: 100,
                        tabIndex: 3,
                        width: 25
                    }
                ],
                buttons: [
                {
                    text: 'Save',
                    formBind: true,
                    handler: Ext.emptyFn  // for demo purposes
                },
                {
                    text: 'Cancel',
                    handler: Ext.emptyFn  // for demo purposes
                }]
            }),
            new Ext.Panel({
                region: 'center',
                bodyStyle: blankBgStyle
            })
        ]
    });

    var viewport = new Ext.Viewport(
    {
        layout: "border",
        renderTo: Ext.getBody(),
        items:[
            {
                region: "north",
                title: "Test",
                bodyStyle: blankBgStyle,
                height: 20
            },
            new Ext.TabPanel({
                region: 'center',
                title: "Tab Panel",
                activeTab: 0,
                items:[
                {
                    title: "Tab 1",
                    bodyStyle: blankBgStyle,
                    html: "<p>First panel</p>"
                },
                {
                    title: "Tab 2",
                    bodyStyle: blankBgStyle,
                    html: "<p>Second panel</p>"
                },
                {
                    title: "Tab 3",
                    bodyStyle: blankBgStyle,
                    html: "<p>Third panel</p>"
                }]
            }),
            // right-side card layout panel
            spanel = new Ext.Panel(
            {
                region: "east",
                layout: "card",
                activeItem: 'card1',
                title: "Card Panel",
                width: 400,
                animCollapse: false,
                collapsible: true,    // true makes combo list too narrow!
                collapseMode: 'mini',
                collapsed: true,
                hideCollapseTool: true,
                split: true,
                items: [
                    new Ext.Panel(
                    {
                        id: 'card1',
                        autoScroll: true,
                        bodyStyle: blankBgStyle,
                        html: "<p>Card One</p>"
                    }),
                    repDetailsPanel
                ],
                bbar: [
                    { text: "One", handler: function() { spanel.getLayout().setActiveItem("card1"); } },
                    { text: "Two", handler: function()
                        {
                            // load with a fixed record to test the select highlight in the form
                            repDetailsForm.getForm().setValues({ workoutID: 1, repID: 0, exerciseID: 53, weight: '50', lifts: '10' });
                            spanel.getLayout().setActiveItem("card2");
                        }
                    }
                ]
            })
        ]
    });
});//end onReady function
</script>
</body>
</html>

**mystix** · 22 Feb 2008 10:52 AM

have you tried the ComboBox's minListWidth and listWidth configs?

**luv2hike** · 22 Feb 2008 11:20 AM

Yes. minListWidth didn't seem to help, but using width and listWidth did size it properly, however, that is not optimal as I may not know how wide it should be. I also tried anchor:'65%' which worked as well, but again, it requires me specifying the width which I'd like it to know based on the items in the list. Plus with anchor, its size changes as the user moves the splitter bar, as it should, but is not what is wanted in this case.

Excerpt from my code in the original post demonstrating the different things I've mentioned above that have been tried.

Code:

...
{
    fieldLabel: 'Exercise',
    hiddenName: 'exerciseID',
    tabIndex: 1,
    id: 'exCombo',
    xtype: 'combo',
    allowBlank: false,
    forceSelection: true,
    typeAhead: true,
    triggerAction: 'all',
    selectOnFocus: true,
    //anchor: '65%',
    //width: 200,   // these 2 lines together will work but mean I must guess the size
    //listWidth: 200,  // also it doesn't line up too well on all browsers as the arrow is different widths
    mode: 'local',
    store: exerstore,
    valueField: 'exerID',
    displayField: 'exerName'
},
...

**luv2hike** · 22 Feb 2008 3:54 PM

I did find a "solution" to this issue without setting the size explicitly or living with it be expanded at the start. The trick was to go ahead and render it with collapsed:false initially, so it is technically expanded, but then at the very end of the onReady before hiding the load mask, collapse it. It works great and is fast enough there is no flicker nor anything the user sees!

Code:

    spanel.collapse();
    myMask.hide();
});//end onReady function

In fact after my first 3 weeks using ExtJS and the wonderful support from these forums, I just convinced my boss to buy the commercial license and support bundle. Woo hoo!

**pgiraud** · 15 May 2008 5:44 AM

Here is how I got this working in a prettier way. Well I think so.

In the container panel :

Code:

            listeners: {
                afterlayout: {
                    fn: function(container, layout) {
                        this.collapse();
                    }
                }
            }

**askagirl** · 9 Jul 2008 9:26 AM

My solution is to set lazyInit config value to "false".

**neovazjr** · 15 Jan 2009 4:04 PM

lazyinit doesn't work if the panel starts hidden, such as those in a cardpanel

**jgeewax** · 1 Feb 2009 12:55 PM

I was using a card layout with combo's in a FormPanel and had the same problem. I'm not sure if this is the best fix, but it seemed to work for me.

When the card is switched, you can try:

Code:

layout.activeItem.getForm().items.each(function(item, index, length) {
    item.syncSize();
});

("layout" for me is Ext.layout.CardLayout)

If you're concerned with not fixing size issues on anything but combo's:

Code:

var items = layout.activeItem.getForm().items.filter('xtype', 'combo');
items.each(function(item, index, length) {
    item.syncSize();
});

**arthurakay** · 25 Feb 2009 9:09 AM

According to the API docs, the 'listWidth' property:
The width in pixels of the dropdown list (defaults to the width of the ComboBox field)

Is there any known bug in Ext regarding this problem? The default setting doesn't seem to correctly get set in an example I have:

Code:

    var distributeRuleBox = new Ext.form.ComboBox({
        fieldLabel: 'Distribution Rule',
        displayField: 'text',
        emptyText: 'Select a value',
        mode: 'local',
        selectOnFocus: true,
        store: distributeRuleBoxStore,
        typeAhead: true,
        triggerAction: 'all',
        valueField: 'id',
        //listWidth: 150, <-- adding this line makes it work fine
        width: 150
    });

I don't mind having to add the extra line, but I shouldn't have to.

For reference, this problem only happens when I have the ComboBox as an item of a FormPanel. (In my application, the FormPanel is nested fairly deep in a series of tab panels... though I don't think that's the issue).

I'm just curious to know if there's been any bugs logged, as this seems like an issue people have run into a whole bunch.

**arthurakay** · 25 Feb 2009 9:28 AM

I actually noticed something very interesting while viewing my application in Safari 4 BETA.

All of my combo boxes work (and look) just fine EXCEPT for the ones I have in this particular FormPanel. In Safari 4, the drop-down arrow appears on the left rather than the right... and the drop-downs don't work at all.

Obviously, Safari 4 isn't supported yet (because its BETA, and like 2 days old) but I'm wondering if the issue stems from using a FormPanel as a tab in a TabPanel. I have almost always used a FormPanel as an item of a Window or some other object, so maybe it just isn't playing nicely with the TabPanel object?

Just a thought...

Combo box list width (again)

Thread Tools

Search Thread

Display

Combo box list width (again)

Combo box list width (again)