`
yxgyh
  • 浏览: 274412 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Ext ComboBox Tree 下拉树型菜单

    博客分类:
  • Ext
阅读更多
var comboxWithTree = new Ext.form.ComboBox({
    store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
    editable:false,
    shadow:false,
    mode: 'local',
    triggerAction:'all',
    maxHeight: 200,
    tpl: '<tpl for="."><div style="height:200px"><div id="tree1"></div></div></tpl>',
    selectedClass:'',
    onSelect:Ext.emptyFn
  });
  var tree1 = new Ext.tree.TreePanel({
    loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
    border:false,
     root:new Ext.tree.AsyncTreeNode({text: 'treeRoot',id:'0'})
   });
   tree1.on('click',function(node){
     comboxWithTree.setValue(node.text);
     comboxWithTree.collapse();
   });
  comboxWithTree.on('expand',function(){
    tree1.render('tree1');
   });
  comboxWithTree.render('comboxWithTree');

 2. 下拉树形面板例子

var comboxWithPanel = new Ext.form.ComboBox({
    store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
    editable:false,
    mode: 'local',
    triggerAction:'all',
    maxHeight: 200,
    tpl: '<div style="height:200px"><div id="panel"></div></div>',
    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: 'root',id:'0'})
   });
  var border = new Ext.Panel({
    title:'title',
    layout:'fit',
    border:false,
    height :200,
   tbar:[{text:'ok1'},'-',new Ext.form.TextField({id: 'bb',width:60}),{text:'search1'}],
    bbar:[{text:'ok2'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'search2'}],
    items: tree2
   });
  comboxWithPanel.on('expand',function(){
    border.render('panel');
   });

 

分享到:
评论

相关推荐

    wpf_combobox_tree下拉树形控件

    在本文中,我们将深入探讨如何将Silverlight的树形下拉控件转化为WPF(Windows Presentation Foundation)环境下的使用,并以此创建一个名为“wpf_combobox_tree”的自定义控件。这种控件通常用于增强传统的ComboBox...

    Ext combobox 下拉多选框带搜索功能

    在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    综上所述,ExtJS 4.x的ComboboxTree组件是实现下拉树形菜单的强大工具,它结合了下拉框的简洁和树结构的层次感,提供了丰富的定制选项,能满足多种场景下的需求。理解并熟练掌握其用法,将极大地提升开发效率和用户...

    C#combobox下拉树形菜单

    一款非常实用的combobox的第三方控件,可以实现让其combobox下拉出TreeView,且可以对TreeView进行相关的选择,且只能选择树形数据中的最底层数据,选择后的数据的所有父节点也都相应的递归显示出来。非常实用,忘对...

    ext combobox二级联动

    ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...

    WPF 在listview中如何实现Combobox的下拉菜单绑定Demo

    本教程将详细介绍如何在WPF的ListView中实现ComboBox的下拉菜单绑定。 首先,我们需要了解几个关键概念: 1. **ItemsSource**:这是WPF中用于绑定数据源的属性,无论是ListView还是ComboBox,都可以通过设置此属性...

    delphi 控件开发 eidt,combobox下拉tree,自动级联

    在这个场景中,我们关注的是如何利用Edit、ComboBox和Tree控件实现一个具有下拉树功能的自动级联查询,尤其针对parent属性进行操作。下面将详细介绍这个过程。 1. **Edit控件**:Edit控件是最基本的文字输入控件,...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

    Ext4.0 动态修改ComboBox选择项(本地模式)

    首先,ComboBox在Ext JS中是一个可选列表的输入控件,它可以展示一个下拉菜单供用户选择。在本地模式下,ComboBox的数据通常存储在本地,如JavaScript数组中,而不是从远程服务器获取。这样可以提高应用的响应速度,...

    flex实现 ComboBox中下拉checkbox

    在Flex编程领域,ComboBox是一个常用的组件,它提供了一个下拉列表供用户选择,通常用于实现单选功能。然而,有时我们需要在ComboBox中嵌入多选功能,这时可以通过添加Checkbox来实现。本文将深入探讨如何在Flex中的...

    改变combobox的下拉高度

    在设计用户界面时,有时我们可能需要自定义ComboBox的下拉列表的高度,以适应不同的显示需求。本篇文章将深入探讨如何在不同环境中改变ComboBox的下拉高度。 在Windows桌面应用开发中,例如使用Visual C++、C#或VB...

    Ext ComboboxGrid

    在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则用于展示大量数据并进行编辑和操作。ComboboxGrid将这两者融合,使得用户可以在输入框中输入关键字搜索,同时下拉展示匹配的网格数据,便于多维度筛选...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    Ext ComBobox 附带完整附件

    Ext ComBobox是一款基于JavaScript库Ext JS开发的下拉组合框组件,它为用户界面提供了一种高效、灵活且功能丰富的选择输入方式。这个组件通常用于在网页应用中实现复杂的数据选择,比如从一个长列表中选取一项或者...

    Ext comboBox的remote模式,联想功能实现

    然后,comboBox将更新其下拉列表,显示与用户输入相匹配的选项。 在实际开发中,服务器端也需要编写相应的接口来处理这些请求,通常涉及到数据库查询或其他数据处理逻辑,以返回与用户输入关键词匹配的数据集。 ...

Global site tag (gtag.js) - Google Analytics