`
zccst
  • 浏览: 3322602 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS表单之下拉树

 
阅读更多
ExtJS表单之下拉树
作者:zccst

一、数据源
					var store_type = Ext.util.JSON.encode(o.store_type);
					var store_type_obj = eval( "(" + store_type + ")" );
					setStoreTreeByNode(store_type_obj);


二、展示
	Ext.QuickTips.init();
	var storetree = new Ext.tree.TreePanel({
		//el : "container",
		animate : true,
		title : "请点击选择",
		collapsible : true,
		enableDD : true,
		enableDrag : true,
		rootVisible : false,
		autoScroll : true,
		autoHeight : true,
		width : 150,
		lines : true
	});

	// 根节点
	var storeroot = new Ext.tree.TreeNode({
		id : "root",
		text : "根节点",
		checked : false
	});
	storetree.setRootNode(storeroot);
	
	//设置监听
	storetree.on('checkchange', function(node, checked) {
		node.expand();
		node.attributes.checked = checked;
		node.eachChild(function(child) {
			child.ui.toggleCheck(checked);
			child.attributes.checked = checked;
			child.fireEvent('checkchange', child,
					checked);
		});
	}, storetree);
	
	function setStoreTreeByNode(store_type_obj){
		var node = storeroot.appendChild(new Ext.tree.TreeNode({
			text : '存储机型',
			allowDrag : false,
			checked : false
		}));
		for(var i = 0; i < store_type_obj.length; i++){
			node.appendChild(new Ext.tree.TreeNode({
				text : store_type_obj[i].model,
				allowDrag : false,
				checked : false
			}));
		}
	}
	
	//下拉树
	var storeComboxWithTree = new Ext.form.ComboBox({  
		store:new Ext.data.SimpleStore({fields:[],data:[[]]}),  
		editable:false,  
		mode: 'local',  
		triggerAction:'all',  
		maxHeight: 240,  
		tpl: "<tpl for='.'><div style='height:240px'><div id='storetree'></div></div></tpl>",  
		selectedClass:'',  
		onSelect:Ext.emptyFn,
		emptyText:'请选择机型...'
	});
	storetree.on('click',function(node){
		storeComboxWithTree.setValue(node.text);
		storeComboxWithTree.collapse();
	});  
	storeComboxWithTree.on('expand',function(){  
		storetree.render('storetree');  
	});



三、获取选中的值
			var s = storetree.getChecked();
			var checked_s = new Array();
			for (var j = 0; j < s.length; j ++){
				checked_s.push(s[j].text);
			}
			//if(checked_s.length == 0){alert('选择不能为空');return false;}
			var str_s = checked_s.toString();


版本一:
var comboxWithTree = new Ext.form.ComboBox({   
        store:new Ext.data.SimpleStore({fields:[],data:[[]]}),   
        editable:false,   
        mode: 'local',   
        triggerAction:'all',   
        maxHeight: 200,   
        tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></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');  

版本二:
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: '模板根目录',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');   
    });  



另一个三级节点的实例

function setDepTreeByNode(obj){
		rootnode = new Ext.tree.TreeNode({
			text : '全部',
			allowDrag : false,
			checked : false
		});
		deproot.appendChild(rootnode);     //0级
		var tmpDep = "";
		var tmpPro = "";
		var tmpSer = "";
		var departnode  = null;
		var productnode = null;
		var servicenode = null;
		for( var i = 0; i < obj.length; i++){
			if(!tmpDep){
				tmpDep = obj[i].department;
				tmpPro = obj[i].product;
				tmpSer = obj[i].service;
			}
			
			// 仅执行一次
			if(departnode == null && productnode == null && servicenode == null){
				departnode = new Ext.tree.TreeNode({
					text : obj[i].department,
					allowDrag : false,
					checked : false
				});
				productnode = new Ext.tree.TreeNode({
					text : obj[i].product,
					allowDrag : false,
					checked : false
				});
				servicenode = new Ext.tree.TreeNode({
					text : obj[i].service,
					allowDrag : false,
					checked : false
				});
				rootnode.appendChild(departnode);       //一级
				departnode.appendChild(productnode);    //二级
				productnode.appendChild(servicenode);   //三级
				continue;//第一轮循环结束
			}
			
			// 追加二级节点
			if(obj[i].department == tmpDep){
				//追加三级节点
				if(obj[i].product == tmpPro){
					servicenode = new Ext.tree.TreeNode({
						text : obj[i].service,
						allowDrag : false,
						checked : false
					});
					productnode.appendChild(servicenode);//三级
					tmpSer = obj[i].service;
				}else{
					productnode = new Ext.tree.TreeNode({
						text : obj[i].product,
						allowDrag : false,
						checked : false
					});
					servicenode = new Ext.tree.TreeNode({
						text : obj[i].service,
						allowDrag : false,
						checked : false
					});
					departnode.appendChild(productnode);    //二级
					productnode.appendChild(servicenode);   //三级
					tmpPro = obj[i].product;
					tmpSer = obj[i].service;
				}
			}else{
				//追加一级节点
				departnode = new Ext.tree.TreeNode({
					text : obj[i].department,
					allowDrag : false,
					checked : false
				});
				productnode = new Ext.tree.TreeNode({
					text : obj[i].product,
					allowDrag : false,
					checked : false
				});
				servicenode = new Ext.tree.TreeNode({
					text : obj[i].service,
					allowDrag : false,
					checked : false
				});
				rootnode.appendChild(departnode);   //一级
				departnode.appendChild(productnode);    //二级
				productnode.appendChild(servicenode);//三级
				//更新当前值
				tmpDep = obj[i].department;
				tmpPro = obj[i].product;
				tmpSer = obj[i].service;
			}
		}
	}


select distinct * from (select department,product,service from service_list) a;



如果您觉得本文的内容对您的学习有所帮助,您可以微信:

分享到:
评论

相关推荐

    自定义ExtJS控件之下拉树和下拉表格附

    在ExtJS框架中,经常会使用到的下拉控件一般仅限于官方提供的下拉列表(***boBox),它对于基础的表单输入非常有用。然而,当需要实现更加复杂的用户交互时,例如在选择数据时拥有类似树形结构的下拉或者表格形式的...

    精通JS脚本之ExtJS框架.part2.rar

    7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...

    ExtJs详细介绍

    ExtJs的核心功能之一是与AJAX的结合。AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它允许在不重新加载整个页面的情况下,对网页的部分内容进行更新。ExtJs利用AJAX技术,使得用户...

    界面框架extjs学习笔记

    EXTJS的组件模型允许开发者创建复杂的用户界面,包括表格、表单、树形视图、图表等多种组件。通过事件监听、数据绑定等功能,开发者可以实现高度交互的应用程序。 总的来说,EXTJS是一个功能强大的前端框架,提供了...

    EXTJS

    1. **组件化**:EXTJS 的组件系统是其强大之处,包括按钮、表格、表单、面板、窗口等,几乎所有的UI元素都可以被看作是一个组件。 2. **响应式设计**:EXTJS 支持多种屏幕尺寸和设备,可以自适应地调整布局,为移动...

    ExtJs4.0官方版本

    ExtJS 4.0提供了一套丰富的组件库,包括表格、面板、表单、树形结构等,所有组件都可以动态创建和修改。这使得开发者可以构建高度交互和可配置的用户界面。 4. Store管理 Store是ExtJS 4中处理数据的主要对象,它...

    Extjs 性能优化 High Performance ExtJs

    表单提交是 Web 应用中常见的场景之一,正确处理表单提交不仅可以提升用户体验,还能显著改善性能。使用 `Ext.form.BasicForm` 的 `submit()` 方法进行表单提交前,应先判断表单是否已发生更改(使用 `isDirty()` ...

    Extjs3.0中文文档大全

    2. **组件库**:ExtJS 3.0包含了大量的UI组件,如按钮(Button)、表单(Form)、网格(Grid)、树形视图(Tree)和菜单(Menu)。每个组件都有详细的API参考,包括属性、方法、事件和配置项。 3. **数据管理**:...

    ExtJs教程_完整版

    相比之下,ExtJS提供了更加完善的API和更真实的控件集,这使得开发者可以构建出类似桌面应用程序的Web应用。 **1.3 版本演变** - **1.x 到 2.x**:这是ExtJS的重大更新之一,涉及组件的重命名、新增组件等重大变化...

    EXTJS 5.1 Examples

    这些示例涵盖了EXTJS的基本使用方法到高级特性,是学习EXTJS的重要资源之一。 #### 二、如何正确访问EXTJS 5.1 Examples 对于初次接触EXTJS 5.1或长时间未使用的开发者来说,可能会遇到一些访问上的问题。例如,...

    extjs3.0中文API

    1. **组件系统**:ExtJS 3.0包含了大量的UI组件,如按钮(Button)、表格(Grid)、面板(Panel)、表单(Form)等,这些组件可以通过配置项灵活定制,以满足各种需求。 2. **布局管理**:布局管理器(Layout ...

    ExtJs API 3.1.1 3.3.1 2.X

    3.1.1版本的API是英文版,它涵盖了ExtJs的核心功能和组件,包括布局管理、表单元素、数据绑定、事件处理、菜单和工具提示等。在这一版本中,开发者可以学习如何创建基本的组件,如面板(Panel)、窗口(Window)和...

    ExtJS中文手册.pdf

    - **核心组件**:Element是ExtJS的核心组成部分之一,它是所有其他组件的基础。通过Element,开发者可以直接操作DOM元素。 - **操作DOM**:ExtJS提供了简便的方法来获取DOM节点,并且支持链式调用等高级特性,这大大...

    SpringMVC+ExtJs4.2实例

    - `src/main/webapp`:Web应用的根目录,包括`WEB-INF`下的SpringMVC配置、`js`目录下的ExtJs4.2代码、`css`和`images`等静态资源。 - `web.xml`:Web应用的部署描述符,配置DispatcherServlet。 通过这个实例,...

    EXtjs 图片批量上传

    本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...

    ext(extJS) 3.0 中文API CHM版 ext中文帮助文档

    1. **组件系统**:EXTJS的组件化设计是其强大之处,包括各种常见的UI组件如表格(Grid)、表单(Form)、面板(Panel)、窗口(Window)等。这些组件可组合、嵌套,易于构建复杂的用户界面。 2. **布局管理**:...

    extjs图标,包含extjs里面的所有基本用过的图标,当做学习之用

    ExtJS是一个功能丰富的JavaScript UI框架,它提供了一整套组件化的前端开发解决方案,包括表格、树形视图、表单、图表等多种组件。图标作为UI设计的重要组成部分,能有效提升用户界面的可识别性和用户体验。 这个...

    跟我一起学extjs5前20节的代码

    1. **EXTJS5核心概念**:EXTJS5的核心是组件化,它提供了一套完整的组件库,包括表格、树形视图、图表、表单元素等。这些组件可以灵活组合,构建出复杂的用户界面。 2. **环境搭建**:描述中提到需要根据前几节的...

    ExtJS实用开发指南

    2. **丰富的UI组件**:ExtJS提供了一系列预构建的UI组件,如表格、树形视图、网格、表单元素等,这些组件不仅易于使用,而且高度可定制。 3. **高性能**:通过优化的数据处理技术和异步加载策略,ExtJS确保了良好的...

Global site tag (gtag.js) - Google Analytics