PDA

View Full Version : Multiple rows Ex.Toolbar



doU
17 Apr 2007, 11:33 PM
Hello,

i've been just wondering how to make two rows Ext.Toolbar. Is it possible?

I'm trying make this by nesting layouts, but something goes wrong: there is only one toolbar visible, but in DOM both are valid.

Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script language="Javascript" type="text/javascript" src="ext/adapter/yui/yui-utilities.js"></script>
<script language="Javascript" type="text/javascript" src="ext/adapter/yui/ext-yui-adapter.js"></script>
<script language="Javascript" type="text/javascript" src="ext/ext-all.js"></script>
<script language="Javascript" type="text/javascript">
Application = function() {
// Private
var toolbarRowA;
var toolbarRowB;
var layoutInner;

// Public
return {
layout: null,

run: function() {
// Prepare
Ext.QuickTips.init();

// Layout
this.layout = new Ext.BorderLayout(document.body, {
center: {
autoScroll: false,
titlebar: false
}
});

this.layout.beginUpdate();

toolbarRowB = new Ext.Toolbar('toolbar-row-b');
toolbarRowB.add(
new Ext.Toolbar.TextItem('Search: '),
new Ext.form.TextField({
name: 'filter'
})
);

layoutInner = new Ext.BorderLayout('container', {
center: {
autoScroll: false,
titlebar: false
}
});
layoutInner.add('center', new Ext.ContentPanel('body', {toolbar: toolbarRowB}));


toolbarRowA = new Ext.Toolbar('toolbar-row-a');
toolbarRowA.add(
new Ext.Toolbar.TextItem('Search: '),
new Ext.form.TextField({
name: 'filter'
})
);

this.layout.add('center', new Ext.NestedLayoutPanel(layoutInner, {toolbar: toolbarRowA}));
this.layout.endUpdate();
}

};
}();

Ext.onReady(Application.run, Application, true);
</script>
</head>

<body>
<div id="toolbar-row-a"></div>
<div id="container">
<div id="body">
<div id="toolbar-row-b"></div>
</div>
</div>
</body>
</html>


Thanks for help!

Animal
17 Apr 2007, 11:50 PM
Try adding this to your overrides file for a multi row toolbar with a fixed column count, a "toolbox":



Ext.override(Ext.Toolbar, {
nextBlock : function(){
var td = document.createElement("td");

// If we've filled the row, add a new one.
if (this.columns && (this.tr.cells.length == this.columns)) {
this.tr = document.createElement("tr");
var tbody = this.el.child("tbody", true);
tbody.appendChild(this.tr);
}
this.tr.appendChild(td);
return td;
},
insertButton: (function(){
if (this.columns) {
throw "This method won't work with multiple rows";
} // actually, it could be made to work with some DOM hacking!
}).createSequence(Ext.Toolbar.prototype.insertButton)
});


Then instantiate it like this when you want a multi row toolbar that wraps to a new line:



var tb = new Ext.Toolbar(this.el, null, {columns: 3});


As ever, caveat emptor, YMMV etc. I haven't tested this code, you'll have to take it and run with it.

doU
18 Apr 2007, 1:10 AM
It works, but not as needed: it creates a column toolbar, not a toolbar with mutiple rows (where colums are inequal legth). The solution would be appropriate if each toolbar row would be renderer as separate table and visualy be identical to toolbar itself.

Animal
18 Apr 2007, 1:18 AM
You'll have to code your own overrides to do it.

doU
18 Apr 2007, 4:39 AM
Stuff i've made to solve this issue. It can be tweaked a lot :)

Ext.MultiRowToolbar


Ext.MultiRowToolbar = function(element, config) {
this.el = Ext.get(element);
this.items = new Ext.util.MixedCollection(false, function(o) {
return o.getEl().id;
});
this.addBatch(config);
}

Ext.MultiRowToolbar.prototype = {
add: function(toolbar) {
this.items.add(toolbar);
this.el.appendChild(toolbar.getEl());
},

addBatch: function(config) {
for (id in config) {
var toolbar = new Ext.Toolbar(new Ext.Element(id, true));
toolbar.add(config[id]);
this.add(toolbar);
}
},

get: function(id) {
return this.items.get(id);
},

getEl: function() {
return this.el;
}
};

Code (JS):


this.layout.beginUpdate();
toolbarMultiRow = new Ext.MultiRowToolbar('toolbar-multi-row', {
'toolbar-row-a': [
new Ext.Toolbar.Button({
text: 'Button A'
}),
new Ext.Toolbar.Button({
text: 'Button B'
}),
new Ext.Toolbar.Button({
text: 'Button C'
})
],
'toolbar-row-b': [
new Ext.Toolbar.TextItem('Criteria: '),
new Ext.form.TextField({
name: 'search'
}),
new Ext.Toolbar.TextItem(' '),
new Ext.Toolbar.Button({
text: 'Search'
})
]
});

this.layout.add('center', new Ext.ContentPanel('body', {toolbar: toolbarMultiRow}));
this.layout.endUpdate();

Code (xHTML):


<div id="body">
<div id="toolbar-multi-row">
<div id="toolbar-row-a"></div>
<div id="toolbar-row-b"></div>
</div>
</div>

JetMah
20 Mar 2010, 4:04 AM
maybe it will help you https://www.extjs.com/forum/showthread.php?t=94762