记录下用到的treecombobox
treecombobox.js
// JavaScript Document
Ext.namespace('Ext.ux');
(function() {
var createTreePanel = function(treeWidth, treeHeight, rootVisible, root) {
var treePanel = new Ext.tree.TreePanel({
root : root,
rootVisible : rootVisible,
floating : true,
autoScroll : true,
renderTo : Ext.getBody(),
width : treeWidth || 150,
height : treeHeight || 250
});
return treePanel;
}
var createStore = function(treePanelId,storeBaseParams, storeMethod,dataUrl, storeRoot, storeTotalProperty) {
var store = new Ext.data.JsonStore( {
proxy : new Ext.data.HttpProxy( {
method : storeMethod || 'GET',
url : dataUrl
}),
baseParams : storeBaseParams || {
query : '',
start : 0
},
root : storeRoot || 'data',
totalProperty : storeTotalProperty || "total",
fields : [0],
autoLoad : false,
load : function(options) {
options.callback = function() {
var TreeJsonRoot='data';
if(storeRoot!=undefined && storeRoot.length>0) TreeJsonRoot=storeRoot;
Ext.getCmp(treePanelId).root.removeAll(true);
if(storeRoot!=undefined && storeRoot.length>0){
Ext.getCmp(treePanelId).root.appendChild(this.reader.jsonData);
}else{
Ext.getCmp(treePanelId).root.appendChild(this.reader.jsonData[TreeJsonRoot]);
}
};
return Ext.data.JsonStore.superclass.load.call(this, options);
}
})
return store;
}
Ext.ux.TreeComboBox = Ext.extend(Ext.form.TwinTriggerField,{
initComponent : function() {
Ext.ux.TreeComboBox.superclass.initComponent.call(this);
this.on('specialkey', function(f, e) {
if (e.getKey() == e.ENTER) {
this.onTrigger2Click();
}
}, this);
//this.on('keydown',this.filterTree,this);
this.treePanel = createTreePanel(this.treeWidth, this.treeHeight,this.rootVisible, this.root);
//this.treePanel.hiddenPkgs=[];
this.treePanel.on('hide', this.onTreeHide, this);
this.treePanel.on('show', this.onTreeShow, this);
this.treePanel.on('click', this.onTreeNodeClick, this);
this.store = createStore(this.treePanel.id, this.storeBaseParams,
this.storeMethod, this.dataUrl, this.storeRoot,
this.storeTotalProperty);
/* this.treePanel.getTopToolbar().addItem(new Ext.ux.form.SearchField( {
width : this.treeWidth ? this.treeWidth : 220,
store : this.store
}));*/
//this.treePanel.getBottomToolbar().addItem(new Ext.PagingToolbar({store:this.store}));
this.resizer = new Ext.Resizable(this.treePanel.id, {
handles : 'se',
minWidth : 100,
minHeight : 80,
pinned : true
});
this.mon(this.resizer, 'resize', function(r, w, h) {
this.treePanel.setSize(w, h);
//this.treePanel.getTopToolbar().get(0).setSize(w - 10, 18);
}, this);
},
trigger1Class : 'x-form-clear-trigger',
onTrigger1Click : function() {
this.setRawValue('');
this.setHiddenValue('');
},
onTrigger2Click : function() {
this.treePanel.show();
this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
},
editable : true,
storeAutoLoad : true,
frstLoad : true,
onTreeShow : function() {
Ext.getDoc().on('mousewheel', this.collapseIf, this);
Ext.getDoc().on('mousedown', this.collapseIf, this);
if (this.storeAutoLoad && this.frstLoad) {
this.store.load( {});
this.frstLoad = false;
}
},
onTreeHide : function() {
Ext.getDoc().un('mousewheel', this.collapseIf, this);
Ext.getDoc().un('mousedown', this.collapseIf, this);
},
collapseIf : function(e) {
if (!e.within(this.wrap) && !e.within(this.treePanel.getEl())) {
this.collapse();
}
},
collapse : function() {
this.treePanel.hide();
},
showTree : function() {
this.treePanel.show();
},
validateBlur : function() {
return !this.treePanel || !this.treePanel.isVisible();
},
setValue : function(v) {
this.setRawValue(v);
},
getValue : function() {
return this.getRawValue();
},
setHiddenValue : function(v) {
return this.hiddenField.value = v;
},
getHiddenValue : function() {
return this.hiddenField.value;
},
getHiddenId : function() {
return this.hiddenField.id;
},
onTreeNodeClick : function(node, e) {
this.setRawValue(node.text);
this.hiddenField.value = node.id
this.fireEvent('select', this, node);
if(this.emptyShow){
if(this.getValue()!=''){
this.collapse();
}
}else{
this.collapse();
}
},
onRender : function(ct, position) {
Ext.ux.TreeComboBox.superclass.onRender.call(this, ct,
position);
if (!this.hiddenField) {
this.hiddenField = this.getEl().insertSibling( {
tag : 'input',
type : 'hidden',
name : this.name,
value : this.hiddenValue,
id : (this.hiddenId || this.name)
}, 'before', true);
this.getEl().dom.removeAttribute('name');
}
},
filterTree: function(t, e){
var text = t.getValue();
Ext.each(this.treePanel.hiddenPkgs, function(n){
n.ui.show();
});
if(!text){
this.treePanel.filter.clear();
return;
}
this.treePanel.expandAll();
var re = new RegExp('^' + Ext.escapeRe(text), 'i');
this.treePanel.filter.filterBy(function(n){
return !n.attributes.isClass || re.test(n.text);
});
// hide empty packages that weren't filtered
this.treePanel.hiddenPkgs = [];
var me = this.treePanel;
this.treePanel.root.cascade(function(n){
if(!n.attributes.isClass && n.ui.ctNode.offsetHeight < 3){
n.ui.hide();
me.hiddenPkgs.push(n);
}
});
}
});
})();
Ext.reg('treecombobox',Ext.ux.TreeComboBox);
//调用
xtype:'treecombobox',
name:'corp',
id:'Name',
storeRoot:"data",
storeTotalProperty:"total",
dataUrl:"/ah/tree",
root:new Ext.tree.TreeNode({
}),
listeners:{
"select":function(node,e){
}
}