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
<%@ 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
<%@ 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
时间： 2024-10-12 03:08:51