1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    26
    Vote Rating
    0
    gmenuet is on a distinguished road

      0  

    Default Select field with your own picker

    Select field with your own picker


    Hi. Is it possible to make a selectfield with your own picker ? Currently, SelectField support just one column in the pop up showed. I would like something more like the Date Picker, but with my own picker... I don't find anything like that in the forums. I have no choice but to make a custom component?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    All you have to do is extend the Select component and override the getPicker function I believe. Just look at the Select component's source and you will see what to do.

    Just think about slots for the Picker component part of the Select component
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    26
    Vote Rating
    0
    gmenuet is on a distinguished road

      0  

    Default


    Thanks for your answer. So right now, i try to extend Ext.form.Field, exactly like the Ext.form.DatePicker ... But, i clearly don't understand everything. I think i'm close but there is still something i miss. I have my select field well-initialized, the picker shows the good value, but nothing happens when i valid my picker... This my code :

    Code:
    Ext.form.PickerHeuresMinutes = Ext.extend(Ext.form.Field, {
        ui: 'select',
        picker: pickerHeuresMinutes(this.value), //pickerHeuresMinutes is my own Ext.Picker
        destroyPickerOnHide: false,
        initComponent: function() {
            this.addEvents(
                'select'
            );
    
            this.tabIndex = -1;
            this.useMask = true;
            Ext.form.Text.superclass.initComponent.apply(this, arguments);
        },
    
        getPickerHeuresMinutes: function() {
            if(!this.picker instanceof Ext.Picker){
                this.picker = pickerHeuresMinutes(this.value);
            }
            return this.picker = pickerHeuresMinutes(this.value);
        },
        
        onMaskTap: function() { 
            this.getPickerHeuresMinutes().show();
        },
    
        onPickerChange : function(picker, value) {
            this.setValue(value);
            this.fireEvent('select', this, this.getValue());
        },
    
        onPickerHide: function() {
            if (this.destroyPickerOnHide && this.picker) {
                this.picker.destroy();
            }
        },
    
        setValue: function(value) {
            this.value = value;
    
            if (this.rendered) {
                this.fieldEl.dom.value = this.value;
            }
        },
    
        getValue: function() {
            return this.picker.getValue()['heures'] + 'h' + this.picker.getValue()['minutes'];
        },
    
        onDestroy: function() {
            if (this.picker) {
                this.picker.destroy();
            }
    
            Ext.Picker.superclass.onDestroy.call(this);
        }
    });
    
    
    Ext.reg('pickerheureminutefield', Ext.form.PickerHeuresMinutes);
    I don't think i should use the handler function of my picker. But i don't have any clue right now...




    So you say maybe i should try something new, by overriding Select component ? Maybe it's simpler. I'm gonna look into this...

    Thanks again.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can do it two ways...

    Assign a custom Picker to a normal Ext.form.Select field:

    Code:
    new Ext.form.Select({
        ....
        picker: new Ext.Picker({ .... })
    })
    Or extend Ext.form.Select and override the getPicker function with your custom Ext.Picker.

    The second way (extending) is the more "professional" way to do it. Either way, you will have to set up a listener to change the value and the the actual field. You can look at the onPickerChange function that the default Ext.form.Select field uses.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Look at the Ext.form.Select source code...

    /sencha-touch-*/src/widgets/form/Select.js
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Posts
    26
    Vote Rating
    0
    gmenuet is on a distinguished road

      0  

    Default


    Ok so finally, i made it with some help. I made my component like the Ext.form.DatePicker, extending Ext.form.Field :

    Code:
    Ext.form.PickerHeuresMinutes = Ext.extend(Ext.form.Field, {
        ui: 'select',
        picker: null,
        initComponent: function() {
            this.useMask = true;
            Ext.form.Text.superclass.initComponent.apply(this, arguments);
        },
    
        getPickerHeuresMinutes: function() {
            var cmp = this;
            if (!this.picker || this.picker.isDestroyed){ 
                this.picker = pickerHeuresMinutes(this.value);
                this.picker.addListener("heureSelectionnee", function(heures, minutes) {
                    cmp.setValue(heures + "h" + minutes);
                    cmp.fireEvent("heureSelectionnee", heures, minutes);
                });
            }
            return this.picker;
        },
    
        onMaskTap: function() {
            this.getPickerHeuresMinutes().show();
        },
    
        setValue: function(value) {
            this.value = value;
            if (this.rendered) {
                this.fieldEl.dom.value = this.value;
            }
            return this;
        },
    
        getValue: function() {
            return this.value;
        },
    
        onDestroy: function() {
            if (this.picker) {
                this.picker.destroy();
            }
    
            Ext.Picker.superclass.onDestroy.call(this);
        }
    });
    
    
    Ext.reg('pickerheureminutefield', Ext.form.PickerHeuresMinutes);

    I had some issues with my picker since this object has a bug. I destroy the picker when i hide it, so my component had a reference to ... nothing i guess. That's why i have a this.picker.isDestroyed in my getPicker. And "this" can be tricky in javascript sometimes ... but that is all my fault. (note to myself). And then the other important part is :

    Code:
    this.picker.addListener("heureSelectionnee", function(heures, minutes) {
                    cmp.setValue(heures + "h" + minutes);
                });
    So i have in my picker a picker.fireEvent("heureSelectionnee", heure, minute) on my handler doneButton (where heure and minute is the values of my picker).


    And here how you can use it :

    Code:
    {
                            xtype: 'pickerheureminutefield',
                            name : 'arrivee1',
                            id: "arrivee1",
                            value: '08h01',
                            listeners: {
                                heureSelectionnee: function(heures, minutes) {
                                    // whatever you want if you need
                                }
                            }
                        }
    That works well. Since my component is a kind of TimePicker, i will need it more than one time, so that is fine, but now i think that a component where you can define each time a different picker would be really great and better.


    Thanks again for your clues mitchellsimoens

  7. #7
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Red face


    gmenuet,

    Where is the place you defined "pickerHeuresMinutes" in line 12? Your own picker?

    Thanks,

    Buckeye

  8. #8
    Sencha User
    Join Date
    Apr 2010
    Posts
    26
    Vote Rating
    0
    gmenuet is on a distinguished road

      0  

    Default


    yeah exactly, this is just a Ext.Picker defined by me as a global var. It allows me to use the picker on a button (for an handler event for example) but also use on my custom component.

  9. #9
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Default


    gmenuet, thanks for your reply.

    I am testing your code now. Could you please give me the line how this pickerHeuresMinutes is defined?

    I define it as Ext.Picker but give me a "Result of expression 'this.addEvents' [undefined] is not a function: error.

    Thanks.

  10. #10
    Sencha User
    Join Date
    Apr 2010
    Posts
    26
    Vote Rating
    0
    gmenuet is on a distinguished road

      0  

    Default


    dataMinutes and data heure are juste two array of number for hours and minutes :

    PHP Code:
      pickerHeuresMinutes = function (value){

            ....
            
            var 
    = new Ext.Picker({
                
    doneButton:{
                    
    text:'Valider',
                    
    handler:function(){
                        
    p.fireEvent("heureSelectionnee",  p.getValue()["heures"],  p.getValue()["minutes"]);
                        
    this.hide();
                    }

                },
                
    listeners:{
                    
    hide:function(){
                        
    // BUG PICKER
                        
    this.destroy();
                        
    this.p;

                    }
                },
                
    cancelButton:'Annuler',
                
    slots: [
                {
                    
    name 'heures',
                    
    title'Heure',
                    
    useTitles:true//not workning
                    
    data dataHeures
                
    },{
                    
    name 'minutes',
                    
    title'Speed',
                    
    useTitles:true//not working
                    
    data dataMinutes
                
    }
                ]
            });

            
    p.addEvents("heureSelectionnee");
            return 
    p;
        } 

Similar Threads

  1. [FIXED] [OPEN-659] Select Field Picker leaves empty space and makes page jump
    By gcallaghan in forum Sencha Touch 1.x: Bugs
    Replies: 13
    Last Post: 11 Sep 2011, 7:36 PM
  2. How to get Picker rather than "showBy" overlay for select field
    By gcallaghan in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 11 Dec 2010, 12:11 AM
  3. Picker and option select
    By gabrielstuff in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 3 Oct 2010, 3:45 PM
  4. Moving the Form Select Picker
    By mikeyroy in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 29 Sep 2010, 3:45 PM
  5. How can I set the doneText value in a Ext.form.Select --> picker
    By SimonFlack in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 19 Sep 2010, 9:51 PM

Thread Participants: 3