|
|
Ext.toolbar Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
Fill
|
A non-rendering placeholder item which instructs the Toolbar's Layout to begin using
the right-justified button container. Example Ext.create('Ext.panel.Panel', {
title: 'Toolbar Fill Example',
width: 300,
height: 200,
tbar : [
'Item 1',
{xtype: 'tbfill'}, // or '->'
'Item 2'
],
renderTo: Ext.getBody()
});
|
|
|
FillConfig
|
|
|
|
FillEvents
|
|
|
|
Item
|
The base class that other non-interacting Toolbar Item classes should extend in order to
get some basic common toolbar item functionality.
|
|
|
ItemConfig
|
|
|
|
ItemEvents
|
|
|
|
Paging
|
As the amount of records increases, the time required for the browser to render
them increases. Paging is used to reduce the amount of data exchanged with the client.
Note: if there are more records/rows than can be viewed in the available screen area, vertical
scrollbars will be added. Paging is typically handled on the server side (see exception below). The client sends
parameters to the server side, which the server needs to interpret and then respond with the
appropriate data. Ext.toolbar.Paging is a specialized toolbar that is bound to a Ext.data.Store
and provides automatic paging control. This Component loads blocks
of data into the store by passing paramNames used for
paging criteria. PagingToolbar is typically used as one of the Grid's toolbars: var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
id:'simpsonsStore',
autoLoad: false,
fields:['name', 'email', 'phone'],
pageSize: itemsPerPage, // items per page
proxy: {
type: 'ajax',
url: 'pagingstore.js', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
totalProperty: 'total'
}
}
});
// specify segment of data you want to load using params
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'phone'}
],
width: 400,
height: 125,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
To use paging, pass the paging requirements to the server when the store is first loaded. store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: myPageSize,
// other params
foo: 'bar'
}
});
If using store's autoLoad configuration: var myStore = new Ext.data.Store({
autoLoad: {start: 0, limit: 25},
...
});
The packet sent back from the server would have this form: {
"success": true,
"results": 2000,
"rows": [ // *Note: this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
...
{ "id": 25, "name": "Sue", "occupation": "Botanist" }
]
}
Paging with Local Data Paging can also be accomplished with local data using extensions: Ext.ux.data.PagingStore Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
|
|
|
PagingConfig
|
|
|
|
PagingEvents
|
|
|
|
Separator
|
A simple class that adds a vertical separator bar between toolbar items
(css class:'x-toolbar-separator'). Example Ext.create('Ext.panel.Panel', {
title: 'Toolbar Seperator Example',
width: 300,
height: 200,
tbar : [
'Item 1',
{xtype: 'tbseparator'}, // or '-'
'Item 2'
],
renderTo: Ext.getBody()
});
|
|
|
SeparatorConfig
|
|
|
|
SeparatorEvents
|
|
|
|
Spacer
|
A simple element that adds extra horizontal space between items in a toolbar.
By default a 2px wide space is added via css specification: .x-toolbar .x-toolbar-spacer {
width:2px;
}
Example Ext.create('Ext.panel.Panel', {
title: 'Toolbar Spacer Example',
width: 300,
height: 200,
tbar : [
'Item 1',
{xtype: 'tbspacer'}, // or ' '
'Item 2',
// space width is also configurable via javascript
{xtype: 'tbspacer', width: 50}, // add a 50px space
'Item 3'
],
renderTo: Ext.getBody()
});
|
|
|
SpacerConfig
|
|
|
|
SpacerEvents
|
|
|
|
TextItem
|
A simple class that renders text directly into a toolbar. Example usage Ext.create('Ext.panel.Panel', {
title: 'Panel with TextItem',
width: 300,
height: 200,
tbar: [
{xtype: 'tbtext', text: 'Sample TextItem'}
],
renderTo: Ext.getBody()
});
|
|
|
TextItemConfig
|
|
|
|
TextItemEvents
|
|
|
|
Toolbar
|
Basic Toolbar class. Although the defaultType for Toolbar is button, Toolbar
elements (child items for the Toolbar container) may be virtually any type of Component. Toolbar elements can be created explicitly via their
constructors, or implicitly via their xtypes, and can be added dynamically. Some items have shortcut strings for creation: Shortcut xtype Class Description -> tbspacer Ext.toolbar.Fill begin using the right-justified button container | - tbseparator Ext.toolbar.Separator add a vertical separator bar between toolbar items | tbspacer Ext.toolbar.Spacer add horiztonal space between elements |
Example usage: Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 500,
items: [
{
// xtype: 'button', // default for Toolbars
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
// begin using the right-justified button container
'->', // same as {xtype: 'tbfill'}, // Ext.toolbar.Fill
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{xtype: 'tbspacer'},// same as ' ' to create Ext.toolbar.Spacer
'text 2',
{xtype: 'tbspacer', width: 50}, // add a 50px space
'text 3'
]
});
Toolbars have enable and disable methods which when called, will enable/disable all items within your toolbar.
Example usage: Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
items: [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});
Example usage: var enableBtn = Ext.create('Ext.button.Button', {
text : 'Enable All Items',
disabled: true,
scope : this,
handler : function() {
//disable the enable button and enable the disable button
enableBtn.disable();
disableBtn.enable();
//enable the toolbar
toolbar.enable();
}
});
var disableBtn = Ext.create('Ext.button.Button', {
text : 'Disable All Items',
scope : this,
handler : function() {
//enable the enable button and disable button
disableBtn.disable();
enableBtn.enable();
//disable the toolbar
toolbar.disable();
}
});
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
margin : '5 0 0 0',
items : [enableBtn, disableBtn]
});
Adding items to and removing items from a toolbar is as simple as calling the add and remove methods. There is also a removeAll method
which remove all items within the toolbar.
Example usage: var toolbar = Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 700,
items: [
{
text: 'Example Button'
}
]
});
var addedItems = [];
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 700,
margin : '5 0 0 0',
items : [
{
text : 'Add a button',
scope : this,
handler: function() {
var text = prompt('Please enter the text for your button:');
addedItems.push(toolbar.add({
text: text
}));
}
},
{
text : 'Add a text item',
scope : this,
handler: function() {
var text = prompt('Please enter the text for your item:');
addedItems.push(toolbar.add(text));
}
},
{
text : 'Add a toolbar seperator',
scope : this,
handler: function() {
addedItems.push(toolbar.add('-'));
}
},
{
text : 'Add a toolbar spacer',
scope : this,
handler: function() {
addedItems.push(toolbar.add('->'));
}
},
'->',
{
text : 'Remove last inserted item',
scope : this,
handler: function() {
if (addedItems.length) {
toolbar.remove(addedItems.pop());
} else if (toolbar.items.length) {
toolbar.remove(toolbar.items.last());
} else {
alert('No items in the toolbar');
}
}
},
{
text : 'Remove all items',
scope : this,
handler: function() {
toolbar.removeAll();
}
}
]
});
|
|
|
ToolbarConfig
|
|
|
|
ToolbarEvents
|
|
|
SharpKit.AspNetAjax
Ext