Customized picker

[warrean]

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:

{
                            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:

$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;
}

[mitchellsimoens]

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

[warrean]

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:

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.