extjs的施用

各位同仁讨论下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

点击左边树的时候都是生产对象的方式生产页面

?

?

?

?

?

?