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 ...
随机推荐
- 鼠标单击到 img行的时候图片隐藏方案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java中的overload(方法的覆写)
方法覆写(overload)与方法的重载非常相似,它在 Java的继承中也有很重要的应用. 写程序可能会碰到下面的情况,在父类中已经实现的方法可能不够精确,不能满足子类 的需求.例如在前面的 Anim ...
- java 多线程并发系列之 生产者消费者模式的两种实现
在并发编程中使用生产者和消费者模式能够解决绝大多数并发问题.该模式通过平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度. 为什么要使用生产者和消费者模式 在线程世界里,生产者就是生产数据 ...
- Android studio & SDK的国内有效站点。
SDK.TOOLS的国内有效镜像节点: mirrors.zzu.edu.cn/android/repository/ 网上的地址只写了mirrors.zzu.edu.cn,有误,需要补齐后面的子目录才 ...
- JS——行内式注册事件
html中行内调用function的时候,是通过window调用的function,所以打印this等于打印window,所以在使用行内注册事件时务必传入参数this <!DOCTYPE htm ...
- Lazarus 1.44升级到1.6 UTF8处理发生变化了
首先这里真的要强调一下,由于Freepascal升级到3.0后,FPC的内部将整个代码处理由AnsiString改为了UTF8编码(RTL with default codepage UTF-8). ...
- Android之Fragment的优点和作用
一:什么是Fragment 碎片.片段.其目的是为了解决不同屏幕分辩率的动态和灵活UI设计.大屏幕如平板小屏幕如手机,平板电脑的设计使得其有更多的空间来放更多的UI组件,而多出来的空间存放UI使其会产 ...
- 通过PHP怎样取到android系统下apk应用的包名，版本号等信息
公司项目关系,要求在通过PHP解析android系统应用apk包内的一切可用的信息.比如说:APK包名,版本号,版本名,安装权限等一系列关于对应包的信息.通过google查找相关的解决方案,都没有找到 ...
- C# Winform 获得下拉框 选中的值
string PrintName = cmbPrinter.SelectedIndex.ToString(); PrintName = cmbPrinter.SelectedItem.ToString ...
- centos 设置 ip地址
linux设置ip,主要是修改/etc/sysconfig/network-scripts/ifcfg-** 里面的网卡配置文件,然后命令 service network restart 生效 自动获 ...