PDA

View Full Version : Editor TreeGrid - is there such a thing? Can't find a good example anywhere



cnesbit
4 Mar 2010, 1:40 PM
I'm trying to make a Ext.ux.tree.TreeGrid with editable columns. But the type of editor will not always be an Ext.form.TextField. I've tried theExt.tree.ColumnTree (found here: http://www.extjs.com/forum/showthread.php?t=20793 ) instead as it looked promising, but had no luck. So I have been going back and forth between the TreeGrid and ColumnTree for several days now and need a solution. I'm at my wits end and need help from the experts! :)

My main problem with the treegrid, is that it builds off of XTemplates (which I can't seem to get working with an editable field). My main problem with the ColumnTree is that it edits the data in a popped up textfield Ext.Editor rather than inline with the actual ColumnTree.

attached is a screenshot of what I'm trying to accomplish. The column of radio buttons, in this case, is the only column that is editable. and it'd be nice if it handles changes the same way a normal EditorGridPanel handles changes.

EDIT:
I'm almost there, but I need a little push. I've got a radio column that can change the value of the underlying attribute and even sets checked=true in the dom object. but the radio buttons don't update. I need some help, here's my radiocolumn:



Ext.namespace('Ext.treegrid');

Ext.treegrid.RadioColumn = function(config) {

Ext.treegrid.RadioColumn.superclass.constructor.call(this);

Ext.apply(this, config, {
init : function(treegrid){
this.tree = treegrid;
this.tree.on('render', function(){
var view = this.tree.getEl();
view.on('click', this.onClick, this);
}, this);

this.tpl = new Ext.XTemplate('{'+this.dataIndex+':this.renderer}', {
renderer: function(value, attributes) {
return '<input type="radio" name="x-treegrid-col-'+this.dataIndex+'" ' + (value? ' checked="checked"' : '') + '>';
}
});
this.tpl.dataIndex = this.dataIndex;
},

onClick : function(e, target){

if (target.name == 'x-treegrid-col-' + this.dataIndex) {
var elt = Ext.Element.get(e.target);

this.tree.selModel.selNode.attributes[this.dataIndex] = true; //mark selected radio value
console.log(elt.dom.type);
elt.dom.checked=true;
//var record = this.tree.selModel.selNode.attributes;
//this.tpl.overwrite(elt.dom, record);
//target = this.tpl.applyTemplate(record);
//console.log(elt);
console.log(elt.dom.checked);
}
}

});
};
Ext.extend(Ext.treegrid.RadioColumn, Ext.util.Observable);



Please help. I hate posting on forums that nobody responds to. :(

cnesbit
11 Mar 2010, 5:53 AM
So, I'm using a treegrid with a custom radio column. I'm almost there. I can change the underlying treenode attribute for my radio column and I can even set checked=true in the dom, but the radio buttons don't change visually. Here's what I've got so far:



var tree = new Ext.ux.tree.editorTreeGrid({
...,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 230,
uiProvider: {editable:true, qtip:'help'}
},{
xtype: 'tgradio',
header: 'Selected',
dataIndex: 'selected',
width: 50,
border: true
},{
...
}],
...
});
and my radio column:



Ext.namespace('Ext.treegrid');

Ext.treegrid.RadioColumn = function(config) {

Ext.treegrid.RadioColumn.superclass.constructor.call(this);

Ext.apply(this, config, {
init : function(treegrid){
this.tree = treegrid;
this.tree.on('render', function(){
var view = this.tree.getEl();
view.on('click', this.onClick, this);
}, this);

this.tpl = new Ext.XTemplate('{'+this.dataIndex+':this.renderer}', {
renderer: function(value, attributes) {
return '<input type="radio" name="x-treegrid-col-'+this.dataIndex+'" ' + (value? ' checked="checked"' : '') + '>';
}
});
this.tpl.dataIndex = this.dataIndex;
},

onClick : function(e, target){

if (target.name == 'x-treegrid-col-' + this.dataIndex) {
var elt = Ext.Element.get(e.target);
this.tree.selModel.selNode.attributes[this.dataIndex] = true; //mark selected radio value
console.log(elt.dom.type);
elt.dom.checked=true;
//var record = this.tree.selModel.selNode.attributes;
//this.tpl.overwrite(elt.dom, record);
//target = this.tpl.applyTemplate(record);
//console.log(elt);
console.log(elt.dom.checked);
}
}

});
};
Ext.extend(Ext.treegrid.RadioColumn, Ext.util.Observable);
Ext.reg('tgradio', Ext.treegrid.RadioColumn);
I'm so close, but I just can't seem to get the change visually. Please help! :)

-cnesbit

cnesbit
11 Mar 2010, 6:12 AM
I just tried posting, but apparently my post didn't get saved so I'll try again. :)

I'm almost there. I've decided to use the treegrid (not columnTree) and I've got it displaying a clickable radio button in the column. It changes the underlying attribute, and even sets checked=true in the dom, but the radio buttons are not visually updating. Here's my radiocolumn:




Ext.namespace('Ext.treegrid');
Ext.treegrid.RadioColumn = function(config) {

Ext.treegrid.RadioColumn.superclass.constructor.call(this);

Ext.apply(this, config, {
init : function(treegrid){
this.tree = treegrid;
this.tree.on('render', function(){
var view = this.tree.getEl();
view.on('click', this.onClick, this);
}, this);

this.tpl = new Ext.XTemplate('{'+this.dataIndex+':this.renderer}', {
renderer: function(value, attributes) {
return '<input type="radio" name="x-treegrid-col-'+this.dataIndex+'" ' + (value? ' checked="checked"' : '') + '>';
}
});
this.tpl.dataIndex = this.dataIndex;
},

onClick : function(e, target){

if (target.name == 'x-treegrid-col-' + this.dataIndex) {
var elt = Ext.Element.get(e.target);


this.tree.selModel.selNode.attributes[this.dataIndex] = true; //mark selected radio value
console.log(elt.dom.type);
elt.dom.checked=true;
//var record = this.tree.selModel.selNode.attributes;
//this.tpl.overwrite(elt.dom, record);
//target = this.tpl.applyTemplate(record);
//console.log(elt);
console.log(elt.dom.checked);
}
}

});
};
Ext.extend(Ext.treegrid.RadioColumn, Ext.util.Observable);
Ext.reg('tgradio', Ext.treegrid.RadioColumn);
Please help! Asking for help on a forum does no good if people don't reply...

cnesbit
11 Mar 2010, 9:09 AM
any ideas? I don't like posting on a forum where nobody but me responds...

teqneers
12 Mar 2010, 3:28 AM
Perhaps you want to have a look at http://www.extjs.com/forum/showthread.php?p=446133#post446133 - we actually turned the grid/editorgrid into something that can handle tree-structures.

Best regards

Stefan

cnesbit
12 Mar 2010, 6:01 AM
Thank you SO much!!

I already had a radio column that worked with EditorGridPanels, but found myself reinventing the wheel to get a radio column in Ext's treegrid. Since your code only modifies the EditorGridPanel, this was a perfect solution!!!

-cnesbit