一直关注ExtJS很久了，以前一直在犹豫是否要把它应用到实际的项目中，当然只会用到网站管理后台上面，因为我做的项目都是互联网网站项目，前台用它就太慢了。
这个东西真TM大，就JS都300多K每次加载的时候就都卡一会儿，我的电脑配置还很不错了。还没有算上它自带的主题图片这些。不过这东西的确很棒，不管用用户体验和美术上面，都相当的不错，使得我放弃了速度，试着开始用它。
前两天用ExtJS做了一个管理后台的基本框架。还是挺麻烦的，好多地方都要通过创建对象来实现。
给大家看一下一段我写的代码,这些是用ExtJS和Jquery结合实现的：
Wathon.Admin.js
/**
* @author Json Lee
* Wathon 项目Javascript基本命名空间
*/
var Wathon = function(){}
Wathon.Admin = Wathon.prototype = {
/**
* 测试方法
*/
hello : function(){
alert("Hello Wathon Team.");
},
/**
* 显示消息提示
* @param {Object} msg 消息内容
* @param {Object} type 类型 1成功 0错误
* @param {Object} animElName 动画来自的对象的名称
*/
showMessage:function(msg,type,animElName){
var icon;
if(type == 1){
icon = Ext.MessageBox.INFO;
}
else{
icon = Ext.MessageBox.ERROR;
}
Ext.Msg.show({
title:"提示消息",
msg:msg,
buttons:Ext.Msg.OK,
animEl:animElName,
icon:icon
});
},
/**
* 载入完成，关闭Loading
*/
closeLoading : function(){
setTimeout(function(){
$('#loading').remove();
$('#loading-mask').fadeOut(500,function(){
$(this).remove();
});
}, 250);
}
}
$(document).ready(function(){
Wathon.Admin.closeLoading();
})
这个是Wathon.Admin.Index.js
/**
* @author Json Lee
* 管理后台首页的JS
*/
Wathon.Admin.Index = Wathon.Admin.prototype = {
/**
* 初始化页面
*/
init: function(el){
/**
* 主框架加载
*/
if (this.panelMain == null) {
panelMain = new Ext.Viewport({
layout:"border",
items:[
this.top,
this.bottom,
this.toolbox,
this.maincontent
]
});
}
/**
* 以下是工具栏的加载
*/
this.toolbar.render("panelToolbar");
this.toolbar.add({
text:"管理菜单",
iconCls:"bmenu",
menu:[{
id:"mnuMain",
items:[{
text:"更改密码
",
id:"mnuChangePassword",
checkHandler:this.mnuChangePassword_click
}]
}]
});
},
panelMain:null,
/**
* 页头
*/
top:new Ext.BoxComponent({
region:"north",
el:"panelTop",
margins:"0 0 5 0"
}),
toolbar: new Ext.Toolbar(),
/**
* 页脚
*/
bottom:new Ext.BoxComponent({
region:"south",
el:"panelBottom",
margins:"5 0 0 0"
}),
/**
* 工具箱
*/
toolbox:{
region:'west',
title: '工具箱',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 0 0 5',
items:[
new Ext.TabPanel({
border:false,
activeTab:0,
tabPosition:'bottom',
items:[{
html:'<p>这里是常用工具箱</p>',
style:"padding:5px;",
title: '常用工具',
autoScroll:true
}]
})
]
},
/**
* 主内容
*/
maincontent:new Ext.TabPanel({
region:'center',
margins:'0 5 0 0',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'panelContent',
title: '首页',
style:"padding:5px;",
closable:true,
autoScroll:true
}]
}),
/*
* 以下的是事件
*/
/**
* 更改密码菜单事件
*/
mnuChangePassword_click : function(){
alert("您点击了更改密码");
}
}
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var index = Wathon.Admin.Index;
index.init();
})
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>ExtJs页面框架演示 - www.wathon.com</title>
<link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="styles/html.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="styles/index.css" />
<script src="scripts/ext/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/ext/jquery-plugins.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/ext/ext-jquery-adapter.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/ext/ext-all.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/Wathon.Admin.js"></script>
<script type="text/javascript" src="scripts/Wathon.Admin.Index.js"></script>
</head>
<body>
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator"><img src="images/ext/extanim64.gif" width="64" height="64" style="margin-right:8px;" align="absmiddle"/>系统加载中，请稍候</div>
</div>
<div id="panelTop">
<div class="header"><h1>ExtJS页面框架 - 网站管理后台<samp>版本:X.x.x</samp></h1></div>
<div id="panelToolbar" style="height:28px;">
</div>
</div>
<div id="panelContent">
<p>
ExtJs页面框架演示
</p>
<p>
作者：李华顺<br />
博客：<a href="http://huacn.cnblogs.com">http://huacn.cnblogs.com</a>
</p>
<p>
本页是演示如果通过JS实现页面框架的例子，主要使了Ext里面 Ext.Viewport 、Ext.BoxComponent 、Ext.Toolbar 、Ext.TabPanel 等组件。<br />
</p>
</div>
<div id="panelBottom"></div>
</body>
</html>
最终结果：
由于Ext包的文件实在是大太了，我这里提供的下载里面已经将Resources文件夹里面的东西删除，请下载以后从ExtJS2.0的Resources文件夹里面复制过来.
ExtJS例子源代码下载：
http://files.cnblogs.com/huacn/ExtJs_Viewport_Example.zip
ExtJS官方网站：
http://extjs.com/
ExtJS下载地址：
http://extjs.com/download
posted @ 2007-12-24 13:00
华顺 阅读(8530)
评论(15) 编辑 收藏 网摘 所属分类:
Javascript & Ajax