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

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