1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Vote Rating
    6
    cyee is on a distinguished road

      1  

    Default Workaround for picker selection bugs

    Workaround for picker selection bugs


    Several people have reported a bug in the picker in 2.2.0 (and also 2.1.1?) where you can't select the last item.

    A related bug occurs when you have a bunch of items in a slot (we have about 82) and listen to the change event. The event listener is being passed an incorrect value.

    There is confusion on the first bug, because some people are reporting that it occurs only in desktop Chrome, while others are reporting it on devices. We are able to replicate the problem on devices.

    I found that the following workaround fixes both problems on devices (but not on desktop Chrome).

    First, set an itemCls on the slot. Let's say it's 'ABCD-item-cls'.

    Then add the following to your SASS and compile:

    Code:
    .ABCD-item-cls {
        height: 2.5em !important;
    }

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Location
    D├╝sseldorf, Germany
    Posts
    587
    Vote Rating
    32
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    That would be for me:
    .x-picker-slot .x-dataview-item {
    height: 2.5em !important;
    }

    But still its jumping inside chrome.

  3. #3
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Vote Rating
    6
    cyee is on a distinguished road

      0  

    Default


    Post your full code

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Location
    D├╝sseldorf, Germany
    Posts
    587
    Vote Rating
    32
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    You asked for some code:
    Code:
            
            data = //some data
            title = 'Choose this';
            slots = [{
                name: 'slotname',
                title: title,
                data: data,
                value: 200 //is a valid value
            }]; 
            var .picker = Ext.create('Ext.Picker', {
                action: 'ExamplePicker',
                doneButton: Ext.MessageBox.OK,
                cancelButton: Ext.MessageBox.CANCEL,
                useTitles: !!title,
                height: '13em',
                slots: slots,
                listeners: {
                    change: callback.change,
                    pick: callback.pick,
                    cancel: callback.cancel
                }
            });
    
    
            // Add and show
            Ext.Viewport.add(picker);
            picker.show();

  5. #5
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Vote Rating
    6
    cyee is on a distinguished road

      0  

    Default


    Add an itemCls to your slot:

    Code:
            
            data = //some data
            title = 'Choose this';
            slots = [{
                name: 'slotname',
                title: title,
                data: data,
                itemCls: 'slot-item-cls',
                value: 200 //is a valid value
            }]; 
            var .picker = Ext.create('Ext.Picker', {
                action: 'ExamplePicker',
                doneButton: Ext.MessageBox.OK,
                cancelButton: Ext.MessageBox.CANCEL,
                useTitles: !!title,
                height: '13em',
                slots: slots,
                listeners: {
                    change: callback.change,
                    pick: callback.pick,
                    cancel: callback.cancel
                }
            });
    
    
            // Add and show
            Ext.Viewport.add(picker);
            picker.show();
    Now in your CSS, add:

    Code:
    .slot-item-cls {
        height: 2.5em !important;
    }

Thread Participants: 1