10、ExtJS入门教程【学习笔记】

最新推荐文章于 2023-03-18 15:33:57 发布

DarrenMJ

最新推荐文章于 2023-03-18 15:33:57 发布

阅读量750

点赞数

本文链接：https://blog.csdn.net/DarrenMJ/article/details/50952162

版权

ExtJs开发专栏收录该内容

21 篇文章 2 订阅

订阅专栏

【学习笔记】ExtJS入门教程
①Demo 1 Panel
------------------
<head>
<title>ExtDemoPanel</title>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title: "DarrenMJ",
width:300,
height:300,
html:"Panel test"
});
});
</script>
</head>
----------------------
②Demo 2 tabPanel
-------
<head>
<title>ExtDemotabPanel</title>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myPanel = new Ext.TabPanel({
renderTo:Ext.getBody(),
width:400,
height:150,
activeTab:0,
items:[
new Ext.Panel({
title: "DarrenMJ-1",
height:30,
html:"DarrenMJ-1"
}),new Ext.Panel({
title: "DarrenMJ-2",
height:30,
html:"DarrenMJ-2"
}),new Ext.Panel({
title: "DarrenMJ-3",
height:30,
html:"DarrenMJ-3"
})
]
});
});
</script>
</head>
------------------------------
解决Ext页面中文乱码问题
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
或者
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
------------------------------
③Demo 3 PanelUp
-------------
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>ExtDemoPanelUp</title>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title: "面板头部header",
width:300,
height:300,
html:"<h1>面板主区域</h1>",
tbar:[{
text:"顶部工具栏TopToolbar"
}],
bbar:[{
text:"底部工具栏bottomToolbar"
}],
buttons:[{
text:"按钮位于footer"
}]

});
});
</script>
</head>
------------------------------
④Demo 4 PanelXtype
---------
<head>
<title>ExtDemoPanel</title>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title: "面板头部header",
width:300,
height:300,
items:[{
xtype:"htmleditor"
}]
});
});
</script>
</head>
------------
Ext.onReady(function(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title: "面板头部header",
width:300,
height:300,
items:[{
xtype:"htmleditor"
},{
xtype:"htmleditor"
}
]
});
});
--------------------------------------
⑤Demo 5 PanelLayout
【column 列】
------------------
<head>
<title>ExtDemoPanelLayout</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title: "PanelLayout",
width:300,
height:300,
layout:"column",
items:[
{
columnWidth:0.5,
title:"面板1"
},{
columnWidth:0.5,
title:"面板2"
}]
});
});
</script>
</head>
---------------------------------------------------------------
⑥Demo 6 PanelBorder/Viewport
【border 边】
【viewport 视图】
------------------
<head>
<title>ExtDemoviewport</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:"border",
renderTo:Ext.getBody(),
title: "DarrenMJ",

items:[{
title:"north",
region:"north",
split:true,
border:true,
collapsible:true,
height:100,
minSize:100,
maxSize:120
},{
title:"south",
region:"south",
split:true,
border:true,
collapsible:true,
height:100,
minSize:100,
maxSize:120
},{
title:"east",
region:"east",
split:true,
border:true,
collapsible:true,
width:120,
minSize:120,
maxSize:200
},{
title:"west",
region:"west",
split:true,
border:true,
collapsible:true,
width:120,
minSize:120,
maxSize:200
},{
title:"center",
region:"center",
split:true,
border:true,
collapsible:true
}]
});
});
</script>
</head>
---------------------------------------------------------
⑦Demo 7 PanelTable
【rowspan：行】
【colspan：列】
----------------------
<head>
<title>ExtDemoPanel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myPanel = new Ext.Panel({
renderTo:Ext.getBody(),
title: "表格组件",
width:500,
height:200,
layout:"table",
layoutConfig:{
columns:3
},
items:[{
title:"子元素1",
html:"这是子元素1的内容",
rowspan:2,
height:100
},{
title:"子元素2",
html:"这是子元素2的内容",
colspan:2
},{
title:"子元素3",
html:"这是子元素3的内容"
},{
title:"子元素4",
html:"这是子元素4的内容"
}]
});
});
</script>
</head>
---------------------------
⑧Demo 8 Grid
表格控件：表格有类Ext.grid.GridPanel定义，继承自Panel，其Xtype为grid。
表格Grid必须包含列定义信息，并指定表格的【数据存储器】Store。
表格的列信息由类Ext.grid.ColumnModel定义，而表格的数据存储器由Ext.data.Store定义。
数据存储器根据解析的数据不同分为JsonStore、SimpleStore、GroupingStore等。
----------
<head>
<title>ExtDemoGridPanel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">

Ext.onReady(function(){
/* 定义列 */
var cm = new Ext.grid.ColumnModel([
{header:"编号",dataIndex:"id",width:200},
{header:"名称",dataIndex:"name",width:200},
{header:"描述",dataIndex:"descn",width:200}
]);

/* 数据定义 */
var data = [["1","name1","descn1"],
["2","name2","descn2"],
["3","name3","descn3"],
["4","name4","descn4"],
["5","name5","descn5"]];
/* 数据源定义 */
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({},[
{name:"id"},
{name:"name"},
{name:"descn"}
])
});
/* 数据源加载数据 */
ds.load();
/* 面板展示 */
var grid = new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
ds:ds,
cm:cm,
width:300,
autoHeight:true
});
});
</script>
</head>

------------------------------------------------
Demo 9 树形控件

树形控件由Ext.tree.TreePanel类定义，控件的名称为treepanel。
TreePanel类继承自Panel面板。
<html>
<head>
<title>ExtDemoPanel</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
/* 树的根节点 */
var root = new Ext.tree.TreeNode({
id:"root",
test:"树的根"
});
/* 树的第一个子节点 */
root.appendChild(new Ext.tree.TreeNode({
id:"C1",
test:"子节点One"
}));
/* 树的第二个子节点 */
root.appendChild(new Ext.tree.TreeNode({
id:"C2",
test:"子节点Two"
}));
/* 构建树 */
var tree = new Ext.tree.TreePanel({
readerTo:Ext.getBody(),
root:root,
width:100
});
});
</script>
</head>
----------------------------------------------------
Demo 10 服务器端动态加载树的节点信息
<head>
<title>ExtDemoAsyncTree</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="D:\extjs/images/default/s.gif";
/* 定义根节点 */
var root = new Ext.tree.AsyncTreeNode({
expanded:true,
test:"菜单",
id:"101", /* 默认为0 */
draggable:false,
iconCls:"b"
});
/* 定义树 */
var tree = new Ext.tree.TreePanel({
title:"树形结构",
root:root,
border:false,
autoHeight:true,
readerTo:Ext.getBody();
autoScroll:true, /* 显示滚动条 */
animate:true,/* 表示动画展开/折叠 */
enableDD:true,/* 允许拖放 */
containerScroll:true,/* 登记本容器ScrollManager */
listeners:{ /* 在加载之前的一个监听事件 */
"beforeload":function(node){
alter("node.id");
/* 树节点的数据来源 */
node.loader = new Ext.tree.TreeLoader({
/* 请求的路径 */
url:"viewtree.do?id="+node.id,
/* 请求的参数 */
baseParams:{
id:node.id
}
});
}
}
});
});
</script>
</head>

-----------------------------------------------------------------------
Demo 11 表单控件Form

表单在Web应用中处于非常重要的地位，时刻都在应用表单收集用户信息与后台交互。
表单是客户端和服务器之间通信的主要桥梁。
【扩展】
renderTo:Ext.getBody()什么意思？
如果你是renderTo:'test'的话~ 你jsp里边就要有个div 的id是test.
如果是renderTo:Ext.getBody()的话就是加载jsp body的时候就加载ext.
<head>
<title>ExtDemoFormLogin</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="D:\extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="D:\extjs/ext.js"></script>
<script type="text/javascript" src="D:\extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

Ext.BLANK_IMAGE_URL="D:\extjs/images/default/s.gif";

var formPanel = new Ext.form.FormPanel({
title:"登录",
id:"elID",
autoHeight:true,
x:200,
y:200,
width:300,
renderTo:Ext.getBody(),
frame:true,
cls:"test-align:center",
labelAlign:"center",
items:[{
xtype:"textfield",
name:"username",
fieldLabel:"用户名称:",
allowBlank:false,
blankText:"请输入用户名称",
msgTarget:"under"
},{
xtype:"textfield",
name:"password",
fieldLabel:"用户密码:",
allowBlank:false,
inputType:"password",
blankText:"请输入用户密码",
msgTarget:"under"
}],
buttonAlign:"center",
buttons:[{
xtype:"button",
text:"登录",
scope:this,
handler:login
},{
xtype:"button",
text:"重置",
scope:this,
handler:reset
}]
});
/* 登录的方法 */
function login(){
formPanel.form.submit({
clientValidation:true,
waitMsg:"正在登录系统请稍后...",
url:"#",
method:"POST",
/* 成功 */
success:function(form,action){
Ext.Msg.alert("提示","登陆成功");
}
/* 失败 */
failure:function(form,action){
Ext.Msg.alert("提示","登陆失败");
}
});
}
/* 重置的方法 */
function reset() {
formPanel.form.reset();
}

});
</script>
</head>