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 ...
随机推荐
- Zookeeper概念学习系列之zookeeper的节点
znode有两种类型: 临时节点(ephemeral node) 和 持久节点(persistent node). znode的类型在创建时确定并且之后不能再修改. 短暂znode的客户端会话结束 ...
- ASP.NET 之 Chart Control for .Net Framework
ps:曾经靠着这张图做了很多的图形报表
- MySQL关于存储过程
代码示例: 1.IN输入参数: delimiter // create PROCEDURE proc1(IN sid int) begin select * from student where id ...
- 给网站添加运行时间的JavaScript完整代码
function secondToDate(second) { if (!second) { return 0; } var time = new Array(0, 0, 0, 0, 0); if ( ...
- 新浪云虚拟机ftp链接显示失败问题
新浪云虚拟机ftp链接显示失败问题 测试是在局域网遇到的 域名解析可以ping有字节回复 账号密码也没有错误,但是链接一直出现 连接失败 拒接连接等问题 解决办法: 其实是局域网内的问题,这 ...
- 02--Tomcat总体结构分析一
注:此文章大部分参考大神文档,并且结合自身理解,补充了其他相关知识,谢绝转载. 大神原文地址链接:http://www.ibm.com/developerworks/cn/java/j-lo ...
- 解决Sql Server 日志满了，设置收缩
解决Sql Server 日志满了,设置收缩: --查看文件占用空间 . '文件大小(MB)',* from sysfiles; ALTER DATABASE SpyData SET RECOVERY ...
- 【VHDL】组合逻辑电路和时序逻辑电路的区别
简单的说,组合电路,没有时钟:时序电路,有时钟. ↓ 也就是说,组合逻辑电路没有记忆功能,而时序电路具有记忆功能. ↓ 在VHDL语言中,不完整条件语句对他们二者的影响分别是什么?组合逻辑中可能生成锁 ...
- Quartz实战
https://my.oschina.net/yinxiaoling/blog/542336?fromerr=s3ko7u33 Quartz实战 > 一.内存型(1) <bean name ...
- AcDbTable 类
Table 例子学习笔记在这个例子中,ARX向我们展示了ACDBTABLE类的一些基本操作方法,ACDBTABLE类是ACAD2005及其以后的产品,应该是说ACDBDATATABLE的升级产品,Ac ...