Results 1 to 7 of 7

Thread: Add item to column header

  1. #1
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64

    Default Add item to column header

    Hello again all,

    I'm playing with an EditorGridPanel and running into a little trouble. From several other posts I've read it seems that maybe I'm messing around with an uncomfortable amount of undocumented/unsupported features, but I'm getting close to what I want to do.

    My EditorGridPanel will eventually allow the user to add columns to the grid via a combotree-type object (currently it just adds an auto-numbered faux-column via a tbar button), and I'd LIKE them to be able to dismiss or close a column via a small "x" icon or something in the column header.

    Unless I'm misunderstanding the API Docs, it seems that the "header" config option on a columnModel allows only string input. I suppose I could slap in HTML (see my example code) and get a reasonable result, but it feels like a filthy hack.

    Has anyone had any experience extending or overriding the columnModel to allow for non-strings within? I've had no luck finding such a modification on the forums, but my google ninja skills are admittedly rusty.

    Here's the code I'm working with, along with the truly fugly HTML (just slapped an alert in there for testing purposes... I would eventually need to call actions.removeDataPoint in that trigger).

    Code:
    var actions = {
    	addDataPoint: new Ext.Action({
    		text: _('Add'),
    		handler: function(){
    			var dpName = 'dataPoint ' + ++intAutoNumber;
    			var grid = Ext.getCmp('grdRawData');
    			var colConfig = grid.getColumnModel().config;
    			var headerHTML = '<div>' + dpName + '&nbsp;&nbsp;<a href="#" onClick="alert(\'CLICK\'); return false">x</a></div>'
    			colConfig.push({
    				header: headerHTML,
    				dataIndex: dpName,
    				editor: new Ext.form.TextField({
    				})
    			});
    			grid.getColumnModel().setConfig(colConfig, true);
    			grid.reconfigure(grid.getStore(), new Ext.grid.ColumnModel(colConfig));
    		}
    	}),
    	removeDataPoint: new Ext.Action({
    		text: _('Remove'),
    		handler: function(sender, e){
    			var grid = Ext.getCmp('grdRawData');
    			var selModel = grid.getSelectionModel();
    			var colModel = grid.getColumnModel();
    			
    			var selColumnIdx = selModel.getSelectedCell()[1];
    			var selColumnId = colModel.getColumnId(selColumnIdx);
    			var selColumnObj = colModel.getColumnById(selColumnId);
    			
    			if (!selColumnObj.noDelete) {
    				var colConfig = colModel.config;
    				var selDataIndex = colModel.getDataIndex(selColumnIdx)
    				colConfig.splice(colConfig.IndexOfByMember('dataIndex', selDataIndex), 1);
    				for (var i=1; i<colConfig.length; i++) {
    					delete colConfig[i].id;
    				}
    				colModel.setConfig(colConfig, true);
    				grid.reconfigure(grid.getStore(), new Ext.grid.ColumnModel(colConfig));
    			}
    		}
    	})
    }
    
    var win = new Ext.Window({
    	title: _('Raw Data Editor'),
    	width: 750,
    	height: 500,
    	layout: 'border',
    	constrain: true,
    	modal: true,
    	plain: true,
    	closable: false,
    	bodyStyle: 'padding: 5px;',
    	buttonAlign: 'center',
    	items: new Ext.grid.EditorGridPanel({
    		id: 'grdRawData',
    		region: 'center',
    		//clicksToEdit: 1, 
    		store: rawDataStore,
    		enableHdMenu: false,
    		cm: new Ext.grid.ColumnModel([
    			{
    				header: 'Time',
    				dataIndex: 'time',
    				noDelete: true
    			}
    		])
    	}),
    	tbar: [
    		actions.addDataPoint,
    		actions.removeDataPoint
    	]
    });
    Anyone have any relevant examples of extending or overriding the ColumnModel code in this way, or should I stick with the yucky HTML insertion?

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Condor posted some code for adding columns not long back.

  3. #3
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64

    Default

    Sorry, I'm not being clear. The code above works for adding and removing columns. I'm happy with it. I'm just searching for some extension of ColumnModel that allows for the addition of buttons (rather than just text) to the header. I'm playing with it myself and will gladly post what I come up with if it's decent, but I just didn't want to reinvent the wheel if a relevant solution already exists and I've just missed in my forum searches.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Don't override ColumnModel. Instead, specify a different header cell template for the GridView (templates.hcell).

  5. #5
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64

    Default

    Should I be able to set the template for the header cell within the GridView before render? Currently the following code still heads to ext-all-debug with this.templates undefined:

    Code:
    var rawDataView = new Ext.grid.GridView({
    });
    rawDataView.templates = {
    	header: new Ext.Template(
    		'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
    		'<thead><tr class="x-grid3-hd-row">TEST</tr></thead>',
    		'</table>'
    	)
    };
    
    var win = new Ext.Window({
    	title: _('Raw Data Editor'),
    	width: 750,
    	height: 500,
    	layout: 'border',
    	constrain: true,
    	modal: true,
    	plain: true,
    	closable: false,
    	bodyStyle: 'padding: 5px;',
    	buttonAlign: 'center',
    	items: new Ext.grid.EditorGridPanel({
    		id: 'grdRawData',
    		region: 'center',
    		//clicksToEdit: 1, 
    		store: rawDataStore,
    		enableHdMenu: false,
    		cm: new Ext.grid.ColumnModel([
    			{
    				header: 'Time',
    				dataIndex: 'time',
    				noDelete: true
    			}
    		]),
    		view: rawDataView
    	}),
    	tbar: [
    		actions.addDataPoint,
    		actions.removeDataPoint
    	]
    });
    Do I need to explicitly do a grid.getView().templates = { header: ... } and a refresh() after render? That feels sloppy, but I'm notoriously sloppy anyway, so...

  6. #6
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64

    Default FAIL

    My apologies. The code block above is correct, but it wasn't correct in my copy locally. I had the "view: rawDataView" parameter set on the WINDOW, not on the GRID. Dummy. Anyway, it's allowing me to get at the header now. Thanks for your help. I'll post a reasonable facsimile of the finished product once I'm done tweaking.

  7. #7
    Sencha User
    Join Date
    Mar 2009
    Posts
    23

    Default

    now we've done something similar but we having a problem now when a user tries to sort on the newly added column, the column doesn't "show" its being sorted. So there's no little arrow next to the HeaderText.

    Have you had this problem at all? If you did, anyway to work around it?

    Thanks!

Posting Permissions

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