欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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