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 ...
随机推荐
- 无法定位程序输入点_except_handler4_common于动态链接库msvcrt.dll
这是由于sp3加载的驱动造成的:只需要将C:\WINDOWS\system32\dwmapi.dll重新命名一下即可以解决. 可以调试程序当系统加载到“c:\Program Files\China M ...
- C# 接口命名规范
接口命名规范:1.大写约定PascalCasing:帕斯卡命名法,每个单词首字母大写应用场景:命名空间.类型.接口.方法.属性.事件.字段.枚举.枚举值eg:HtmlTag IOStream注意:两个 ...
- 快速搭建Hadoop及HBase分布式环境
本文旨在快速搭建一套Hadoop及HBase的分布式环境,自己测试玩玩的话ok,如果真的要搭一套集群建议还是参考下ambari吧,目前正在摸索该项目中.下面先来看看怎么快速搭建一套分布式环境. 准备 ...
- （转）44 道 JavaScript 难题
JavaScript Puzzlers原文 1. ["1", "2", "3"].map(parseInt) 答案:[1, NaN, N ...
- linux shell & bash
shell & bash shell指允许用户通过文本操作计算机的程序. interactive shell:从是否通过标准输入输出与用户进行交互的角度分为交互式shell(interacti ...
- JS——滚动条
1.核心思想与之前的拖拽盒子是一样的 2.完全将鼠标在盒子中的坐标给滚动条是错的,因为这样会使滚动条顶部立刻瞬间移动到鼠标位置 3.必须在鼠标按下事件时记住鼠标在滚动条内部的坐标,再将鼠标在盒子中的坐 ...
- CSS——background
背景经常用到以下属性: background-color: aliceblue; background-image: url('2017102601.png'); background-positio ...
- 转：selenium自动化脚本错误总结
https://blog.csdn.net/zxy987872674/article/details/53141118
- 大神所写的深度好文---Gradle 构建工具
什么是构建工具? 我们大家都知道 Gradle 是一种构建工具,那么什么是构建工具呢? 网上一大堆的文字解释我觉得很难理解,这里我以咱们 Android 开发来举个例子吧. 我们以前开发都是用 Ecl ...
- spring IOC bean间关系
1.0 继承关系 实体 package com.java.test5; import java.util.*; /** * @author nidegui * @create 2019-06-22 1 ...