1.combobox

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.  
  7. <title>My JSP 'index.jsp' starting page</title>
  8.  
  9. <!-- 引入样式。能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
  10. <link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
  11.  
  12. <!-- 开发模式引入ext-all-debug.js，公布模式引入ext-all.js -->
  13. <script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
  14.  
  15. <!-- 语言包 -->
  16. <script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
  17.  
  18. <script type="text/javascript">
  19. 	Ext.onReady(function() {
  20. 		initData = function() {
  21. 			var data = [];
  22. 			for ( var i = 0; i < 10; i++) {
  23. 				data.push({
  24. 					id : i,
  25. 					value : Math.floor(Math.random() * 100)
  26. 				})
  27. 			}
  28. 			return data;
  29. 		}
  30. 		var store = Ext.create("Ext.data.JsonStore", {
  31. 			fields : [ "id", "value" ],
  32. 			data : initData()
  33. 		})
  34. 		var comboBox = Ext.create("Ext.form.field.ComboBox", {
  35. 			fieldLabel : "combobox演示样例",
  36. 			store : store,
  37. 			queryMode : "local",
  38. 			displayField : "value",
  39. 			valueField : "id",
  40. 			emptyText : "--请选择--",
  41. 			renderTo : Ext.getBody(),
  42. 			listeners : {
  43. 				"select" : function() {
  44. 					Ext.Msg.alert("提示", "点击事件 ");
  45. 				}
  46. 			}
  47. 		});
  48. 	});
  49. </script>
  50.  
  51. </head>
  52.  
  53. <body>
  54. 	<br>
  55. </body>
  56. </html>

2.tree

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.  
  7. <title>My JSP 'index.jsp' starting page</title>
  8.  
  9. <!-- 引入样式。能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
  10. <link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
  11.  
  12. <!-- 开发模式引入ext-all-debug.js。公布模式引入ext-all.js -->
  13. <script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
  14.  
  15. <!-- 语言包 -->
  16. <script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
  17.  
  18. <script type="text/javascript">
  19. 	Ext.onReady(function() {
  20. 		var treeStore = Ext.create("Ext.data.TreeStore", {
  21. 			root : {
  22. 				text : "根节点",
  23. 				expanded : true,//是否展开
  24. 				children : [ {
  25. 					text : "子节点1",
  26. 					leaf : true
  27. 				}, {
  28. 					text : "子节点2",
  29. 					leaf : false,//是否为叶子节点
  30. 					expanded : true,
  31. 					children : [ {
  32. 						text : "子节点2-1",
  33. 						leaf : true
  34. 					}, {
  35. 						text : "子节点2-2",
  36. 						leaf : true
  37. 					} ]
  38. 				}, {
  39. 					text : "子节点3",
  40. 					leaf : true
  41. 				} ]
  42. 			}
  43. 		});
  44. 		var tree = Ext.create("Ext.tree.Panel", {
  45. 			store : treeStore
  46. 		//renderTo : Ext.getBody()//假设用这个就不用创建下边的window来显示tree
  47. 		});
  48. 		var window = Ext.create("Ext.window.Window", {
  49. 			title : "tree演示",
  50. 			width : 300,
  51. 			height : 400,
  52. 			layout : "fit",
  53. 			items : tree,
  54. 			tbar : {
  55. 				xtype : "toolbar",
  56. 				items : [ {
  57. 					xtype : "button",
  58. 					text : "新增节点",
  59. 					listeners : {
  60. 						click : function() {
  61. 							var selNodes = tree.getSelectionModel().getSelection();
  62. 							if (selNodes.length == 0) {
  63. 								Ext.Msg.alert("提示", "请选择节点");
  64. 								return;
  65. 							}
  66. 							if (selNodes.length == 1) {
  67. 								selNodes[0].data["leaf"] = false;
  68. 								selNodes[0].data["expanded"] = true;
  69. 								selNodes[0].updateInfo();
  70. 								selNodes[0].appendChild({
  71. 									text : "新增节点",
  72. 									leaf : true
  73. 								});
  74. 							}
  75. 						}
  76. 					}
  77. 				}, {
  78. 					xtype : "button",
  79. 					text : "删除节点",
  80. 					listeners : {
  81. 						click : function() {
  82. 							var selNodes = tree.getSelectionModel().getSelection();
  83. 							if (selNodes.length == 0) {
  84. 								Ext.Msg.alert("提示", "请选择节点");
  85. 								return;
  86. 							}
  87. 							selNodes[0].remove();
  88. 						}
  89. 					}
  90. 				} ]
  91. 			}
  92. 		});
  93. 		window.show();
  94. 	});
  95. </script>
  96.  
  97. </head>
  98.  
  99. <body>
  100. 	<br>
  101. </body>
  102. </html>

3.chart

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.  
  7. <title>My JSP 'index.jsp' starting page</title>
  8.  
  9. <!-- 引入样式。能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
  10. <link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
  11.  
  12. <!-- 开发模式引入ext-all-debug.js，公布模式引入ext-all.js -->
  13. <script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
  14.  
  15. <!-- 语言包 -->
  16. <script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
  17.  
  18. <script type="text/javascript">
  19. 	Ext.onReady(function() {
  20. 		var initData = function() {//得到随机数据
  21. 			var data = [];
  22. 			for ( var i = 0; i < 12; i++) {
  23. 				data.push({
  24. 					monthName : Ext.Date.monthNames[i],
  25. 					data1 : Math.floor(Math.random() * 100),
  26. 					data2 : Math.floor(Math.random() * 100),
  27. 					data3 : Math.floor(Math.random() * 100),
  28. 					data4 : Math.floor(Math.random() * 100),
  29. 					data5 : Math.floor(Math.random() * 100),
  30. 					data6 : Math.floor(Math.random() * 100)
  31. 				});
  32. 			}
  33. 			return data;
  34. 		};
  35.  
  36. 		var store = Ext.data.Store({
  37. 			fields : [ "monthName", "data1", "data2", "data3", "data4", "data5", "data6" ],
  38. 			data : initData()
  39. 		});
  40.  
  41. 		var chart = Ext.create("Ext.chart.Chart", {
  42. 			store : store,
  43. 			legend : {//在底部显示图例
  44. 				position : "bottom"
  45. 			},
  46. 			axes : [//定义显示图表数据点边界的线
  47. 			{
  48. 				type : "Numeric",
  49. 				position : "left",
  50. 				fields : [ "data1", "data2", "data3", "data4", "data5", "data6" ],
  51. 				title : "销量"
  52. 			}, {
  53. 				type : "Category",
  54. 				position : "bottom",
  55. 				fields : [ "monthName" ],
  56. 				title : "月份"
  57. 			} ],
  58. 			series : [//配置序列
  59. 			{
  60. 				type : "area",//设置类型
  61. 				axis : "left",
  62. 				xField : [ "monthName" ],
  63. 				yField : [ "data1", "data2", "data3", "data4", "data5", "data6" ],
  64. 				title : [ "三星", "苹果", "htc", "zet", "华为", "Nokia" ],
  65. 				tips : {
  66. 					trackMouse : true,//当鼠标移动到目标元素上时，有高速提示框紧跟着鼠标
  67. 					renderer : function(storeItem, item) {
  68. 						this.setTitle("信息提示");
  69. 					}
  70. 				}
  71. 			} ]
  72. 		});
  73.  
  74. 		var window = Ext.create("Ext.window.Window", {
  75. 			title : "Chart演示",
  76. 			width : 600,
  77. 			height : 400,
  78. 			layout : "fit",
  79. 			items : chart
  80. 		});
  81. 		window.show();
  82. 	})
  83. </script>
  84.  
  85. </head>
  86.  
  87. <body>
  88. 	<br>
  89. </body>
  90. </html>

extjs_07_combobox&amp;tree&amp;chart的更多相关文章

  1. web项目中js加载慢问题解决思路

    最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...

  2. gearman kubernetes 运行

    备注: 使用的是golang 版本的实现,同时官方也提供了一个k8s 的helm 部署charts,我 没有使用这个helm,而是通过kompose 这个工具直接转换的 docker-compose ...

  3. Atitit 编程语言知识点tech tree v2 attilax大总结

    Atitit 编程语言知识点tech tree v2 attilax大总结 大分类中分类小分类知识点原理与规范具体实现(javac#里面的实现phpjsdsl(自己实现其他语言实现 类与对象实现对象实 ...

  4. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  5. easyUi中的一段漂亮代码之将list转换成tree.

    function convert(rows){ function exists(rows, parentId){ for(var i=0; i<rows.length; i++){ if (ro ...

  6. suffix tree

    文章出处:http://www.cnblogs.com/snowberg/archive/2011/10/21/2468588.html   3   What is a Suffix Tree Suf ...

  7. echarts tree 树型图层级距离设置

    网上找了半天,没有找到设置层级距离的属性,默认是自动适应的,无奈只能改源码,分享出来希望可以帮到有相同需求的... 上github下载echarts源码包,打开src=>chart=>tr ...

  8. 采用Operator-sdk轻松将helm chart转为Operator

    去年就接触Operator,从Oracle发布的WebLogic Operator到mySQL Operator,构建的源码一大堆,但感觉一直缺少合适的开发框架能够避免复杂性快速生成, 随着技术的日益 ...

  9. leetcode difficulty and frequency distribution chart

    Here is a difficulty and frequency distribution chart for each problem (which I got from the Interne ...

随机推荐

  1. [Android]异常7-Error:Configuration with name 'default' not found.

    背景:使用SVN更新代码,运行出现 异常原因: 可能一>缺少Modules 解决办法有: 解决一>Android Studio切换为Project,settings.gradle中引用和现 ...

  2. html——导航demo

    通过行内块.伪类对导航栏进行设置 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. 网站Gzip压缩

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:启用网站GZI ...

  4. [Windows Server 2008] 安装IIS7.5及FTP

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:安装IISII ...

  5. 10、scala面向对象编程之Trait

    1.  将trait作为接口使用 2.trait中定义具体方法 3.trait定义具体字段 4.trait中定义抽象字段 5.为实例对象混入trait 6.trait调用链 7.在trait中覆盖抽象 ...

  6. graphite 绘图工具

    graphite 绘图工具

  7. centos设置ssh安全只允许用户从指定的IP登陆

    1.编辑文件 /etc/ssh/sshd_config vi /etc/ssh/sshd_config 2.root用户只允许在如下ip登录 AllowUsers root@203.212.4.117 ...

  8. SpringMVC与MyBatis整合方法

    一.springmvc+mybaits的系统架构: 第一步:整合dao层 mybatis和spring整合,通过spring管理mapper接口. 使用mapper的扫描器自动扫描mapper接口在s ...

  9. recreate dbcontrol on database 11.2.0.1 using emca

    [oracle@osb ~]$ env | grep ORA ORACLE_SID=ACE ORACLE_BASE=/oracle ORACLE_TERM=xterm ORACLE_HOME=/ora ...

  10. array_map 等php回调函数使用问题(关联数组下标获取)

    前言:我自己用此类回调函数,来替代 foreach 纯粹是用为代码的简洁性,让代码更好看.(我有点代码小洁癖~) 1.array_reduce 当迭代处理一个一维索引数组时,在回调函数内是无法获取到当 ...