PDA

View Full Version : combotree? who can help me sso?



nailuo
6 May 2011, 5:48 AM
Can anyone figure out how to port the combotree example to ext 4.x?

I have attempted it, and I am encountering too many errors.

Thanks in advance
Cheers

atian25
6 May 2011, 2:27 PM
maybe this can help:
http://www.sencha.com/forum/showthread.php?132328-ComboBox-using-Grid-instead-of-BoundList

nailuo
6 May 2011, 5:05 PM
I kown,I have attempted it, and I am encountering too many errors also.... who help me

chriss
7 May 2011, 11:17 AM
Try extending the picker class. Take a look at the code below, it will help you to get started



Ext.define("Ext.TreeCombo",{
extend:"Ext.form.field.Picker",
requires:["Ext.tree.Panel"],

initComponent: function(){
var self = this

Ext.apply(self,{
pickerAlign:"tl"
})

self.callParent()

},

createPicker: function(){
var self = this

self.picker = new Ext.tree.Panel({
height:200,
floating: true,
focusOnToFront: false,
shadow: true,
ownerCt: this.ownerCt,
useArrows: true,
store: self.store,
rootVisible:!1,
displayField: self.displayField
})

self.picker.getSelectionModel().on({
selectionChange: function(sm, selections){
// add your custom behaviour here
console.log(arguments)
}
})


return self.picker
},

alignPicker: function() {
// override the original method because otherwise the height of the treepanel would be always 0
var me = this,
picker, isAbove,
aboveSfx = '-above';

if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and max width) unless there are no records to display.
picker.setWidth( me.bodyEl.getWidth() );
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);

// add the {openCls}-above class if the picker was aligned above
// the field due to hitting the bottom of the viewport
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
}
}
}
})

nailuo
8 May 2011, 12:30 AM
Thank chriss ! it's work good

chenjinglys
7 Jun 2011, 11:16 PM
Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox']);

Ext.define("Ext.ux.comboboxtree", {
extend : "Ext.form.field.Picker",
requires : ["Ext.tree.Panel"],
initComponent : function() {
var self = this;
Ext.apply(self, {
fieldLabel : self.fieldLabel,
labelWidth : self.labelWidth
// pickerAlign : "tl"//悬浮到其上面
});
self.callParent();
},
createPicker : function() {
var self = this;
var store = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : self.storeUrl
},
sorters : [{
property : 'leaf',
direction : 'ASC'
}, {
property : 'text',
direction : 'ASC'
}]
});
self.picker = new Ext.tree.Panel({
height : 300,
autoScroll : true,
floating : true,
focusOnToFront : false,
shadow : true,
ownerCt : this.ownerCt,
useArrows : true,
store : store,
rootVisible : false
});
self.picker.on({
beforehide : function(p) {
var records = self.picker.getView().getChecked(), names = [];
Ext.Array.each(records, function(rec) {
names.push(rec.get('text'));
});
// Ext.MessageBox.show({
// title : 'Selected Nodes',
// msg : names.join('<br />'),
// icon : Ext.MessageBox.INFO
// });
// alert(names.join(','));
self.setValue(names.join(','));
p.setVisible(true);// 隐藏树
}
});
return self.picker;
},
alignPicker : function() {
// override the original method because otherwise the height of
// the treepanel would be always 0
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and
// max width) unless there are no records to display.
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
// add the {openCls}-above class if the picker was
// aligned above
// the field due to hitting the bottom of the viewport
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
+ aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
+ aboveSfx);
}
}
}
});
Ext.onReady(function() {
var com = Ext.create("Ext.ux.comboboxtree", {
storeUrl : 'check-nodes.json',
width : 270,
fieldLabel : '行政区划',
labelWidth : 60,
renderTo : 'tree-div'
});
});

chenjinglys
7 Jun 2011, 11:18 PM
Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox']);

Ext.define("Ext.ux.comboboxtree", {
extend : "Ext.form.field.Picker",
requires : ["Ext.tree.Panel"],
initComponent : function() {
var self = this;
Ext.apply(self, {
fieldLabel : self.fieldLabel,
labelWidth : self.labelWidth
// pickerAlign : "tl"//悬浮到其上面
});
self.callParent();
},
createPicker : function() {
var self = this;
var store = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : self.storeUrl
},
sorters : [{
property : 'leaf',
direction : 'ASC'
}, {
property : 'text',
direction : 'ASC'
}]
});
self.picker = new Ext.tree.Panel({
height : 300,
autoScroll : true,
floating : true,
focusOnToFront : false,
shadow : true,
ownerCt : this.ownerCt,
useArrows : true,
store : store,
rootVisible : false
});
self.picker.on({
beforehide : function(p) {
var records = self.picker.getView().getChecked(), names = [];
Ext.Array.each(records, function(rec) {
names.push(rec.get('text'));
});
// Ext.MessageBox.show({
// title : 'Selected Nodes',
// msg : names.join('<br />'),
// icon : Ext.MessageBox.INFO
// });
// alert(names.join(','));
self.setValue(names.join(','));
p.setVisible(true);// 隐藏树
}
});
return self.picker;
},
alignPicker : function() {
// override the original method because otherwise the height of
// the treepanel would be always 0
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and
// max width) unless there are no records to display.
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
// add the {openCls}-above class if the picker was
// aligned above
// the field due to hitting the bottom of the viewport
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
+ aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
+ aboveSfx);
}
}
}
});
Ext.onReady(function() {
var com = Ext.create("Ext.ux.comboboxtree", {
storeUrl : 'check-nodes.json',
width : 270,
fieldLabel : '行政区划',
labelWidth : 60,
renderTo : 'tree-div'
});
});

chenjinglys
9 Jun 2011, 7:57 PM
comboboxtree I modified a bit,http://chenjinglys.blog.163.com/blog/static/16657571620115833054920/

Galahed
7 Oct 2011, 8:52 AM
Hi guys!


I'am completely new with this framework, but want share some upgrade of your component.
Because i need combobox with autocomplete (as default) and tree, i get you component as base and extend it some...

You use store for your tree panel, so store property of the field is empty, i try set it and spot, that browser start send autocomplete requests. So i try just change picker, but your method overwrite core methods and it rise som errors. Main difficult in creation of picker, because default autocomplete picker create on overwriten function createPicker (and .picker object overwrite too).

So i add this listener to the define new combobox class:


beforeRender: function(){
this.createPicker1=this.createPicker
this.createPicker=function(){this.picker1=this.createPicker1();this.picker2=this.createPicker2();this.picker=this.picker1;return this.picker}
}
it save core function createPicker, use it and save default autocomplete picker, then create and save second picker and use one of them

Also i extend onTriggerClick:

onTriggerClick: function() {
var me = this;
if (!me.readOnly && !me.disabled) {
if (me.isExpanded) {
me.collapse();
me.picker=me.picker1
} else {
me.picker=me.picker2
me.expand();
}
me.inputEl.focus();
}
},

and some cahnge your function createPicker, call it createPicker2
so it work well: when user type something in field, opens default picker and autocomplete JsonStore use, but when he instead click trigger button, opens tree panel with TreeStore nested nodes loading.

Some small glitch here in fact, if you first time click on triggerbutton (before any picker shown) - shows autocomplete-picker, not tree. I dunno why :)

28573- notworking example of code

zoluro
27 Mar 2012, 2:45 AM
Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox']);

Ext.define("Ext.ux.comboboxtree", {
extend : "Ext.form.field.Picker",
requires : ["Ext.tree.Panel"],
initComponent : function() {
var self = this;
Ext.apply(self, {
fieldLabel : self.fieldLabel,
labelWidth : self.labelWidth
// pickerAlign : "tl"//悬浮到其上面
});
self.callParent();
},
createPicker : function() {
var self = this;
var store = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : self.storeUrl
},
sorters : [{
property : 'leaf',
direction : 'ASC'
}, {
property : 'text',
direction : 'ASC'
}]
});
self.picker = new Ext.tree.Panel({
height : 300,
autoScroll : true,
floating : true,
focusOnToFront : false,
shadow : true,
ownerCt : this.ownerCt,
useArrows : true,
store : store,
rootVisible : false
});
self.picker.on({
beforehide : function(p) {
var records = self.picker.getView().getChecked(), names = [];
Ext.Array.each(records, function(rec) {
names.push(rec.get('text'));
});
// Ext.MessageBox.show({
// title : 'Selected Nodes',
// msg : names.join('<br />'),
// icon : Ext.MessageBox.INFO
// });
// alert(names.join(','));
self.setValue(names.join(','));
p.setVisible(true);// 隐藏树
}
});
return self.picker;
},
alignPicker : function() {
// override the original method because otherwise the height of
// the treepanel would be always 0
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
// Auto the height (it will be constrained by min and
// max width) unless there are no records to display.
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
// add the {openCls}-above class if the picker was
// aligned above
// the field due to hitting the bottom of the viewport
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
+ aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
+ aboveSfx);
}
}
}
});
Ext.onReady(function() {
var com = Ext.create("Ext.ux.comboboxtree", {
storeUrl : 'check-nodes.json',
width : 270,
fieldLabel : '行政区划',
labelWidth : 60,
renderTo : 'tree-div'
});
});

Thank you for your codes
now ,I want to refrash the tree when expend it, how can do it?