当前位置: 代码迷 >> Web前端 >> combox带treepanel的例证
  详细解决方案

combox带treepanel的例证

热度:253   发布时间:2012-09-02 21:00:34.0
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() ;}) ;") ;
  相关解决方案