PDA

View Full Version : Split Button Question



danvega
12 Jul 2010, 7:04 PM
I have a split button that has some buttons for days of the week. When a button is clicked a method is called for updating a list.



var sb = new Ext.SplitButton({
items:[
{xtype:'button',id:'wednesday',text:'Wednesday',handler:function(b,e){loadData(b,e);}},
{xtype:'button',id:'thursday',text:'Thursday',handler:function(b,e){loadData(b,e);}},
{xtype:'button',id:'friday',text:'Friday',handler:function(b,e){loadData(b,e);}},
{xtype:'button',id:'saturday',text:'Saturday',handler:function(b,e){loadData(b,e);}}
]
});


My question is I don't really like that I have a button handler for each click. It would be much easier if there was a change event so I could just listen for that. The other reason this is a pain is because I have to call this method to select the 1st one which doesn't fire off that load method. IF there was a change watcher that would work out perfect.

sb.setActive(0);


I am sure there is an easy way to do this but I am still getting used to the framework so suggestions are welcomed.

Thanks!

evant
12 Jul 2010, 7:43 PM
To begin with, your handlers are making a redundant function call:



function myFunc(x, y){
}


// Redundant
handler: function(x, y){
myFunc(x, y);
}

// Better
handler: myFunc


So, using defaults:




Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
statusBarStyle: 'black-translucent',

onReady: function(){
function loadData(b, e){
console.log(b, e);
}

var sb = new Ext.SplitButton({
width: 400,
height: 200,
defaults: {
handler: loadData
},
items: [{
xtype: 'button',
id: 'wednesday',
text: 'Wednesday'
}, {
xtype: 'button',
id: 'thursday',
text: 'Thursday'
}, {
xtype: 'button',
id: 'friday',
text: 'Friday'
}, {
xtype: 'button',
id: 'saturday',
text: 'Saturday'
}]
});
sb.show();
}
});

danvega
12 Jul 2010, 7:51 PM
That makes total sense! The only other question is that by default there are no buttons selected. Do I have to activate one manually and then make a manual call to this handler function?

sb.setActive(0);
loadData('wednesday');

By the way..hope your not sick of me Evan.. I appreciate the help ;)

evant
12 Jul 2010, 8:08 PM
Specify "active" on the button.