extjs_07_combobox&tree&chart

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&tree&chart,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。