一直关注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 on 2007-12-24 13:00
李华顺 阅读(6005)
评论(13) 编辑 收藏 所属分类:
Javascript & Ajax
发表评论
东西虽好 无奈太大啊
ExtJS和Jquery结合不错不错
@戏水
管理后台里面用嘛，或者产品性质的项目用也不错
以前一直期待有一个好的可视化编辑器，像WinForm哪样的工具，这样的话开发就会快很多。
现在写一个小的列表，再熟悉也不会怎么快，都得一点一点写出来。
没必要一次把EXTJS包全部加载进来吧？
难道不能根据使用EXTJS控件的需要按需加载？
jquery.js
jquery-plugins.js
ext-jquery-adapter.js
ext-all.js
再加上resources目录
都有１.１６Ｍ，确实很庞大。。。
假如可以把这么漂亮的东西完全独立于ext就好了
@volcanodeng
这个知道，其它的有可能都会随时用到的，所以我在下载的时候才一起都弄下来了
所有页面首先只加载核心JS文件
根据该页面将要用到的控件再引入对应的JS文件
这样就不会导致一次加载过多JS文件太慢了
非常不错, 非常感谢!
这么好的文章对我们刚入门的人来说, 简直就是沙漠里的一壶水.
仔细学习了李华顺的文章和示例代码. 发现管理菜单下的更改密码菜单不能出来. 并且也不会触发点击事件.
后来发现导致此错误的代码在这里:
this.toolbar.add({
text:"管理菜单",
iconCls:"bmenu",
menu:[{
id:"mnuMain",
items:[{
text:"更改密码...",
id:"mnuChangePassword",
checkHandler:this.mnuChangePassword_click
}]
}]
});
应该为:
this.toolbar.add({
text:"管理菜单",
iconCls:"bmenu",
menu:{
id:"mnuMain",
items:[
{ text:"更改密码...", handler:this.mnuChangePassword_click}
]
}
});
感谢分享，我正在学习EXT,博主的代码很清晰，学习了。