码迷,mamicode.com
首页 > Web开发 > 详细

extjs_07_combobox&tree&chart

时间:2017-05-29 18:23:11      阅读:336      评论:0      收藏:0      [点我收藏+]

标签:[]   tran   width   term   idt   root   too   fit   .com   

1.combobox

技术分享

技术分享

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP ‘index.jsp‘ starting page</title>

<!-- 引入样式。能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">

<!-- 开发模式引入ext-all-debug.js,公布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>

<!-- 语言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
	Ext.onReady(function() {
		initData = function() {
			var data = [];
			for ( var i = 0; i < 10; i++) {
				data.push({
					id : i,
					value : Math.floor(Math.random() * 100)
				})
			}
			return data;
		}
		var store = Ext.create("Ext.data.JsonStore", {
			fields : [ "id", "value" ],
			data : initData()
		})
		var comboBox = Ext.create("Ext.form.field.ComboBox", {
			fieldLabel : "combobox演示样例",
			store : store,
			queryMode : "local",
			displayField : "value",
			valueField : "id",
			emptyText : "--请选择--",
			renderTo : Ext.getBody(),
			listeners : {
				"select" : function() {
					Ext.Msg.alert("提示", "点击事件 ");
				}
			}
		});
	});
</script>

</head>

<body>
	<br>
</body>
</html>


2.tree

技术分享

技术分享

技术分享

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP ‘index.jsp‘ starting page</title>

<!-- 引入样式。能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">

<!-- 开发模式引入ext-all-debug.js。公布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>

<!-- 语言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
	Ext.onReady(function() {
		var treeStore = Ext.create("Ext.data.TreeStore", {
			root : {
				text : "根节点",
				expanded : true,//是否展开
				children : [ {
					text : "子节点1",
					leaf : true
				}, {
					text : "子节点2",
					leaf : false,//是否为叶子节点
					expanded : true,
					children : [ {
						text : "子节点2-1",
						leaf : true
					}, {
						text : "子节点2-2",
						leaf : true
					} ]
				}, {
					text : "子节点3",
					leaf : true
				} ]
			}
		});
		var tree = Ext.create("Ext.tree.Panel", {
			store : treeStore
		//renderTo : Ext.getBody()//假设用这个就不用创建下边的window来显示tree
		});
		var window = Ext.create("Ext.window.Window", {
			title : "tree演示",
			width : 300,
			height : 400,
			layout : "fit",
			items : tree,
			tbar : {
				xtype : "toolbar",
				items : [ {
					xtype : "button",
					text : "新增节点",
					listeners : {
						click : function() {
							var selNodes = tree.getSelectionModel().getSelection();
							if (selNodes.length == 0) {
								Ext.Msg.alert("提示", "请选择节点");
								return;
							}
							if (selNodes.length == 1) {
								selNodes[0].data["leaf"] = false;
								selNodes[0].data["expanded"] = true;
								selNodes[0].updateInfo();
								selNodes[0].appendChild({
									text : "新增节点",
									leaf : true
								});
							}
						}
					}
				}, {
					xtype : "button",
					text : "删除节点",
					listeners : {
						click : function() {
							var selNodes = tree.getSelectionModel().getSelection();
							if (selNodes.length == 0) {
								Ext.Msg.alert("提示", "请选择节点");
								return;
							}
							selNodes[0].remove();
						}
					}
				} ]
			}
		});
		window.show();
	});
</script>

</head>

<body>
	<br>
</body>
</html>


3.chart

技术分享

技术分享

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP ‘index.jsp‘ starting page</title>

<!-- 引入样式。能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">

<!-- 开发模式引入ext-all-debug.js,公布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>

<!-- 语言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
	Ext.onReady(function() {
		var initData = function() {//得到随机数据
			var data = [];
			for ( var i = 0; i < 12; i++) {
				data.push({
					monthName : Ext.Date.monthNames[i],
					data1 : Math.floor(Math.random() * 100),
					data2 : Math.floor(Math.random() * 100),
					data3 : Math.floor(Math.random() * 100),
					data4 : Math.floor(Math.random() * 100),
					data5 : Math.floor(Math.random() * 100),
					data6 : Math.floor(Math.random() * 100)
				});
			}
			return data;
		};

		var store = Ext.data.Store({
			fields : [ "monthName", "data1", "data2", "data3", "data4", "data5", "data6" ],
			data : initData()
		});

		var chart = Ext.create("Ext.chart.Chart", {
			store : store,
			legend : {//在底部显示图例
				position : "bottom"
			},
			axes : [//定义显示图表数据点边界的线
			{
				type : "Numeric",
				position : "left",
				fields : [ "data1", "data2", "data3", "data4", "data5", "data6" ],
				title : "销量"
			}, {
				type : "Category",
				position : "bottom",
				fields : [ "monthName" ],
				title : "月份"
			} ],
			series : [//配置序列
			{
				type : "area",//设置类型
				axis : "left",
				xField : [ "monthName" ],
				yField : [ "data1", "data2", "data3", "data4", "data5", "data6" ],
				title : [ "三星", "苹果", "htc", "zet", "华为", "Nokia" ],
				tips : {
					trackMouse : true,//当鼠标移动到目标元素上时,有高速提示框紧跟着鼠标
					renderer : function(storeItem, item) {
						this.setTitle("信息提示");
					}
				}
			} ]
		});

		var window = Ext.create("Ext.window.Window", {
			title : "Chart演示",
			width : 600,
			height : 400,
			layout : "fit",
			items : chart
		});
		window.show();
	})
</script>

</head>

<body>
	<br>
</body>
</html>


extjs_07_combobox&amp;tree&amp;chart

标签:[]   tran   width   term   idt   root   too   fit   .com   

原文地址:http://www.cnblogs.com/wzjhoutai/p/6918493.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!