JavaScript DHTML/Ext JS/Button Bar
Set margin for button bar item
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var handleNav = function(btn) {
var activeItem = myWin.layout.activeItem; var index = myWin.items.indexOf(activeItem); var numItems = myWin.items.getCount() - 1; var indicatorEl = Ext.getCmp("indicator").el; if (btn.text == "Forward" && index < numItems) { myWin.layout.setActiveItem(index + 1); } else if (btn.text == "Back" && index > 0) { myWin.layout.setActiveItem(index - 1); } indicatorEl.update((index + 1) + " of " + (numItems + 1));
}
var myWin = new Ext.Window({
height : 200, width : 300, autoScroll : true, id : "myWin", title : "A Window with a Card layout", layout : "card", activeItem : 0, items : [ { title : "1", html : "1" }, { title : "2", html : "2" }, { title : "3", html : "3" } ], bbar : [ { text : "Back", handler : handleNav }, "-", { text : "Forward", handler : handleNav }, "->", { xtype : "box", id : "indicator", style : "margin-right: 5px", autoEl : { tag : "div", html : "1 of 3" } } ]
}); myWin.show();
}); </script>
asdf
</body> </html>
</source>