Results 1 to 6 of 6

Thread: Multiple rows Ex.Toolbar

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    15

    Default Multiple rows Ex.Toolbar

    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:
    PHP 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!

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Try adding this to your overrides file for a multi row toolbar with a fixed column count, a "toolbox":

    Code:
    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:

    Code:
    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.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    15

    Default

    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.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You'll have to code your own overrides to do it.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    15

    Default

    Stuff i've made to solve this issue. It can be tweaked a lot

    Ext.MultiRowToolbar
    Code:
    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):
    Code:
    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):
    HTML Code:
    <div id="body">
    	<div id="toolbar-multi-row">
    		<div id="toolbar-row-a"></div>
    		<div id="toolbar-row-b"></div>
    	</div>
    </div>

  6. #6

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •