首页 > 代码库 > extjs_07_combobox&tree&chart
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="http://www.mamicode.com/extjs4.1/resources/css/ext-all.css"> <!-- 开发模式引入ext-all-debug.js,公布模式引入ext-all.js --> <script type="text/javascript" src="http://www.mamicode.com/extjs4.1/ext-all-debug.js"></script> <!-- 语言包 --> <script type="text/javascript" src="http://www.mamicode.com/extjs4.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { initData = http://www.mamicode.com/function() {"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="http://www.mamicode.com/extjs4.1/resources/css/ext-all.css"> <!-- 开发模式引入ext-all-debug.js。公布模式引入ext-all.js --> <script type="text/javascript" src="http://www.mamicode.com/extjs4.1/ext-all-debug.js"></script> <!-- 语言包 --> <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/extjs4.1/resources/css/ext-all.css"> <!-- 开发模式引入ext-all-debug.js,公布模式引入ext-all.js --> <script type="text/javascript" src="http://www.mamicode.com/extjs4.1/ext-all-debug.js"></script> <!-- 语言包 --> <script type="text/javascript" src="http://www.mamicode.com/extjs4.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var initData = http://www.mamicode.com/function() {//得到随机数据"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个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。