-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-\r
+/*!
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
Ext.onReady(function(){\r
- \r
+\r
// This is a shared function that simulates a load action on a StatusBar.\r
// It is reused by most of the example panels.\r
var loadFn = function(btn, statusBar){\r
btn = Ext.getCmp(btn);\r
statusBar = Ext.getCmp(statusBar);\r
- \r
+\r
btn.disable();\r
statusBar.showBusy();\r
- \r
+\r
(function(){\r
statusBar.clearStatus({useDefaults:true});\r
btn.enable();\r
}).defer(2000);\r
};\r
- \r
+\r
/*\r
* ================ Basic StatusBar example =======================\r
*/\r
new Ext.Panel({\r
title: 'Basic StatusBar',\r
renderTo: 'basic',\r
- width: 350,\r
+ width: 550,\r
height: 100,\r
bodyStyle: 'padding:10px;',\r
items:[{\r
text: 'Do Loading',\r
handler: loadFn.createCallback('basic-button', 'basic-statusbar')\r
}],\r
- bbar: new Ext.StatusBar({\r
- defaultText: 'Default status',\r
+ bbar: new Ext.ux.StatusBar({\r
id: 'basic-statusbar',\r
- items: [{\r
- text: 'A Button'\r
- }, '-', 'Plain Text', ' ', ' ']\r
+\r
+ // defaults to use when the status is cleared:\r
+ defaultText: 'Default status text',\r
+ //defaultIconCls: 'default-icon',\r
+ \r
+ // values to set initially:\r
+ text: 'Ready',\r
+ iconCls: 'x-status-valid',\r
+\r
+ // any standard Toolbar items:\r
+ items: [\r
+ {\r
+ text: 'Show Warning & Clear',\r
+ handler: function (){\r
+ var sb = Ext.getCmp('basic-statusbar');\r
+ sb.setStatus({\r
+ text: 'Oops!',\r
+ iconCls: 'x-status-error',\r
+ clear: true // auto-clear after a set interval\r
+ });\r
+ }\r
+ },\r
+ {\r
+ text: 'Show Busy',\r
+ handler: function (){\r
+ var sb = Ext.getCmp('basic-statusbar');\r
+ // Set the status bar to show that something is processing:\r
+ sb.showBusy();\r
+ }\r
+ },\r
+ {\r
+ text: 'Clear status',\r
+ handler: function (){\r
+ var sb = Ext.getCmp('basic-statusbar');\r
+ // once completed\r
+ sb.clearStatus(); \r
+ }\r
+ },\r
+ '-',\r
+ 'Plain Text'\r
+ ]\r
})\r
});\r
- \r
+\r
/*\r
* ================ Right-aligned StatusBar example =======================\r
*/\r
new Ext.Panel({\r
title: 'Right-aligned StatusBar',\r
renderTo: 'right-aligned',\r
- width: 350,\r
+ width: 550,\r
height: 100,\r
bodyStyle: 'padding:10px;',\r
items:[{\r
text: 'Do Loading',\r
handler: loadFn.createCallback('right-button', 'right-statusbar')\r
}],\r
- bbar: new Ext.StatusBar({\r
+ bbar: new Ext.ux.StatusBar({\r
defaultText: 'Default status',\r
id: 'right-statusbar',\r
statusAlign: 'right', // the magic config\r
}, '-', 'Plain Text', ' ', ' ']\r
})\r
});\r
- \r
+\r
/*\r
* ================ StatusBar Window example =======================\r
*/\r
text: 'Do Loading',\r
handler: loadFn.createCallback('win-button', 'win-statusbar')\r
}],\r
- bbar: new Ext.StatusBar({\r
+ bbar: new Ext.ux.StatusBar({\r
id: 'win-statusbar',\r
defaultText: 'Ready',\r
items: [{\r
}]\r
})\r
});\r
- \r
+\r
new Ext.Button({\r
text: 'Show Window',\r
renderTo: 'window',\r
win.show();\r
}\r
});\r
- \r
+\r
/*\r
* ================ Ext Word Processor example =======================\r
- * \r
- * The StatusBar used in this example is completely standard. What is \r
+ *\r
+ * The StatusBar used in this example is completely standard. What is\r
* customized are the styles and event handling to make the example a\r
* lot more dynamic and application-oriented.\r
- * \r
+ *\r
*/\r
// Create these explicitly so we can manipulate them later\r
var wordCount = new Ext.Toolbar.TextItem('Words: 0');\r
var charCount = new Ext.Toolbar.TextItem('Chars: 0');\r
var clock = new Ext.Toolbar.TextItem('');\r
- \r
+\r
new Ext.Panel({\r
title: 'Ext Word Processor',\r
renderTo: 'word-proc',\r
autoHeight: true,\r
bodyStyle: 'padding:5px;',\r
layout: 'fit',\r
- bbar: new Ext.StatusBar({\r
+ bbar: new Ext.ux.StatusBar({\r
id: 'word-status',\r
// These are just the standard toolbar TextItems we created above. They get\r
// custom classes below in the render handler which is what gives them their\r
fn: function(t){\r
var v = t.getValue(),\r
wc = 0, cc = v.length ? v.length : 0;\r
- \r
+\r
if(cc > 0){\r
wc = v.match(/\b/g);\r
wc = wc ? wc.length / 2 : 0;\r
}\r
},\r
listeners: {\r
- 'render': {\r
+ render: {\r
fn: function(){\r
- // Add a class to the parent TD of each text item so we can give them some custom inset box \r
+ // Add a class to the parent TD of each text item so we can give them some custom inset box\r
// styling. Also, since we are using a greedy spacer, we have to add a block level element\r
// into each text TD in order to give them a fixed width (TextItems are spans). Insert a\r
// spacer div into each TD using createChild() so that we can give it a width in CSS.\r
- Ext.fly(wordCount.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
- Ext.fly(charCount.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
- Ext.fly(clock.getEl().parentNode).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
- \r
+ Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
+ Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
+ Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
+\r
// Kick off the clock timer that updates the clock el every second:\r
Ext.TaskMgr.start({\r
run: function(){\r
},\r
interval: 1000\r
});\r
- }\r
+ },\r
+ delay: 100\r
}\r
}\r
});\r
- \r
+\r
// This sets up a fake auto-save function. It monitors keyboard activity and after no typing\r
// has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.\r
// After a fake delay so that you can see the save activity it will update again to indicate\r
});\r
}).defer(4000);\r
}, this, {buffer:1500});\r
- \r
+\r
});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff