extjs Tree Compbox
6491 ワード
Ext.ns('Ext.my.form');
// TreeComboBox
(function() {
var createTreePanel = function(treeWidth, treeHeight, rootVisible, root) {
var treePanel = new Ext.tree.TreePanel( {
//id : 'treePanel-' + (++Ext.Component.AUTO_ID),
root : root,
rootVisible : rootVisible,
floating : true,
autoScroll : true,
renderTo : Ext.getBody(),
width : treeWidth || 230,
height : treeHeight || 250,
tbar:{},
bbar:{}
});
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() {
Ext.getCmp(treePanelId).root.removeAll(true);
Ext.getCmp(treePanelId).root
.appendChild(this.reader.jsonData.data);
};
return Ext.data.JsonStore.superclass.load.call(this, options);
}
})
return store;
}
Ext.my.form.TreeComboBox = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function() {
Ext.my.form.TreeComboBox.superclass.initComponent.call(this);
this.on('specialkey', function(f, e) {
if (e.getKey() == e.ENTER) {
this.onTrigger2Click();
}
}, this);
this.treePanel = createTreePanel(this.treeWidth, this.treeHeight,
this.rootVisible, this.root);
this.treePanel.on('hide', this.onTreeHide, this);
this.treePanel.on('show', this.onTreeShow, this);
this.treePanel.on('click', this.onTreeNodeClick, this);
//this.treePanel
// .on('collapsenode', this.onExpandOrCollapseNode, 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 : false,
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();
},
// private
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);
this.collapse();
},
onRender : function(ct, position) {
Ext.my.form.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');
}
}
});
})();
Ext.reg('treeComboBox', Ext.my.form.TreeComboBox);
new Ext.my.form.TreeComboBox({
storeRoot:"data",
renderTo:Ext.getBody(),
storeTotalProperty:"total",
dataUrl:"../Test/list.html",
root:new Ext.tree.TreeNode({
id:"Root",icon:"",text:" ",leaf:false}),
fieldLabel:" "})
バックグラウンドデータ
{"total":100,"data":
[
new Ext.tree.AsyncTreeNode({id:"9",icon:"",text:"aaa",
children:[
new Ext.tree.TreeNode({icon:"",text:"bbb",leaf:true})
],leaf:false}),
new Ext.tree.AsyncTreeNode({id:"1",icon:"",text:"aaa1",leaf:true}),
new Ext.tree.AsyncTreeNode({id:"2",icon:"",text:"aaa2",leaf:true})
]
}