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

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

 

 

 

 

 

 

评论

13 楼 mr.a 2009-12-16  

在公网上ext体积相对于flex有优势. 最小可以到119k

12 楼 xuershan 2009-12-15  

extjs使用组件其实还是很麻烦，
没有flex用起来顺畅
无论从哪方面比extjs 比flex差太多

11 楼 nickevin 2009-12-15  

第3种是正道  前两种没有体现extjs的精髓

10 楼 mr.a 2009-12-15  

我使用第三种方式  这样可以得到复用性, 标准化等很多好处

9 楼 ysen 2009-12-14  

最近打算系统学下flex

8 楼 todn211 2009-12-14  

EXTJS和FLEX比？那差别不是一般的大，无论是JS和AS的语法，还是IDE，还是DEBUG都不是一个层次，用完FLEX做一个项目后，从此我就不再关注EXTJS了。

7 楼 qiu768 2009-12-14  

这种帖子就没必要发到首页上来吧！！

6 楼 condeywadl 2009-12-14  

LZ没有提到ext desktop

5 楼 Artkai 2009-12-14  

有没有采用第三种方法做的比较完整的例子啊？？

4 楼 ysen 2009-12-11  

第二种的高度问题随着显示器的不同，一直没能解决

3 楼 aws 2009-12-11  

目前来看其实第三种完全面向对象的ext写法是用起来最爽的

前两种不过是从JSP往EXT过渡，实际上并不能发挥ext组件化的优势

2 楼 ysen 2009-12-11  

markone 写道

我三种都做过，用得越深感觉越痛苦
主要是没有基于Ext的设计器

其实个人觉得，要做一个用于信息呈现的网站，用jQuery或者Mootools比extjs好
而要做在线工具比如mis之类的，还是建议用flex，不说别的，有好的设计器

ext我最喜欢也是用的最多的，就是它的Template和基于template的dataview了
让呈现一些复杂的数据结构变的相当简单

ext很快就出来了，到时候ext与flex将有的比了

1 楼 markone 2009-12-11  

我三种都做过，用得越深感觉越痛苦
主要是没有基于Ext的设计器

其实个人觉得，要做一个用于信息呈现的网站，用jQuery或者Mootools比extjs好
而要做在线工具比如mis之类的，还是建议用flex，不说别的，有好的设计器

ext我最喜欢也是用的最多的，就是它的Template和基于template的dataview了
让呈现一些复杂的数据结构变的相当简单