PDA

View Full Version : Ext.ux.TbItemStateReminder (keeps enabled/disabled state of Toolbar items)



makana
9 Jun 2010, 5:56 AM
You know that? You have a Toolbar with several buttons and other items in it. Some of them are disabled since you don't want the user to use them yet. Now you want to disable the whole toolbar using toolbar.disable() because no toolbar operation should be done due to a store load for example. After your data is loaded, you enable the toolbar and now what... All buttons and items are enabled although you only want those enabled that were enabled before.

This little plugins is the key. It remembers the enabled/disabled state of the according toolbar items during enable/disabled operations on the toolbar. You can even enable or disable items when the whole toolbar is disabled. It takes effect when the toolbar gets enabled again.

Copy this code into examples/<anywhere>/TbItemStateReminder.html to try it out.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext.ux.TbItemStateReminder</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script language="JavaScript" type="text/javascript">
Ext.ns('Ext.ux');
/**
* @class Ext.ux.TbItemStateReminder
* @extends Object
* A plugin to use with any Ext.Toolbar or subclasses. This ensures that every
* containing ToolbarItem keeps its enabled/disabled state if the whole Toolbar
* gets enabled or disabled. This is useful, if you disable a Toolbar during a
* loading operation etc. and enable it afterwards. By default, all items get
* enabled. With this plugin all items keep its state.
* @constructor
* Creates a new plugin instance
*/
Ext.ux.TbItemStateReminder = Ext.extend(Object, {
/**
* ToolbarItems with its pair itemId/id (String) - enabled/disabled state (boolean)
* @private
*/
items: {},
/**
* The Toolbar's enabled/disabled state
* @private
*/
disabled: false,
/**
* Initializes the plugin
* @param {Object} tb The Toolbar this plugin is used with
* @private
*/
init: function(tb) {
// override onEnable and onDisabled of the Toolbar
tb.onEnable = this.onEnable.createDelegate(this, [tb]);
tb.onDisable = this.onDisable.createDelegate(this, [tb]);
this.disabled = !!tb.disabled;
tb.on({
'add': this.onAdd, // provide the funtionality on any added item
'remove': this.onRemove, // delete removed items from list
scope: this
});
if (tb.items) {
tb.items.each(function(item) {
this.onAdd(tb, item);
}, this);
}
},
/**
* Register added ToolbarItems with this plugin
* @param {Object} tb The Toolbar
* @param {Object} item The added Item
* @private
*/
onAdd: function(tb, item) {
this.items[item.getItemId()] = !item.disabled; // register current state
// change state if item gets enabled/disabled
item.on({
'enable': this.onItemEnable,
'disable': this.onItemDisable,
scope: this
});
},
/**
* Delete removed ToolbarItems from list
* @param {Object} tb The Toolbar
* @param {Object} item The removed Item
* @private
*/
onRemove: function(tb, item) {
delete this.items[item.getItemId()];
},
/**
* Override for the Toolbar's onEnable method
* @param {Object} tb The Toolbar
* @private
*/
onEnable: function(tb) {
this.disabled = false;
tb.items.each(function(item) {
// only enable items that had enabled state
if (item.enable && this.items[item.getItemId()] !== false) {
item.enable();
}
}, this);
},
/**
* Override for the Toolbar's onDisable method
* @param {Object} tb The Toolbar
* @private
*/
onDisable: function(tb) {
this.disabled = true;
tb.items.each(function(item) {
if (item.disable) item.disable(true); // silent
}, this);
},
/**
* Sets an Item's state to enabled in the list
* @param {Object} item The ToolbarItem
* @private
*/
onItemEnable: function(item) {
this.items[item.getItemId()] = true;
if (this.disabled) item.disable(true);
},
/**
* Sets an Item's state to disabled in the list
* @param {Object} item The ToolbarItem
* @private
*/
onItemDisable: function(item) {
this.items[item.getItemId()] = false;
}
});
</script>
</head>
<body>
<h1>Using Ext.ux.TbItemStateReminder</h1>
<script language="JavaScript" type="text/javascript">
Ext.onReady(function(){
var tbItems = [], panelItems = []
for (var i = 1; i <= 10; i++) {
tbItems.push(new Ext.Button({
text: 'Button ' + i,
id: 'tbButton' + i
}));
panelItems.push(new Ext.Button({
text: 'Toggle Enabled/Disabled Button ' + i,
enableToggle: true,
itemId: 'tbButton' + i,
toggleHandler: function(b, s) {
panel.getTopToolbar().get(b.getItemId()).setDisabled(s);
}
}));
}
panelItems.push(new Ext.Button({
text: 'Toggle Enabled/Disabled Toolbar',
enableToggle: true,
margins: '20 5 5 5',
toggleHandler: function(b, s) {
panel.getTopToolbar().setDisabled(s);
}
}));

var panel = new Ext.Panel({
title: 'Panel',
width:600,
height:450,
tbar: new Ext.Toolbar({
items: tbItems,
plugins: [
new Ext.ux.TbItemStateReminder()
]
}),
items: panelItems,
renderTo: Ext.getBody(),
layout: 'vbox',
layoutConfig: {
align: 'stretchmax',
defaultMargins: '5'
}
});
});
</script>
</body>
</html>


Any hints and suggestions are welcome!