`

请您先登录,才能继续操作

extjs input框带树的开发

阅读更多
var comboxWithTree_sys = new Ext.form.ComboBox({  
id:'comboxWithTree_sys',
labelAlign:'left',
    fieldLabel:"所属层级",
    //columnWidth:.33,
   // labelWidth: 80,
    hiddenName:'entity.cuseDept',
    labelStyle : "text-align:right",
    store:new Ext.data.SimpleStore({fields:[],data:[[]]}),  
    editable:false, 
    //allowBlank : false,
    mode: 'local',  
    triggerAction:'all',  
    maxHeight: 300,
    //width : 150, 
    tpl: "<tpl for='.'><div style='height:300px'><div id='tree_div_sys'></div></div></tpl>",  
    selectedClass:'',  
    onSelect:Ext.emptyFn, 
    listeners :{
"afterrender":function(combo,t,o){
var syscom = this;
    this.onViewClick = function(doFocus) {
var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
if (r) {
this.onSelect(r, index);
} else if (s.getCount() === 0) {
this.collapse();
}
if (doFocus !== false) {
this.el.focus();
}
};
}
}
});

comboxWithTree_sys.on('expand',function(){  
    tree_sys.render('tree_div_sys');
tree_sys.expandAll();
});
var tree_sys = new Ext.tree.TreePanel({
id : "tree_sys",
autoHeight : true,
border : false,
columnWidth : .25,
lines : true,
dataUrl:jsContextPath+'/command/commandDwms.do?opCommand=showTree&m=getTreeDate',   //&type=getId',
//dataUrl :jsContextPath+'/command/commandDqmp.do?opCommand=doSysShowManager&treeflag=1&operdanweiid='+operdanweiid,
root : {
nodeType : 'async',
text : '所属层级',
draggable : false,
id : '0'
}
});
tree_sys.on('click',function(node){  
    comboxWithTree_sys.setValue(node.text); 
form.getForm().findField('cellid').setValue(node.id);
comboxWithTree_sys.collapse();
});



           var form = new Ext.form.FormPanel({
region:'north',
id:'fileUploadForm',
title:'查询条件',
height:150,
//border:false,
monitorResize :true,
frame:true,
labelWidth:80,
layout:'column',
items:[{layout : "form",
width:250,
items : [comboxWithTree_sys]}]
                                         });

         //url返回的数据应该是
    [{"cls":"file","description":"","expandable":false,"href":"","hrefTarget":"","id":"41","leaf":true,"text":"CIM层模型"},{"cls":"file","description":"","expandable":false,"href":"","hrefTarget":"","id":"42","leaf":true,"text":"DW层模型"},{"cls":"file","description":"","expandable":false,"href":"","hrefTarget":"","id":"43","leaf":true,"text":"ETL编写"},{"cls":"file","description":"","expandable":false,"href":"","hrefTarget":"","id":"44","leaf":true,"text":"数据库设计"}]

      java  pojos类
   
    package gzkit.dwms.modelmanager;

/**
* 定义一棵树的节点信息POJO
* @author lizhenbin
*
*/
public class TreeNode {

private String id;
private String text; //节点名称
private boolean leaf; //是否叶子
private String cls; //图标
private String href; //链接
private String hrefTarget; //链接指向
private boolean expandable; //是否展开
private String description; //描述信息

public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getHrefTarget() {
return hrefTarget;
}
public void setHrefTarget(String hrefTarget) {
this.hrefTarget = hrefTarget;
}
public boolean isExpandable() {
return expandable;
}
public void setExpandable(boolean expandable) {
this.expandable = expandable;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;



}

}




/**
*  返回数据的方法
* @param paramMap
* @param config
* @return
* @throws Exception
*/
public Object getTreeDate(Map paramMap, CommandConfig config)
    throws Exception
    {
String jsoStr="";
List list=modelMgrService.getData();
List dataList=new ArrayList();
for (int i = 0; i < list.size(); i++) {
//TreeNode treeNode = new TreeNode();


   TreeNode  treeNode=new TreeNode();
Map m=(Map) list.get(i);
BigDecimal objId= (BigDecimal) m.get("OBJ_ID");
treeNode.setId(objId.toString());
String  objName= (String) m.get("OBJ_NAME");
treeNode.setText(objName);
treeNode.setCls("file");                              
treeNode.setLeaf(true);
treeNode.setExpandable(false);
    dataList.add(treeNode);
}
JSONArray  jsoarr=JSONArray.fromObject(dataList);
jsoStr=jsoarr.toString();
ResponseUtils.print(ServletContextHolder.getResponse(), jsoStr);
  return null;
       }


select * from  tb_dictionary  where super_id=8

  数据库结构**********
  obj_id    objName                super_id 
    8         所属层级             0
   41         CIM层模型            8
   42         DW层模型             8 
   43         ETL编写              8               
   44         数据库设计           8          




分享到:
评论

相关推荐

    extjs中文api

    这是ExtJS中的核心类之一,用于定义和管理整个应用,包括启动、配置、管理组件树等关键任务。 #### 二、事件处理机制与代码示例 在ExtJS中,事件处理是非常重要的一个方面,它使得用户可以与页面元素进行交互。...

    学校实训JSP项目-[上传下载]ExtJS 2.2 开源网络硬盘系统.zip

    ExtJS提供了丰富的组件库,包括表格、树形视图、表单、菜单等,使得开发者可以构建出功能强大的、具有桌面应用般用户体验的Web应用。在网络硬盘系统中,可能用到了ExtJS的文件上传和下载组件,以及数据管理的Grid...

    ExtJs入门实例

    - **用途**: 显示一个确认框,带有“确定”和“取消”按钮。 - **参数**: - `title` (必需): 弹出框的标题。 - `msg` (必需): 显示的信息。 - `fn` (可选): 关闭对话框后执行的函数,参数`e`表示用户点击的按钮...

    Extjs绚丽上传组件

    它提供了大量的组件和功能,包括表格、树形视图、图表、菜单、窗口等,以及一个强大的数据绑定系统,使得开发复杂的交互式用户界面变得更加便捷。在本案例中,我们将讨论的是ExtJS中的一个特定组件——上传组件,它...

    Extjs表单中的通用组件

    本文将重点介绍Extjs表单中的各种通用组件,包括文本框、单选按钮、多选按钮、下拉列表和日期选择器等,这些组件在实际开发中极为常见。 ### 文本框(TextField) 文本框是最基本的输入组件,允许用户输入文本数据...

    ExtJs 学习笔记 Hello World!第1/2页

    `Ext.MessageBox.alert`是ExtJS中一个方便的函数,可以用来显示消息框。它接受两个参数,分别代表标题和消息内容。此外,还有`Ext.Msg.alert`的简写形式。例如: ```javascript Ext.MessageBox.alert('标题', '弹出...

    Ext 开发指南 学习资料

    9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid 9.4. fisheye 9.5. 可以设置时间的日期控件 9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!...

    Jxstar系统管理手册V2.0.pdf

    这些界面控件基于ExtJs框架开发,保证了界面的规范性和性能。系统的所有功能页面均采用静态JS处理,有效降低了服务器的负担,同时提高了软件开发效率,规范了应用系统软件的界面,增强了系统的易用性。 1.2 基础...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    --也就是说生成的input的type不能是"submit",而这个限制在有些情况下是不可原谅的。 --我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...

Global site tag (gtag.js) - Google Analytics