您的位置：首页 > Web前端 > JavaScript

Ext js 框架快速集成当前应用

2008-09-11 11:38 211 查看

Ext js 框架快速集成当前应用

最近google整出来个Chrome浏览器，最初我以为就是凑热闹,网络的时候来临了吗，做个浏览器也显示一下自己公司的实力。
于是安装一个试了一下，结果有点让人吃惊。原因在于我最近用ext做了个项目的原型。Chrome浏览器对js的支持太好了，也太快了。
所以了感觉到了google的野心，想称霸下一个网络时代。理由如下,google开发了如下的日常桌面软件的web替换产品：在线的办公系统，在线词典，在线地图等等等太多了。
最后我发现这些东西和js的关系非常大。那么就开发一个对js支持好的浏览器吧！以后打开电脑，就直接打开Chrome浏览器，别的软件全靠边站吧。在浏览器上什么事情都搞定了。

弄远了，下面进入正题吧
Ext js 封装了强大的，超炫的组件，可以使用web页面更具有c/s系统的操作风格。最近公司老总说了就想要一个b/s和c/s类似的东西，还要做成分布试的于是我们决定用structs2和ejb3(看来今年不能再玩ssh这套东西了)。
那么,structs2的还是标签的风格怎么才能和ext很好的结合呢？于是我们只能在ext上做灵优化了。
我的想法是ext组件，控件化。意思是说每个jsp页面都要单独使用 ext控件，类似于日期控件这样的用法。这样的好处是部局自己来做，表单的post和get提交仍然还可以用传统方式。减少开发
人员的学习成本和调试成本。和传统的jsp开发没有任何区别。

那来吧，试一下。
1 部局自己来做index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>系统</title>
</head>

<frameset rows="28,*" cols="*" border="0" frameSpacing="0" frameBorder="0" >
<frame id="topFrame" name="topFrame" src="top.html" scrolling="no" noresize title="topFrame" />
<frameset id="leftFrame_t" rows="*" cols="243,*" scrolling="NO" frameborder="NO" border="0" framespacing="0" id="f">
<frameset id="leftFrame" rows="*" cols="243,*" frameborder="NO" scrolling="NO" border="0" framespacing="0" id="f">
<frame id="leftFrame" name="leftFrame" src="left.html" scrolling="No" noresize="noresize" title="leftFrame" />
</frameset>
<frameset id="leftFrame_1" rows="*" cols="5,*" frameborder="NO" scrolling="NO" border="0" framespacing="0" id="f">
<frame src="ctrl.html" name="ctrlFrame" scrolling="NO" noresize>
<frame src="html_file/start.html" name="mainFrame" scrolling="NO" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>

2 top页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title工作站</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../resources/css/custom.css">
<link rel="stylesheet" type="text/css" href="css/layout-browser.css">
</head>

<body>
<div id="header" align="center">
<span >您好，<font>张林</font><a href="html_file/start.html" target="mainFrame">[首页]</a><a href="../login.html" target="_parent">[注销]</a></span>
<h1>系统</h1>
</div>
</body>
</html>

3 左侧树导入ext的js和实现了功能树的灵活调用
<html>
<head>
<title>工作站</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../resources/css/custom.css">
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript" src="../shared/code-display.js"></script>


<link rel="stylesheet" type="text/css" href="css/layout-browser.css">
<script language="javascript">
Ext.onReady(function(){

// Go ahead and create the TreePanel now so that we can use it below
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title: '系统功能',
region:'north',
split: true,
height: 1200,
minSize: 150,
autoScroll: true,

// tree-specific configs:
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,

loader: new Ext.tree.TreeLoader({
dataUrl:'js/tree-data.json'
}),

root: new Ext.tree.AsyncTreeNode()
});

// Assign the changeLayout function to be called on tree node click.
treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
if(n.id=='regapply')
{
document.main1.action="html_file/sqcz.html";
document.main1.submit();
}

else if(n.id=='dlrz')
{
document.main1.action="../pt/html_file/dlrz.html";
document.main1.submit();
}
else if(n.id=='czrz')
{
document.main1.action="../pt/html_file/czrz.html";
document.main1.submit();
}

else if(n.id=='regfback')
{
document.main1.action="html_file/print.html";
document.main1.submit();
}
else if(n.id=='checkapply')
{
document.main1.action="html_file/yyjc.html";
document.main1.submit();
}
else if(n.id=='checkfback')
{
document.main1.action="html_file/print.html";
document.main1.submit();
}
else if(n.id=='referapply')
{
document.main1.action="html_file/sqcz.html";
document.main1.submit();
}
else if(n.id=='referfback')
{
document.main1.action="html_file/print.html";
document.main1.submit();
}
else if(n.id=='emergapply')
{
document.main1.action="html_file/sqcz.html";
document.main1.submit();
}
else if(n.id=='emergfback')
{
document.main1.action="html_file/print.html";
document.main1.submit();
}

else if(n.id=='recordlist')
{
document.main1.action="html_file/recordlist.html";
document.main1.submit();
}

else if(n.id=='recordsearch')
{
document.main1.action="html_file/mutualStat.html";
document.main1.submit();
}
else if(n.id=='interactsearch')
{
document.main1.action="html_file/interactsearch.html";
document.main1.submit();
}
else if(n.id=='expensesearch')
{
document.main1.action="html_file/expensesearch.html";
document.main1.submit();
}else if(n.id=='accuracysearch')
{
document.main1.action="html_file/accuracysearch.html";
document.main1.submit();
}

else if(n.id=='infoissue')
{
document.main1.action="html_file/infoissue.html";
document.main1.submit();
}
else if(n.id=='infoview')
{
document.main1.action="html_file/infoview.html";
document.main1.submit();
}

else if(n.id=='user')
{
document.main1.action="html_file/user.html";
document.main1.submit();
}
else if(n.id=='password')
{
document.main1.action="html_file/password.html";
document.main1.submit();
}
else
{
document.main1.action="html_file/nopage.html";
document.main1.submit();
}
}
});

treePanel.render("newtree");

});

</script>

</head>
<body>
<div id="newtree"></div>
<form name="main1" target="mainFrame" method="get">
</form>
</body>
</html>

4 json文件用于功能树
[{
text:'Basic Ext Layouts',
expanded: true,
children:[{
text:'Absolute',
id:'absolute',
leaf:true
},{
text:'Accordion',
id:'accordion',
leaf:true
},{
text:'Anchor',
id:'anchor',
leaf:true
},{
text:'Border',
id:'border',
leaf:true
},{
text:'Card (TabPanel)',
id:'card-tabs',
leaf:true
},{
text:'Card (Wizard)',
id:'card-wizard',
leaf:true
},{
text:'Column',
id:'column',
leaf:true
},{
text:'Fit',
id:'fit',
leaf:true
},{
text:'Form',
id:'form',
leaf:true
},{
text:'Table',
id:'table',
leaf:true
}]
},{
text:'Custom Layouts',
children:[{
text:'Row',
id:'row',
leaf:true
},{
text:'Center',
id:'center',
leaf:true
}]
},{
text:'Combination Examples',
children:[{
text:'Absolute Layout Form',
id:'abs-form',
leaf:true
},{
text:'Tabs with Nested Layouts',
id:'tabs-nested-layouts',
leaf:true
}]
}]

结束，本示例并不能运行，如果你是有经验的web开发者，你就会知道下一步该怎么做了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航