Extjs小例子

来源：互联网发布：北京技佳数据恢复中心编辑：程序博客网时间：2024/05/22 16:40

ExtJS本质上也是一个AJAX的框架，但是它和DWR有很大不同，首先，DWR是JAVA世界的产物，而ExtJS是后台无关的。也就是说，ExtJS的后台可以是.NET,PHP或者JAVA都可以。其实我们在网上看到的大部分例子都是PHP或者.NET,后台的。这说明ExtJS在所有后台都很受青睐。其次，DWR只关注客户端与服务器端的交互，没有自己的界面组件，而ExtJS最让人惊叹的就是其丰富而强大的界面组件，除此以外，它自身也能轻松地异步访问后台组件。现如今，RIA（富客户端应用）已经成了不争的趋势。
我们知道，在WEB开发中有一些共同的开发重心，譬如登陆注册，CRUD（增，删，改，查），数据的分页，排序和过滤，数据的统计报表，数据的导入导出，Cookies和Sessions的管理等。我们在网上看到很多ExtJS的零零星星的应用，有人做了CRUD，有人做了登陆注册，有了做了复杂查询，还有人扩展了分页，做了服务器端的排序，数据的导出等等，但就是没有人提供一个强大而翔实的案例，把这些ExtJS的知识点统一到项目中，或者有的人已经做除了一些真实的项目，可是又不愿意拿出来分享。

1.首先是init-main.js，这里定义了整个应用的主体布局视图Viewport。它和我们HTML中的frameset有点类似。在我们的主显示区里还放了一个TabPanel，这就是我们桌面应用中常见的选项面板。要理解下面的JS呢，你必须先掌握JSON这种数据格式，这个格式我在前面的ExtJS应用中已经详细讲过，如果还不太清楚，到http://www.json.org/json-zh.html 去看看，JSON在整个ExtJS体系里占有重要地位，熟悉JSON格式的人会对名/值对，{}，[]很敏感。大家看到，在Viewport类和TabPanel类里都传入一个JSON对象来初始化整个组件。其次，你还要有容器和组件的概念，每个容器组件（容器同时也是组件，这是相对的，它放东西的时候是容器，被放置其中的时候就是组件！）都有一个items参数指定一个JSON数组来表明自己容纳的组件。我们要完成的功能是上面放公司的LOGO信息，左边是导航菜单栏，右边是主显示区。代码如下：

// create main tabpanel

var contentPanel = new Ext.TabPanel({

id : "tabPanel",

region : 'center',

enableTabScroll : true,

resizeTabs : true, // turn on tab resizing

deferredRender : false,

minTabWidth : 115,

// tabWidth:135,

activeTab : 0,

iconCls : 'tabs',

items : [{

contentEl : 'center',

title : '主页',

autoScroll : true

}],

defaults : {

autoScroll : true

plugins : new Ext.ux.TabCloseMenu()

});

//ExtJs应用的入口

Ext.onReady(function() {

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// init main page framework

var viewport = new Ext.Viewport({

layout : 'border',

items : [{

region : 'north',

html : '<img src="resources/images/dwr_logo.gif" width=210 height=100><img

src="resources/images/struts.png" ><img src="resources/images/hibernate.gif" width=200 height=90 ><img

src="resources/images/spring_logo.png" width=200 height=70><img src="resources/images/extjs_logo.gif" height=60>',

split : true,

height : 130,

minSize : 100,

maxSize : 200,

collapsible : true,

title : '房屋出租系统',

margin : '0 0 0 0'

// border: false,

// layout:"absolute"

}, {

region : 'west',

id : 'west-panel',

title : '菜单栏',

split : true,

width : 200,

minSize : 175,

maxSize : 400,

collapsible : true,

margins : '0 0 5 5',

cmargins : '0 5 5 5',

layout : 'accordion',

layoutConfig : {

animate : true

items : [{

title : '房屋管理',

html : Ext.getDom('userMenus').innerHTML,

autoScroll : true,

border : false,

iconCls : 'user'

}, {

title : '机构管理',

html : Ext.getDom('unitMenus').innerHTML,

border : false,

autoScroll : true,

iconCls : 'unit'

}, {

title : '系统设置',

html : Ext.getDom('settingMenus').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings'

}, {

title : '电子日历',

// html : Ext.getDom('settingMenus').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings',

items : [new Ext.form.DateField()]

}, {

title : '企业短信',

html : Ext.getDom('msg').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings'

}, {

title : '公文审批',

// html : Ext.getDom('msg').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings'

}, {

title : '电子会议',

html : Ext.getDom('eMeeting').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings'

}, {

title : '电子邮件',

// html : Ext.getDom('msg').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings'

}, {

title : '电子文档',

// html : Ext.getDom('msg').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings'

}, {

title : '个性化设置',

// html : Ext.getDom('msg').innerHTML,

border : false,

autoScroll : true,

iconCls : 'settings'

}]

}, contentPanel]

});

// init main page tables

var panel = new Ext.Panel({

id : 'main-panel',

baseCls : 'x-plain',

renderTo : Ext.get("center"),

layout : 'table',

layoutConfig : {

columns : 2

defaults : {

frame : true,

width : 395

items : [{

title : '公告信息',

colspan : 2,

collapsible : true,

width : 800,

height : 430,

contentEl : 'afficheDiv'

}]

});

// clear temp elements.

Ext.getDom("menus").innerHTML = "";

});

// 定义菜单导航函数

function onClickMenuItem(node) {

var n = contentPanel.getComponent(node.id);

if (!n) { // //判断是否已经打开该面板

n = contentPanel.add({

'id' : node.id,

'title' : node.innerHTML,

iconCls : 'tabs',

closable : true,

autoLoad : {

url : 'tabFrame.jsp?url=' + node.href,

callback : this.initSearch,

scope : this,

scripts : true

} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性

});

}

contentPanel.setActiveTab(n);

}