Link to home
Start Free TrialLog in
Avatar of hevsys
hevsysFlag for United States of America

asked on

Coldfusion 9 CFGRID Question

I have used the code below to add a new bar to the bottom of the grid. This gives the user some good information about the records. I want to start to use some of the editable grids that allow records to be inserted and deleted. This works great for some simple tables. But there are 3 buttons (insert/save/delete) that are on the bottom bar that need to be there they are not on the new bar I create. Does anyone know the EXT 3.2 commands to add the buttons to this new bar.

Thank you in advance.
<script type="text/javascript">
function MyDocumentsInit(){
	grid = ColdFusion.Grid.getGridObject("MyDocumentsGrid");
	var gridHead = grid.getTopToolbar(); //note: Ext JS 3.2 change 
    var gridFoot = grid.getBottomToolbar(); //note: Ext JS 3.2 change 
 	var ds = grid.getStore(); //note: Ext JS 3.2 change 
	var tbar = grid.getTopToolbar();
 	
	// this shows the display message by default in new toolbar. (does not work with insert grids) 
 	var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);	 
   	    gbbar = new Ext.PagingToolbar({
		renderTo:bbar,
		store: ds,
	  	pageSize:15, //number of records displayed in grid
	  	displayInfo:true, // change this to false, if you dont want info displayed
	  	displayMsg:'Displaying records {0} - {1} of {2}',
	   	emptyMsg:"No records to display"
	   	});
    // add a custom combobox to the grid header - this combobox lets you choose the number of rows you want to see
	 cb = new Ext.form.ComboBox({
			id:"pagingCombo",
			emptyText:"Rows per page",
			mode:"local",
			triggerAction:"all",
			displayField:"text",
			valueField:"value",
  		       store:new Ext.data.SimpleStore({
            fields: ["value", "text"],
            data: [
               ["5","5 rows per page"],
               ["10","10 rows per page"],
               ["15","15 rows per page"],
               ["20","20 rows per page"],
			   ["30","30 rows per page"],
			   ["40","40 rows per page"],
			   ["50","50 rows per page"],
			   ["75","75 rows per page"],
			   ["100","100 rows per page"]
            	]
  				})
			});
			tbar.addButton({xtype: 'tbfill'}); //puts row selector to the right
			tbar.add(cb); //adds to toolbar
         	ColdFusion.Grid.showTopToolbar("MyDocumentsGrid"); //show the toolbar
			//code below listens for select to change and then reconfigures grid
			cb.addListener("select",function(combo,record,index){
				var numRows = parseInt(record.data.value);
				gbbar.pageSize = parseInt(numRows);
 				ds.reload({params:{start:0,limit:gbbar.pageSize}});
 				gbbar.onClick("refresh");
			});

Open in new window

Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Look at  this following blog.

We used this successfully to implement Custom Toolbar

Avatar of hevsys

ASKER

Hi, I have no problem doing a custom bar, the issue is it overwrites the one that is there, and the buttons to add, save, delete new functions in CF9 are overwritten and I do not know the code to bring them back on the new toolbar.
ASKER CERTIFIED SOLUTION
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial