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
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="">
<%@ 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
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
<%@ 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的更多相关文章
- web项目中js加载慢问题解决思路
最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: < ...
- gearman kubernetes 运行
备注: 使用的是golang 版本的实现,同时官方也提供了一个k8s 的helm 部署charts,我 没有使用这个helm,而是通过kompose 这个工具直接转换的 docker-compose ...
- Atitit 编程语言知识点tech tree v2 attilax大总结
Atitit 编程语言知识点tech tree v2 attilax大总结 大分类中分类小分类知识点原理与规范具体实现(javac#里面的实现phpjsdsl(自己实现其他语言实现 类与对象实现对象实 ...
- 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- easyUi中的一段漂亮代码之将list转换成tree.
function convert(rows){ function exists(rows, parentId){ for(var i=0; i<rows.length; i++){ if (ro ...
- suffix tree
文章出处:http://www.cnblogs.com/snowberg/archive/2011/10/21/2468588.html 3 What is a Suffix Tree Suf ...
- echarts tree 树型图层级距离设置
网上找了半天,没有找到设置层级距离的属性,默认是自动适应的,无奈只能改源码,分享出来希望可以帮到有相同需求的... 上github下载echarts源码包,打开src=>chart=>tr ...
- 采用Operator-sdk轻松将helm chart转为Operator
去年就接触Operator,从Oracle发布的WebLogic Operator到mySQL Operator,构建的源码一大堆,但感觉一直缺少合适的开发框架能够避免复杂性快速生成, 随着技术的日益 ...
- leetcode difficulty and frequency distribution chart
Here is a difficulty and frequency distribution chart for each problem (which I got from the Interne ...
随机推荐
- [转]Linux下paste命令详解
转自:http://blog.csdn.net/andy572633/article/details/7214126 paste单词意思是粘贴.该命令主要用来将多个文件的内容合并,与cut命令完成的功 ...
- 2 我们的C#学习方法
在这里我们借鉴了一种行之有效的学习编程语言的方法,并在此基础上进行了相应的改良.我们在培训新人中使用后,发现这种学习方法是非常有效的. 你通过做以下几个步骤来一步步学习C#语言. 1. 搞懂每一个我们 ...
- 属性字符串（NSAttributedString）的简单应用
属性字符串NSAttributedString 可以对字符串附加格式信息,由于对于对不同文本片段使用不同的格式,属性字符串类特别合适. IOS 6中对样式文本有了大改善,大部分主要的UIKit控件都允 ...
- [ USACO 2007 OPEN ] Dining
\(\\\) \(Description\) 有\(N\)头牛,\(F\)种食物,\(D\)种饮料,每种食物和饮料只有一份. 现在已知每头牛可以吃哪些食物,可以喝哪些饮料,问最多可以让多少头牛可以同时 ...
- Jupyter(Ipython) Notebook 入门
upyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言. 一般用来编写漂亮的交互式文档. 文学编程的读者不是机器,而是人. 我们 ...
- mysql GTID主从复制（主库在线，添加新丛库）
要求: 1. 主库上线,主库不停止服务的前提下做主从复制 2. 新添加一个丛库 操作: 1. 在主库导出数据(主库正常运行): 2. 将 ...
- 2016.01.07 DOM笔记（二） DOM节点
node节点属性 nodeName属性 oneBox= document.getElementsById('box');var s = oneBox.nodeName; //nodeName与tag ...
- 回顾Google IO 2016 -Keynote【图解】
Google IO大会倒计时进行中~~ 两名演奏者在使用高空“古筝”. 最后5秒倒计时~~~~全场轰动~ 倒计时结束,IO大会正式开始.屏幕中,一个人把纯白的唱片放入唱片机中. 然后欢快的音乐响起,台 ...
- Discuz 取消 应用更新提醒 方法
管理员每次登录论坛,遇有后台没有更新的应用都会有应用更新提醒提醒,而且关了还会继续弹出,问题是有些应用原来我装了免费的,新版本推出来了是 要收费的,我不想要更新,或者是即使有免费的新版本了,而我只要使 ...
- 安卓手机安装charles安全证书
本次安装使用小米mix2为例. 手机浏览器上安装: 第一种: 1.首先 设置好手机的charles代理 172.16.xxx.xxx 8888 2.要使用 打开非自带浏览器(夸克/QQ/UC手 ...