|
|
Ext.button Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
Button
|
Create simple buttons with this component. Customisations include aligned icons, dropdown menus, tooltips
and sizing options. Specify a handler to run code when
a user clicks the button, or use listeners for other events such as
mouseover.
Example usage: Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!')
}
});
The handler configuration can also be updated dynamically using the setHandler method.
Example usage: Ext.create('Ext.Button', {
text : 'Dyanmic Handler Button',
renderTo: Ext.getBody(),
handler : function() {
//this button will spit out a different number every time you click it.
//so firstly we must check if that number is already set:
if (this.clickCount) {
//looks like the property is already set, so lets just add 1 to that number and alert the user
this.clickCount++;
alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
} else {
//if the clickCount property is not set, we will set it and alert the user
this.clickCount = 1;
alert('You just clicked the button for the first time!\n\nTry pressing it again..');
}
}
});
A button within a container: Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items : [
{
xtype: 'button',
text : 'My Button'
}
]
});
A useful option of Button is the scale configuration. This configuration has three different options:
'small' 'medium' 'large'
Example usage: Ext.create('Ext.Button', {
renderTo: document.body,
text : 'Click me',
scale : 'large'
});
Buttons can also be toggled. To enable this, you simple set the enableToggle property to true.
Example usage: Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
text: 'Click Me',
enableToggle: true
});
You can assign a menu to a button by using the menu configuration. This standard configuration can either be a reference to a menu
object, a menu id or a menu config blob. When assigning a menu to a button, an arrow is automatically added to the button.
You can change the alignment of the arrow using the arrowAlign configuration on button.
Example usage: Ext.create('Ext.Button', {
text : 'Menu button',
renderTo : Ext.getBody(),
arrowAlign: 'bottom',
menu : [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'}
]
});
Using listeners, you can easily listen to events fired by any component, using the listeners configuration or using the addListener method.
Button has a variety of different listeners:
click toggle mouseover mouseout mouseshow menuhide menutriggerover menutriggerout Example usage: Ext.create('Ext.Button', {
text : 'Button',
renderTo : Ext.getBody(),
listeners: {
click: function() {
//this == the button, as we are in the local scope
this.setText('I was clicked!');
},
mouseover: function() {
//set a new config which says we moused over, if not already set
if (!this.mousedOver) {
this.mousedOver = true;
alert('You moused over a button!\n\nI wont do this again.');
}
}
}
});
|
|
|
ButtonConfig
|
|
|
|
ButtonEvents
|
|
|
|
Cycle
|
A specialized SplitButton that contains a menu of Ext.menu.CheckItem elements. The button automatically
cycles through each menu item on click, raising the button's change event (or calling the button's
changeHandler function, if supplied) for the active menu item. Clicking on the arrow section of the
button displays the dropdown menu just like a normal SplitButton.
Example usage: Ext.create('Ext.button.Cycle', {
showText: true,
prependText: 'View as ',
renderTo: Ext.getBody(),
menu: {
id: 'view-type-menu',
items: [{
text:'text only',
iconCls:'view-text',
checked:true
},{
text:'HTML',
iconCls:'view-html'
}]
},
changeHandler:function(cycleBtn, activeItem){
Ext.Msg.alert('Change View', activeItem.text);
}
});
|
|
|
CycleConfig
|
|
|
|
CycleEvents
|
|
|
|
Split
|
A split button that provides a built-in dropdown arrow that can fire an event separately from the default
click event of the button. Typically this would be used to display a dropdown menu that provides additional
options to the primary button action, but any custom handler can provide the arrowclick implementation.
Example usage: // display a dropdown menu:
Ext.create('Ext.button.Split', {
renderTo: 'button-ct', // the container id
text: 'Options',
handler: optionsHandler, // handle a click on the button itself
menu: new Ext.menu.Menu({
items: [
// these items will render as dropdown menu items when the arrow is clicked:
{text: 'Item 1', handler: item1Handler},
{text: 'Item 2', handler: item2Handler}
]
})
});
// Instead of showing a menu, you provide any type of custom
// functionality you want when the dropdown arrow is clicked:
Ext.create('Ext.button.Split', {
renderTo: 'button-ct',
text: 'Options',
handler: optionsHandler,
arrowHandler: myCustomHandler
});
|
|
|
SplitConfig
|
|
|
|
SplitEvents
|
|
|
SharpKit.AspNetAjax
Ext