1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    180
    Vote Rating
    0
    luv2hike is on a distinguished road

      0  

    Default Combo box list width (again)

    Combo box list width (again)


    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>
    Attached Images

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      -1  

    Default


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

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    180
    Vote Rating
    0
    luv2hike is on a distinguished road

      0  

    Default


    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'
    },
    ...
    Last edited by luv2hike; 22 Feb 2008 at 11:25 AM. Reason: fix code posted and added comments

  4. #4
    Ext User
    Join Date
    Feb 2008
    Posts
    180
    Vote Rating
    0
    luv2hike is on a distinguished road

      0  

    Talking


    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!

  5. #5
    Sencha User
    Join Date
    Oct 2007
    Posts
    26
    Vote Rating
    0
    pgiraud is on a distinguished road

      0  

    Default


    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();
                        }
                    }
                }

  6. #6
    Ext User
    Join Date
    Apr 2007
    Posts
    1
    Vote Rating
    0
    askagirl is on a distinguished road

      0  

    Default


    My solution is to set lazyInit config value to "false".
    Last edited by askagirl; 9 Jul 2008 at 9:31 AM. Reason: typo mistake

  7. #7
    Ext User
    Join Date
    Sep 2008
    Posts
    1
    Vote Rating
    0
    neovazjr is on a distinguished road

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    jgeewax is on a distinguished road

      0  

    Lightbulb


    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();
    });

  9. #9
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    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.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  10. #10
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    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...
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."