extjs的使用
程序员文章站
2022-07-13 23:09:50
...
各位同仁讨论下ext的使用情况
目前我知道的有三种方案
第一种应该是使用最多的,就是使用ext部分的组件 比如 formpanel gridpanel messagebox 等等
这样的好处是界面能够得到美工的美化,大家都知道extjs的界面使人有产生了审美疲劳
第二种
就是首先viewport 建构基本框架
通过左边的树 点击节点node 的id 加载对应写好了的 js文件
首页都是这样的
<div id="tabs" style="margin:15px 0;">
<!-- 提醒短信发送查询 -->
<div id="tab_Sms_cdrSearch">
<div id="tab_sms_left"><div>
<div id="tab_sms_right"><div>
</div>
<!-- 黑名单用户查询 -->
<div id="tab_BlackUserSerach">
<div id="tab_Black_left"><div>
<div id="tab_Black_right"><div>
<div id="tabs" style="margin:15px 0;">
<!-- 提醒短信发送查询 -->
<div id="tab_Sms_cdrSearch">
<div id="tab_sms_left"><div>
<div id="tab_sms_right"><div>
</div>
<!-- 黑名单用户查询 -->
<div id="tab_BlackUserSerach">
<div id="tab_Black_left"><div>
<div id="tab_Black_right"><div>
</div>
<!-- PUSH短息发送查询 -->
<div id="tab_Push_cdrSearch">
<div id="tab_Push_left"><div>
<div id="tab_Push_right"><div>
</div>
<!-- 用户提取彩信发送查询 -->
<div id="tab_MmsgetSearch">
<div id="tab_get_left"><div>
<div id="tab_get_right"><div>
</div> </div>
<!-- PUSH短息发送查询 -->
<div id="tab_Push_cdrSearch">
<div id="tab_Push_left"><div>
<div id="tab_Push_right"><div>
</div>
<!-- 用户提取彩信发送查询 -->
<div id="tab_MmsgetSearch">
<div id="tab_get_left"><div>
<div id="tab_get_right"><div>
</div>
这里div 的id 对应 左边树node 的id
点击树的时候
执行下面的js
function importJS(src) { src=src.replace(/\./g,'\/'); jpath=src+'.js'; for(var i=0;i<document.getElementsByTagName('script').length; i++){ if(document.getElementsByTagName('script').item(i).src== jpath){ return ; } } var headerDom = document.getElementsByTagName('head').item(0); var jsDom = document.createElement('script'); jsDom.type = 'text/javascript'; jsDom.src = jpath; headerDom.appendChild(jsDom); }
function onClickTreeNode(node) {
if (node.getDepth() > 0) {
var n = Ext.mypanels.contentPanel.getComponent(node.id);
// alert(node.id);
// alert(!n);
if (!n) { // 判断是否已经打开该面板
// alert("添加");
importJS('lib.main.'+node.id);
n = Ext.mypanels.contentPanel.add({
'id' : node.id,
'title' : node.text,
contentEl : 'tab_'+node.id,
closable : true,
iconCls : 'tabs'
});
}
Ext.mypanels.contentPanel.setActiveTab(n);
}
}
<!--StartFragment -->
第三种
完全是面向对象的编写方式,这对程序员的要求相当高的
都是通过继承ext的各种panel编写自己的panel
点击左边树的时候都是生产对象的方式生产页面
上一篇: Etcd 入门
下一篇: ExtJS GridPannel的使用