1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default Unanswered: Customized picker

    Unanswered: Customized picker


    Hi
    Screen Shot 2012-10-23 at 14.31.55.png

    I was wondering how to implement this kind of component, difference between a normal Picker is that this one is always shown, there's no extra click required to pop up the normal Picker-dialog.

    So this would just show up next to other Form-components, and allows one to scroll to the correct hour as if it were a Picker.

    This code works, however I don't know how to apply the orange CSS to the selected minute/hour-component, I don't know how to access this one.

    Question: is this a good way to make such a component? Or is it easier to override a Picker and work from there? How would I access the middle component to apply CSS onto it?


    JS:
    Code:
    {
                                xtype: 'dataview',
                                baseCls: 'timeList',
                                name: 'hoursList',
                                itemTpl: '<span>{value}</span>',
                                disableSelection: true,
                                pressedCls: '',
    
    
                                scrollable: {
                                    indicators: false,
                                    momentumEasing: {
                                        minVelocity: 2
                                    },
                                    slotSnapEasing: {
                                        duration: 100
                                    },
                                    scroller: {
                                        slotSnapSize: 47
                                    }
                                },
    
    
                                data: [
                                    {value: 0},
                                    {value: 1},
                                    {value: 2},
                                    {value: 3},
                                    {value: 4},
                                    {value: 5},
                                    {value: 6},
                                    {value: 7},
                                    {value: 8},
                                    {value: 9}
                                ]
                            },
                            {
                                xtype: 'label',
                                html: '.'
                            },
                            {
                                xtype: 'dataview',
                                baseCls: 'timeList',
                                name: 'minutesList',
                                itemTpl: '<span>{value}</span>',
                                disableSelection: true,
                                pressedCls: '',
    
    
                                scrollable: {
                                    indicators: false,
                                    momentumEasing: {
                                        minVelocity: 2
                                    },
                                    slotSnapEasing: {
                                        duration: 100
                                    },
                                    scroller: {
                                        slotSnapSize: 47
                                    }
                                },
    
    
                                data: [
                                    {value: 0},
                                    {value: 1},
                                    {value: 2},
                                    {value: 3},
                                    {value: 4},
                                    {value: 5},
                                    {value: 6},
                                    {value: 7},
                                    {value: 8},
                                    {value: 9}
                                ]
                            },
                            {
                                xtype: 'label',
                                html: 'h'
                            }
    CSS:
    Code:
    $rowHeight : 47px
    
    timeList {
      height: $rowHeight * 5;
      width: 50px;
      margin: 0px 15px;
    }
    
    .timeList-item {
      height: $rowHeight;
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#a6a6a6), to(#878787));
      border-top: 1px solid $lightgrey;
    }
    
    .timeList .x-inner { //allows values 0, 1, 8 and 9 to be selected too
      padding-top: $rowHeight * 2;
      padding-bottom: $rowHeight * 2;
    }
    
    .timeList-item:last-child { //allows 9 to be selected
      height: $rowHeight+1;
    }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    750
    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


    I would have done two dataviews side by side also (btw, the slots of a picker are just dataviews). To know which element/record is in the middle you just need to do some checking with the offsets
    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
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    I had to change the DataView's itemTpl by using useComponents: true, defaultType: 'tLItem'
    Then I was able to access each Item from the list and apply CSS to the appropriate one, otherwise this was not possible?

    Here's how I access each the middle component:
    Code:
    this.getHoursList().getScrollable().getScroller().on('scrollend', function (s, x, y) {
                var index = Math.floor(y / this.getRowHeight());
                 this.getHoursList().getInnerItems()[0].getInnerItems()[index].setCls('selectedCls')
    }
    I'm not sure why I have to do the first .getInnerItems()[0] but it works :-), is this a good way? I don't like it that I have to put the rowheight in the CSS and in the Controller.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar