ExtJS的简单使用
ExtJS的简单使用
相比于jquery easyui ，ExtJS显得有点沉重，从官网下载的文档（300多M）就可以看出其包含的文件，功能都是easyui所不能相比的；
废话不多说，马上来看一个简单的demo。
以建立一个的简单的后台管理模板为例子（样式如下）：
1、必要的引用
其中local为语言包，resources为ext UI包 ， ext-all.js则为核心库，shared则是当涉及多个框架的时候使用。
2、新建一个html测试页面加入必要的引用
3、初始化一个viewpoint
viewpoint，顾名思义就是一个页面，其中包含的小页面则是items中显示的东西，这里我们应该先定义好每一个items对应是那种类型的component，一般的管理后台都是上边一个显示欢迎页面Panel，左边是一个下拉树显示所有的菜单Panel，右边则根据鼠标点击左边的哪个菜单莱尼显示不同的页面，对应的是tab.Panel）
接下来就是就是定义每个panel了，共三个north，west ，center，位置则是在属性region中定义；
每个panel中还可以包含其他的panel，在items中定义。
例如左边的菜单需要根据数据库返回来的数据进行动态加载：
首先将数据进行组装，然后再调用add()方法进行动态的加入；
4、整个页面的源码
以上就是使用ExtJS制作的一个简单的后台管理模型；
好好看API，好好研究example，好好制作demo；
Have a nice day~
相比于jquery easyui ，ExtJS显得有点沉重，从官网下载的文档（300多M）就可以看出其包含的文件，功能都是easyui所不能相比的；
废话不多说，马上来看一个简单的demo。
以建立一个的简单的后台管理模板为例子（样式如下）：
1、必要的引用
其中local为语言包，resources为ext UI包 ， ext-all.js则为核心库，shared则是当涉及多个框架的时候使用。
2、新建一个html测试页面加入必要的引用
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css"> <script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>
3、初始化一个viewpoint
Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
pnNorth,
pnWest,
pnCenter
]
});
});
viewpoint，顾名思义就是一个页面，其中包含的小页面则是items中显示的东西，这里我们应该先定义好每一个items对应是那种类型的component，一般的管理后台都是上边一个显示欢迎页面Panel，左边是一个下拉树显示所有的菜单Panel，右边则根据鼠标点击左边的哪个菜单莱尼显示不同的页面，对应的是tab.Panel）
接下来就是就是定义每个panel了，共三个north，west ，center，位置则是在属性region中定义；
//首先定义好每个panel中包含什么item
var itemWest_sys=[{
title: 'Management',
itemId:'mgId',
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Tiemsheet',
collapsed : false,//default to render it expand,default:true(collapsed)
itemId:'tsId',
html: 'Some settings in here.
',
iconCls: 'settings'
}];
//center item
var itemCenter=[{
title: 'Index',
itemId:'indexId',
autoScroll: true,
html:'<iframe src="main.html" frameBorder=0 ></iframe>'
}];
//初始化每个panel
//region-north
var pnNorth=new Ext.Panel({
id:'pnNorth',
autoWidth:true,
heigth:40,
margins: '0 5 0 10',
padding:'0 0 0 30',
frame:true,
region:'north',
html:'<h1>Hello Timesheet Management System</h1>'
});
//region-west
var pnWest=new Ext.Panel({
id:'pnWest',
region:'west',
title:"west",
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 10',
layout: 'accordion',
items: itemWest_sys
});
//region-center
var pnCenter=Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
margins: '0 5 0 0',
activeTab: 0, // first tab initially active
items:itemCenter
});
每个panel中还可以包含其他的panel，在items中定义。
例如左边的菜单需要根据数据库返回来的数据进行动态加载：
首先将数据进行组装，然后再调用add()方法进行动态的加入；
var test={title: 'Index',
itemId:'indexId',
autoScroll: true,
closable:true,
html:'<h1>Test for item add</h1>'
};//组转格式
pnAdd.add(test );
4、整个页面的源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>
<script type="text/javascript">
//--------------系统全局变量-------
//west sys item
var itemWest_sys=[{
title: 'Management',
itemId:'mgId',
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Tiemsheet',
collapsed : false,//default to render it expand,default:true(collapsed)
itemId:'tsId',
html: 'Some settings in here.
',
iconCls: 'settings'
}];
//center item
var itemCenter=[{
title: 'Index',
itemId:'indexId',
autoScroll: true,
html:'<iframe src="main.html" frameBorder=0 ></iframe>'
}];
//添加树-------data tree test
var tree_include = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var tree=Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
itemId:"treeId",
width: 200,
height: 150,
store: tree_include,
rootVisible: false,
renderTo: Ext.getBody()
});
//region-north
var pnNorth=new Ext.Panel({
id:'pnNorth',
autoWidth:true,
heigth:40,
margins: '0 5 0 10',
padding:'0 0 0 30',
frame:true,
region:'north',
html:'<h1>Hello Timesheet Management System</h1>'
});
//region-west
var pnWest=new Ext.Panel({
id:'pnWest',
region:'west',
title:"west",
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 10',
layout: 'accordion',
items: itemWest_sys
});
//region-center
var pnCenter=Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
margins: '0 5 0 0',
activeTab: 0, // first tab initially active
items:itemCenter
});
//Ext.require(['*']);
Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
pnNorth,
pnWest,
pnCenter
]
});
});
//函数---------添加item---------
function addItem(itAdd,pnAdd){
var rtn=pnAdd.getComponent(itAdd.itemId);
if(rtn==null){
pnAdd.add(itAdd);
}else{
pnAdd.setActiveTab(rtn);
}
}
/* var test={title: 'Index',
itemId:'indexId',
autoScroll: true,
closable:true,
html:'<h1>Test for item add</h1>'
};
addItem(test,pnCenter);
addItem(test,pnWest); */
</script>
<title>Welcome to Hello Timesheet Management System</title>
</head>
<body>
<div id="west" class="x-hide-display">
Hi. I'm the west panel.
</div>
<div id="center1" class="x-hide-display">
I can close ;I am pennal One
</div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
</div>
</body>
</html>
以上就是使用ExtJS制作的一个简单的后台管理模型；
好好看API，好好研究example，好好制作demo；
Have a nice day~