1. #1
    Ext User steve.neill's Avatar
    Join Date
    Mar 2007
    Posts
    99
    Vote Rating
    0
    steve.neill is on a distinguished road

      0  

    Default How can I get 2 toolbars stacked above a Grid?

    How can I get 2 toolbars stacked above a Grid?


    I have the need for 2 toolbars (one above the other) which will be above a grid within a content layout. Any ideas how this should be done. Are there methods that will need to be over-ridden in YAHOO.ext?

    Thanks,

    Steve

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    The Toolbar object is decoupled from the grid, so you can add them wherever you want. Basically you just have create a new instance, telling it what the parent container is. Look at PagedGridView.appendFooter() which builds the toolbar for a GridView. You can do the same type of thing.

    This approach assumes your toolbar doesn't need to know about the grid - it's generic. If on the other hand, the toolbar needs to be coupled to the grid, you need to do a little more. I'm actually working on somthing called ToolbarGridView, which is an extension of GridView that does the toolbar ala PagedGridView, but without the paging functionality. If this is more what you want, I can post this code.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    NL
    Posts
    608
    Vote Rating
    1
    mdissel is on a distinguished road

      0  

    Default


    Sample code is always welcome ! :lol:

    Thanks for sharing!!

    Marco

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Here's an example of adding multiple toolbars to a panel and also adding a toolbar to a gridview without paging.

    Except for changing the grid.render() method to use the view factory, the rest is external to the base code. The factory was added so that additional views could be created w/out having to go back and mod the render method every time.

    Note that b/c of the way the toolbar is currently rendered into it's parent (e.g. no ID; no ref to itself internally), you don't have a lot of flexibility regarding styling individual toolbars, without some more work. You can't for example just say tb.addStyle('border': 'solid 1px red') b/c it will get applied to the parent container
    Code:
    	<script type="text/javascript" src="/yui/build/utilities/utilities.js"></script>
     	<script type="text/javascript" src="/yui-ext/yui-ext.js"></script>
    	<link rel="stylesheet" type="text/css" href="/yui/build/fonts/fonts-min.css">
    	<link rel="stylesheet" type="text/css" href="/yui-ext/resources/css/yui-ext.css"/>
    
    <style type="text/css">
    #container {overflow:hidden;height:500px; width:400px;}
    #demoNorth {padding:10px}
    #demoNorth p {font:normal 8pt verdana; margin-bottom:5px;}
    
    #demoGrid {width:300px; height:200px;}
    .ytoolbar .ytb-text-only{
    	background:none;
    	padding-left:0px;
    	padding-top:1px;
    	width:auto;
    	display:block;
    }
    </style>
    
    <script type="text/javascript">
    var test = function() {
    	// private members
    	var data = {'States':[
    		{'__type':'State', 'Name':'Alaska', 'Code':'AK','IsContentViewable':true},
    		{'__type':'State', 'Name':'Arkansas', 'Code':'AR','IsContentViewable':true},
    		{'__type':'State', 'Name':'California', 'Code':'CA','IsContentViewable':false},
    		{'__type':'State', 'Name':'Colorado', 'Code':'CO','IsContentViewable':true},
    		{'__type':'State', 'Name':'Connecticut', 'Code':'CT','IsContentViewable':true},
    		{'__type':'State', 'Name':'Delaware', 'Code':'DE','IsContentViewable':false},
    		{'__type':'State', 'Name':'Maine', 'Code':'ME','IsContentViewable':false},
    		{'__type':'State', 'Name':'Missouri', 'Code':'MO','IsContentViewable':false},
    		{'__type':'State', 'Name':'Minnesota', 'Code':'MN','IsContentViewable':false},
    		{'__type':'State', 'Name':'Montana', 'Code':'MT','IsContentViewable':false},
    		{'__type':'State', 'Name':'Mississippi', 'Code':'MS','IsContentViewable':false},
    		{'__type':'State', 'Name':'Washington', 'Code':'WA','IsContentViewable':false}
    		]};
    
    	var  grid;
    
    	// private methods
    
    	var onLoad = function() {this.getSelectionModel().selectFirstRow()}; // do nothing
    	var	showError = function(model, error, response) {
    		alert(error);
    	};
    
    	var buildGrid = function() {
    		var dm, cm, sm, toolbar, rowIndex=0;
    
    		cm = new YAHOO.ext.grid.DefaultColumnModel(
    			[{header:'Index', width:50},
    			 {header:'type', hidden:true},
    			 {header:'Name', width: 90},
    			 {header:'Code', width: 50, editor:new YAHOO.ext.grid.TextEditor()},
    			 {header:'View Content', width:95, editor:new YAHOO.ext.grid.CheckboxEditor()}
    			]);
    
    		cm.defaultSortable = true;
    
    		// data schema.
    		// rowIndex is a dummy column that will hold an auto-generated row number
    		// __type will be hidden by the cm
    		var schema = {
    			root:'States',
    			id:'use-index',
    			totalProperty:'States.length',
    			fields: ['rowIndex', '__type', 'Name', 'Code', 'IsContentViewable']
    		};
    
    		sm = new YAHOO.ext.grid.SingleSelectionModel();
    		dm = new YAHOO.ext.grid.JSONDataModel(schema);
    
    		grid = new YAHOO.ext.grid.Grid('demoGrid',
    			{viewType:'ToolBarGridView', dataModel:dm, colModel:cm, selModel:sm});
    		grid.render();
    
    		dm.onLoadException.subscribe(showError.createDelegate(this));	// handle data load error event
    
    		dm.addPreprocessor(0, function() {return ++rowIndex;});			// incr the rowIndex as each row is added
    		dm.on('beforeload', function() {rowIndex = 0;});  				// init the rowIndex before load
    
    		dm.loadData(data);
    		dm.sort(cm, 2, 'DESC');											// sort on column 2 Descending
    		sm.selectFirstRow();
    
    	};
    	addRow = function() {alert('add');};
    	deleteRow = function() {alert('delete');},
    	saveRows = function() {alert('save');}
    
    	// public methods
    	return {
    		init: function() {
    			var lo = new YAHOO.ext.BorderLayout('container', {
    				hideOnLayout:false,
    				north:	{split:true, titlebar:true, autoScroll:true, initialSize:200, minSize:50, maxSize:500, collapsible:true},
    				center:	{split:false, titlebar:true, autoScroll:false, initialSize:250, minSize:50}
    			});
    
    			buildGrid();
    			lo.beginUpdate();
    			var panel = new YAHOO.ext.ContentPanel('demoNorth',	{title:'Example: BorderLayout with Grid'});
    			lo.add('north', panel);
    			lo.add('center', new YAHOO.ext.GridPanel(grid, {title:'States', fitToFrame:false}));
    
    			var tb1 = new YAHOO.ext.Toolbar(panel.getEl().dom);
    			tb1.el.addClass("ygrid-mso");
    
    			tb1.addButton({tooltip:'Loading...', className:'ygrid-loading', disabled:true});
    			tb1.addSeparator();
    			tb1.addButton({text:'One', className:'ytb-text-only'});
    			tb1.addSeparator();
    			tb1.addButton({text:'Two', className:'ytb-text-only'});
    
    			var tb2 = new YAHOO.ext.Toolbar(panel.getEl().dom);
    			tb2.addButton({tooltip:'Loading...', className:'ygrid-loading',	disabled:true});
    			tb2.addSeparator();
    			tb2.addButton({text:'Ten', className:'ytb-text-only'});
    			tb2.addSeparator();
    			tb2.addButton({text:'Eleven', className:'ytb-text-only'});
    			tb2.addSeparator();
    			tb2.addButton({text:'Twelve', className:'ytb-text-only'});
    
    			var tb = grid.getView().getToolbar();
    			tb.addSeparator();
    			tb.addButton({
    				text: 'Add',
    				tooltip: 'Add a new row',
    				click: addRow,
    				scope: test,
    				className: 'ytb-text-only'
    			});
    			tb.addSeparator();
    			tb.addButton({
    				text: 'Delete',
    				tooltip: 'Delete the selected row',
    				click: deleteRow,
    				scope: test,
    				className: 'ytb-text-only',
    			}).disable();
    			tb.addSeparator();
    			tb.addButton({
    				text: 'Save',
    				tooltip: 'Save changes',
    				click: saveRows,
    				scope: test,
    				className: 'ytb-text-only',
    			}).disable();
    
    			lo.endUpdate();
    		}
        }
    }();
    
    
    /**
    * Called once after all setup has been completed and the grid is ready to be rendered.
    * @return {YAHOO.ext.grid.Grid} this
    */
    YAHOO.ext.grid.Grid.prototype.render = function() {
    	if((!this.container.dom.offsetHeight || this.container.dom.offsetHeight < 20)
    			|| this.container.getStyle('height') == 'auto'){
    		this.autoHeight = true;
    	}
    	if((!this.container.dom.offsetWidth || this.container.dom.offsetWidth < 20)){
    		this.autoWidth = true;
    	}
    	if(!this.view){
    		if (!this.viewType) {
    			// legacy support
    			if(this.dataModel.isPaged()){
    				this.viewType = 'PagedGridView';
    			}else{
    				this.viewType = 'GridView';
    			}
    		}
    
    		this.view = YAHOO.ext.grid.viewFactory.create(this.viewType);
    	}
    
    	this.view.init(this);
    	this.el = getEl(this.view.render(), true);
    	var c = this.container;
    	c.mon("click", this.onClick, this, true);
    	c.mon("dblclick", this.onDblClick, this, true);
    	c.mon("contextmenu", this.onContextMenu, this, true);
    	c.mon("selectstart", this.cancelTextSelection, this, true);
    	c.mon("mousedown", this.cancelTextSelection, this, true);
    	c.mon("mousedown", this.onMouseDown, this, true);
    	c.mon("mouseup", this.onMouseUp, this, true);
    	if(this.trackMouseOver){
    		this.el.mon("mouseover", this.onMouseOver, this, true);
    		this.el.mon("mouseout", this.onMouseOut, this, true);
    	}
    	c.mon("keypress", this.onKeyPress, this, true);
    	c.mon("keydown", this.onKeyDown, this, true);
    	this.init();
    	return this;
    };
    
    /**
     * @class YAHOO.ext.grid.viewFactory
     * Factory to create a GridView object
     * @constructor
     */
    YAHOO.ext.grid.viewFactory = function() {
    	return {
    	    /**
    	     * Create an instance of a YAHOO.ext.grid.Gridview (or descendant).
    	     * @param {String}	viewType		The typename of the View
    	     * @return {YAHOO.ext.grid.GridView}
    	     */
    		create: function(viewType) {
    			viewType = (viewType && typeof viewType=='string') ? viewType.toLowerCase() : 'undefined';
    
    			switch (viewType) {
    				case 'gridview' : return new YAHOO.ext.grid.GridView();
    				case 'pagedgridview': return new YAHOO.ext.grid.PagedGridView();
    				case 'toolbargridview': return new YAHOO.ext.grid.ToolbarGridView();
    				default :
    					throw new SyntaxError('viewFactory does not support type "' + viewType + '"');
    			}
    		}
    	}
    }();
    
    
    /**
     * @class YAHOO.ext.grid.ToolbarGridView
     * @extends YAHOO.ext.grid.GridView
     * Extends the default GridView to add a toobar.
     * @constructor
     */
    YAHOO.ext.grid.ToolbarGridView = function() {
        YAHOO.ext.grid.ToolbarGridView.superclass.constructor.call(this);
    };
    
    YAHOO.extendX(YAHOO.ext.grid.ToolbarGridView, YAHOO.ext.grid.GridView, {
    	init: function(grid) {
    	    YAHOO.ext.grid.ToolbarGridView.superclass.init.call(this, grid);
    		this.toolbar = null;
    	},
    
    	appendFooter: function(parentEl) {
    		var fwrap = document.createElement('div');
    		fwrap.className = 'ygrid-wrap-footer';
    		var fbody = document.createElement('span');
    		fbody.className = 'ygrid-footer';
    		fwrap.appendChild(fbody);
    		parentEl.appendChild(fwrap);
    		this.createToolbar(fbody);
    		return fwrap;
    	},
    
    	createToolbar: function(container) {
    		this.toolbar = new YAHOO.ext.Toolbar(container);
    		this.loading = this.toolbar.addButton({
    			tooltip: (this.refreshText || 'Loading...'),
    			className: 'ygrid-loading',
    			disabled: true
    		});
    	},
    
    	getToolbar: function() {
    		return this.toolbar;
    	}
    });
    
    YAHOO.ext.EventManager.onDocumentReady(test.init, test, true);
    </script>
    </head>
    <body>
    <div id="container">
    	<div id="demoNorth">
    	
    
    This is an example of a BorderLayout with 2 regions (north,center).</p>
    	
    
    The center region contains a grid loaded via JSONDataModel.</p>
    	
    
    The grid is sortable by clicking column headers and and the 'Code' and 'View Content' columns are editable.</p>
    	
    
    Data changes are not persisted.</p>
    	</div>
    	<div id="demoCenter">
    		<div id="demoGrid"  class="ygrid-mso"></div>
    	</div>
    </div>
    </body>

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    After kicking this around with Jack, this can be simplified greatly

    The factory can be eliminated as well as the changes to grid.render().

    When you create your grid, you can specify the view

    Code:
      grid = new YAHOO.ext.grid.Grid('demoGrid',
             view: new YAHOO.ext.grid.ToolbarGridView(), dataModel:dm,....)

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    11
    Vote Rating
    0
    bascule is on a distinguished road

      0  

    Default using the loading button

    using the loading button


    Hello tryanDLS,

    youve got:

    this.loading = this.toolbar.addButton({
    tooltip: (this.refreshText || 'Loading...'),
    className: 'ygrid-loading',
    disabled: true
    });

    as part of the tool bar creation.. How exactly do you use this? I'd like to be able to animate that
    inidcator when one of the buttons in the toolbar causes the grid to be reloaded with data (specifically, im using toolbar buttons to grid.reset() as the grid may be reloaded with data including different fields and columns, the point being, i dont want to create many different grids, rather reuse the same one with reset)

    Thanks for your sample code, ive been using but it appears at the bottom for me..

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Not following your question. That code adds a button which displays a loading indicator (the default non-rotating gif) to the toolbar and saves it as a property of the toolbarview object. When you want to indicate loading is happening, you change the CSS of the button to the rotating gif class.

    As to reusing grids, I think this has been discussed. My thought is that you're not saving anything b/c you have to have dm,cm,sm for each grid any way and rebuild the grid when they change.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    11
    Vote Rating
    0
    bascule is on a distinguished road

      0  

    Default


    You answered my question (dont know much about css):

    you change the CSS of the button to the rotating gif class.

    Regarding reuse, the problem was not reusing the grid per se, but the layout (borderlayout).

    Previously i had each grid on a separate tab in a region of the page, each with a gridpanel,
    i think the layout overhead of building each of those panels was slowing it down, especially
    on pages where there could be more than 6 (the number of grids depends on the content)

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Rather than building them all at once, can you build them on the 1st activation of each tab? That way you don't have the long initial delay.

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    11
    Vote Rating
    0
    bascule is on a distinguished road

      0  

    Default


    Yeah, i thought about it but thats too slow for what is expected of a tab. Each each tab contains two other panels besides the gridpanel that show information on each row when the selection changes.
    Creating the innerlayout for each of these tabs on click is too slow because the user expects tabs
    to react immediately. So currently ive got only one tab with only one inner layout, and using the
    toolbar buttons to change (ie reset) to the appropriate grid. All the layout is created on page load but at
    least the single tab reacts immediately.

    I know that sooner or later im going to have to work on speeding up the initial layout, because
    its taking a bit on a normal browser to load (i really dont know where the time is going) but i
    want to get the basic functionality in place before optimising..

Similar Threads

  1. Vertical Toolbars anyone?
    By davidascher in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 5 Feb 2008, 6:45 PM
  2. two toolbars in the same region?
    By brian in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 23 May 2007, 10:41 AM
  3. Stacked layout
    By barrygently in forum Community Discussion
    Replies: 0
    Last Post: 27 Nov 2006, 9:10 AM
  4. Embedding HTML / Controls In Toolbars
    By griffiti93 in forum Community Discussion
    Replies: 1
    Last Post: 26 Nov 2006, 4:43 AM

Thread Participants: 5

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi