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

最新推荐文章于 2023-08-11 15:55:21 发布

shazhenzhong

最新推荐文章于 2023-08-11 15:55:21 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： ext 框架 stylesheet html border 浏览器

本文链接：https://blog.youkuaiyun.com/shazhenzhong/article/details/2912684

本文介绍了一种将ExtJS框架集成到现有应用的方法，通过示例展示了如何利用ExtJS组件实现类似C/S风格的B/S应用，包括布局设计、顶部导航栏及左侧功能树的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">

<head>

</head>

</frameset>

</frameset>

</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">

<head>

<title工作站</title>

</head>

<body>

</div>

</body>

</html>

3 左侧树导入ext的js和实现了功能树的灵活调用

<html>

<head>

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>

</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开发者，你就会知道下一步该怎么做了。