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='.'><div style='height:200px'><div id='dbSearch_renderToDiv<%=randomId%>'></div></div></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='.'><div style='height:200px'><div id='TreeTpl" + randomId + "'></div></div></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() ;}) ;") ;
补充:web前端 , JavaScript ,