- 浏览: 3322602 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
ExtJS表单之下拉树
作者:zccst
一、数据源
二、展示
三、获取选中的值
版本一:
版本二:
另一个三级节点的实例
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
作者: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 ajax request 设置超时时间
2012-05-03 23:32 10073作者:zccst 查了一下资料,设置超时时间有好几种情况 ... -
ExtJS之GridPanel细分功能
2012-01-30 18:45 985zccst整理 二、 一、将结果分组展示 表格数据分组: ... -
ExtJS之EditorGridPanel
2011-12-28 18:01 7229作者:zccst 之前大多用Ext.grid.GridPan ... -
ExtJS正确的学习方式
2011-12-28 15:53 1274ExtJS与其他的技术稍微不同的是需要查手册,而不是从网上搜。 ... -
ExtJS三级联动菜单
2011-12-15 18:04 6089一、前端js代码 // JavaScript Docume ... -
ExtJS之Store
2011-11-09 18:17 20072据目前所知:Store至少分为两类,一个是SimpleStor ... -
ExtJS表单之一个实例
2011-11-08 14:32 5385作者:zccst 一个实例, ... -
ExtJS表单之复选框CheckboxGroup展示与取值
2011-11-08 14:23 54023版本一 复选框的值都是 ... -
ExtJS之xtype的意义
2011-11-02 14:21 1619xtype:在EXTJS的可视化组件部署中的一种机制,即通过指 ... -
ExtJS面板
2011-11-02 12:13 1428面板的定义与多种面板的区别 一、Panel var panel ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2011-11-02 11:48 1021Ext中的get、getDom、getCmp、getBody、 ... -
ExtJS开发环境搭建
2011-06-20 14:38 1342需要注意的事项: 1,引入extjs不是引入ext-base ...
相关推荐
在ExtJS框架中,经常会使用到的下拉控件一般仅限于官方提供的下拉列表(***boBox),它对于基础的表单输入非常有用。然而,当需要实现更加复杂的用户交互时,例如在选择数据时拥有类似树形结构的下拉或者表格形式的...
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的核心功能之一是与AJAX的结合。AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它允许在不重新加载整个页面的情况下,对网页的部分内容进行更新。ExtJs利用AJAX技术,使得用户...
EXTJS的组件模型允许开发者创建复杂的用户界面,包括表格、表单、树形视图、图表等多种组件。通过事件监听、数据绑定等功能,开发者可以实现高度交互的应用程序。 总的来说,EXTJS是一个功能强大的前端框架,提供了...
1. **组件化**:EXTJS 的组件系统是其强大之处,包括按钮、表格、表单、面板、窗口等,几乎所有的UI元素都可以被看作是一个组件。 2. **响应式设计**:EXTJS 支持多种屏幕尺寸和设备,可以自适应地调整布局,为移动...
ExtJS 4.0提供了一套丰富的组件库,包括表格、面板、表单、树形结构等,所有组件都可以动态创建和修改。这使得开发者可以构建高度交互和可配置的用户界面。 4. Store管理 Store是ExtJS 4中处理数据的主要对象,它...
表单提交是 Web 应用中常见的场景之一,正确处理表单提交不仅可以提升用户体验,还能显著改善性能。使用 `Ext.form.BasicForm` 的 `submit()` 方法进行表单提交前,应先判断表单是否已发生更改(使用 `isDirty()` ...
2. **组件库**:ExtJS 3.0包含了大量的UI组件,如按钮(Button)、表单(Form)、网格(Grid)、树形视图(Tree)和菜单(Menu)。每个组件都有详细的API参考,包括属性、方法、事件和配置项。 3. **数据管理**:...
相比之下,ExtJS提供了更加完善的API和更真实的控件集,这使得开发者可以构建出类似桌面应用程序的Web应用。 **1.3 版本演变** - **1.x 到 2.x**:这是ExtJS的重大更新之一,涉及组件的重命名、新增组件等重大变化...
这些示例涵盖了EXTJS的基本使用方法到高级特性,是学习EXTJS的重要资源之一。 #### 二、如何正确访问EXTJS 5.1 Examples 对于初次接触EXTJS 5.1或长时间未使用的开发者来说,可能会遇到一些访问上的问题。例如,...
1. **组件系统**:ExtJS 3.0包含了大量的UI组件,如按钮(Button)、表格(Grid)、面板(Panel)、表单(Form)等,这些组件可以通过配置项灵活定制,以满足各种需求。 2. **布局管理**:布局管理器(Layout ...
3.1.1版本的API是英文版,它涵盖了ExtJs的核心功能和组件,包括布局管理、表单元素、数据绑定、事件处理、菜单和工具提示等。在这一版本中,开发者可以学习如何创建基本的组件,如面板(Panel)、窗口(Window)和...
- **核心组件**:Element是ExtJS的核心组成部分之一,它是所有其他组件的基础。通过Element,开发者可以直接操作DOM元素。 - **操作DOM**:ExtJS提供了简便的方法来获取DOM节点,并且支持链式调用等高级特性,这大大...
- `src/main/webapp`:Web应用的根目录,包括`WEB-INF`下的SpringMVC配置、`js`目录下的ExtJs4.2代码、`css`和`images`等静态资源。 - `web.xml`:Web应用的部署描述符,配置DispatcherServlet。 通过这个实例,...
本教程将深入探讨如何在ExtJS中实现图片的批量上传功能,以及与之相关的批量删除操作。 首先,批量上传图片的核心是利用HTML5的File API,它允许用户在不离开当前页面的情况下读取、处理和上传本地文件。在ExtJS中...
1. **组件系统**:EXTJS的组件化设计是其强大之处,包括各种常见的UI组件如表格(Grid)、表单(Form)、面板(Panel)、窗口(Window)等。这些组件可组合、嵌套,易于构建复杂的用户界面。 2. **布局管理**:...
ExtJS是一个功能丰富的JavaScript UI框架,它提供了一整套组件化的前端开发解决方案,包括表格、树形视图、表单、图表等多种组件。图标作为UI设计的重要组成部分,能有效提升用户界面的可识别性和用户体验。 这个...
1. **EXTJS5核心概念**:EXTJS5的核心是组件化,它提供了一套完整的组件库,包括表格、树形视图、图表、表单元素等。这些组件可以灵活组合,构建出复杂的用户界面。 2. **环境搭建**:描述中提到需要根据前几节的...
2. **丰富的UI组件**:ExtJS提供了一系列预构建的UI组件,如表格、树形视图、网格、表单元素等,这些组件不仅易于使用,而且高度可定制。 3. **高性能**:通过优化的数据处理技术和异步加载策略,ExtJS确保了良好的...