EXT2.0 下拉树例子(超简单)

时间:2021-08-10 17:29:58
导读:
  相关文章: X
  ext-2.0扩展树形下拉框(代码及演示)
  Ext 的表单(Form)
  Ext CheckTreeNode Example更多相关推荐
  看了很多关于EXT下拉树的实现, 发现很多例子都是对EXT原有的类进行扩展, 而且都发现用起来很费劲
  
  在这里,本人实现的EXT下拉树是直接使用 Ext.form.ComboBox + Ext.tree.TreePanel, 将两者结合起来,不需要额外的扩展
  
  效果图可见附件一
  
  JS代码如下:
  var comboxWithTree = new Ext.form.ComboBox({
  store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
  editable:false,
  mode: 'local',
  triggerAction:'all',
  maxHeight: 200,
  tpl: "
",
  selectedClass:',
  onSelect:Ext.emptyFn
  });
  var tree = new Ext.tree.TreePanel({
  loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),
  border:false,
  root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})
  });
  tree.on('click',function(node){
  comboxWithTree.setValue(node.text);
  comboxWithTree.collapse();
  });
  comboxWithTree.on('expand',function(){
  tree.render('tree');
  });
  comboxWithTree.render('comboxWithTree');
  这里的使用了Ext.tree.DWRTreeLoader 调用后台方法读取结点, 和下拉树的实现本身没任何关系,你可以使用任何的loader去加载树结点
  需要注意的是,ComboBox的tpl里的
这个ID可以改成别的, 但必须要在'expand'事件里, 将树显示在这个div上
  就是如此简单...
  
  看到这里,聪明的读者就会想到,如此类推,想在下拉表里放任何东西都是可以的,以下例子放一个Panel,效果图见附件二
  var comboxWithPanel = new Ext.form.ComboBox({
  store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
  editable:false,
  mode: 'local',
  triggerAction:'all',
  maxHeight: 200,
  tpl: '
',
  selectedClass:',
  onSelect:Ext.emptyFn
  });
  comboxWithPanel.render('comboxWithPanel');
  var tree2 = new Ext.tree.TreePanel({
  loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),
  border:false,
  autoScroll:true,
  root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})
  });
  var border = new Ext.Panel({
  title:'面板title',
  layout:'fit',
  border:false,
  height :200,
  tbar:[{text:'确定一'},'-',new Ext.form.TextField({id: 'paramCnName',width:60}),{text:'查找一'}],
  bbar:[{text:'确定二'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'查找二'}],
  items: tree2
  });
  comboxWithPanel.on('expand',function(){
  border.render('panel');
  });
  
  
   EXT2.0 下拉树例子(超简单)
  
  描述:
  大小: 153 KB
  查看次数: 9
  
   EXT2.0 下拉树例子(超简单)
  
  描述:
  大小: 150.3 KB
  查看次数: 7
  声明:JavaEye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
  推荐链接: 参加微软MSN机器人大赛,挑战你的想象力!赢取HP笔记本大奖!
  推荐链接:
  中国领先的电子商务网站-淘宝网招贤纳士,诚聘Java工程师
  普元软件在北京和上海招聘技术高手加盟

本文转自
http://www.javaeye.com/topic/164424