combox帶treepanel的例子

new Ext.form.ComboBox({
id: '<%=searchType%>_keyWordSearch_searchKeyWord',
name: '<%=searchType%>_keyWordSearch_searchKeyWord',
value : '<%=keyWord%>',
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
tpl: "<tpl for='.'><p style='height:200px'><p id='dbSearch_renderToDiv<%=randomId%>'></p></p></tpl>",
fieldLabel: '"+fieldTitle+"',
clearCls: 'stopFloat',
emptyText:'請選擇或輸入檢索詞…',
mode: 'local',
triggerAction: 'all',
width: 180,
maxHeight: 200,
selectedClass: '',
onSelect: Ext.emptyFn,
maxLength : 27,
minLength : 1,
enableKeyEvents : true,
listeners: {
'expand':function(combo){//把'expand'改成'select'應該就是選擇的時候觸發吧
var Classification_tree = new Ext.tree.TreePanel({
border: false,
id: 'graphSearch__tree',
root:new Ext.tree.AsyncTreeNode({
text: '關鍵詞維護',
id:'1'
}),
loader: new Ext.tree.TreeLoader({
dataUrl:'treeUtil.html?content.method=getAntistopTreeNodes'
}),
listeners: {
click : function (node){
var flag = node.attributes.leaf;
if(flag){
Ext.getCmp('<%=searchType%>_keyWordSearch_searchKeyWord').setValue(node.attributes.essAntistopName);
Ext.getCmp('<%=searchType%>_keyWordSearch_searchKeyWord').collapse() ;
}
}
}
});
Classification_tree.render('dbSearch_renderToDiv<%=randomId%>') ;
Classification_tree.root.reload();
Classification_tree.root.expand() ;
}
,'blur' : function() {this.value=this.el.dom.value; }
,'collapse' : function() {Ext.getCmp('graphSearch__tree').destroy() ; }
,'keydown' : function(t, event) {
if (event.keyCode == 13) {
if(Ext.getCmp('<%=searchType%>_keyWordSearch_searchKeyWord').isValid()){
searchButton(Ext.getCmp('<%=searchType%>_mainSearchPanel'),true);//去搜索數據
}else{
Ext.Msg.alert('提示信息:','搜索框不能包含英文單引號、雙引號和反斜杠!');
}
}
}
}

})

———–另外一種,也是很好的例子用ComboBox和TreePanel實現下拉樹——————————————————————————————
// huying add 20100118 用ComboBox和TreePanel實現下拉樹
buffer.append("var parentMenu = new Ext.form.ComboBox({") ;
buffer.append("                          id: 'parentMenu',") ;
buffer.append("                          store: new Ext.data.SimpleStore({fields:[],data:[[]]}),") ;
buffer.append("       editable: false,") ;
buffer.append("       tpl: \"<tpl for='.'><p style='height:200px'><p id='TreeTpl" + randomId + "'></p></p></tpl>\",") ;
buffer.append("       fieldLabel: '" + PkgTagUtils.message(pageContext, "BusinessForm.fieldLabel.parentMenu") + "',") ;
buffer.append("                          clearCls: 'stopFloat',") ;
buffer.append("       allowBlank: false,") ;
buffer.append("       mode: 'local',") ;
buffer.append("       triggerAction: 'all',") ;
buffer.append("    width: 300,") ;
buffer.append("    maxHeight: 200,") ;
if(business != null && !"".equals(business.getMenus())){
buffer.append("    value: '" + parentNode[1] + "',") ;
}
buffer.append("    selectedClass: '',") ;
buffer.append("      onSelect: Ext.emptyFn") ;
buffer.append("            }) ;") ;

buffer.append("var menuHidden = new Ext.form.Hidden({name: 'parentMenuId',") ;
if(business != null && !"".equals(business.getMenus())){
buffer.append("    value: '" + parentNode[0] + "'") ;
} else {
buffer.append("    value: ''") ;
}
buffer.append("        }) ;") ;

buffer.append("var menuTree = new Ext.tree.TreePanel({") ;
buffer.append("          loader: new Ext.tree.TreeLoader({\r\n");   
buffer.append("            dataUrl:'treeUtil.html?content.method=getMenuTreeNodes'\r\n");   
buffer.append("          }),\r\n"); 
buffer.append("    border: false,") ;
buffer.append("   root: new Ext.tree.AsyncTreeNode({text: '系統菜單',id:'1'}) }) ;") ;

buffer.append(" menuTree.on('click',") ;
buffer.append("  function(node){") ;
buffer.append("         menuHidden.setValue(node.id) ; ") ;
buffer.append("    parentMenu.setValue(node.text) ;") ;
buffer.append("    parentMenu.collapse() ;") ;
buffer.append(" }) ;") ;

buffer.append(" parentMenu.on('expand',function(combo){menuTree.render('TreeTpl" + randomId + "') ;menuTree.root.reload(); menuTree.root.expand() ;}) ;") ;

You May Also Like