Recently in one of my project, we have a requirement to create dropdown like standard HTML dropdown with Sencha Touch. See the below screenshot.
As we know in Sencha Touch Selectfield (dropdown) uses either floating panels and bottom picker to show and choose value from one. So in this blog I am going to mention how to do this.
First of all following should be our views.
{
xtype : 'panel',
height: 40,
itemId: 'monthSelector',
id: 'monthSelector',
style: 'background-color:#ffffff;color: #019297;border-bottom:1px solid #019297;font-size: 12px',
html: '<div style="height:100%;width:100%;display: table;">$lt;div style="display: table-cell;vertical-align: middle;">Select Month</div><img style="position:relative;float:right;top:10px" height="20" width="20" src="resources/css/images/black-down-arrow.png"/></div>',
listeners: {
initialize: function( element ) {
this.element.on({
tap: function( ele ){
MyApp.app.getController('MyController').toggleDropDown();
}
});
}
}
},
{
xtype: 'dataview',
itemId: 'expenseMonthSelector',
id: 'expenseMonthSelector',
scrollable: false,
style: 'font-size: 12px',
height: 80,
store: {
fields: ['id', 'name','color'],
data: [
{id : 1, name: 'Current Month', color: '#9decf0'},
{id : 2, name: 'Previous Month', color: '#6cd2d6'}
]
},
itemTpl: '<div style="background-color: {color}; color:#000000;height:40px;width:100%;display: table;"><div style="display: table-cell;vertical-align: middle;padding-left: 20px">{name}</div></div>'
}
As you can see above we have one panel with layout look like a dropdown and one dataview which will act like options for the dropdown.
After this we will add our toggleDropDown function to toggle dropdown.
toggleDropDown: function(){
if(this.getExpenseMonthSelector().isHidden() == true){
this.getExpenseMonthSelector().show();
}else{
this.getExpenseMonthSelector().hide();
}
},
Above code will simply show hide data view. Hope this helps you.
No comments:
Post a Comment