再谈Ext项目性能优化(公司项目正测试阶段中....)

maozhibin

浏览: 5929 次
性别:
来自: 苏州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

EXT 项目管理 Mobile DWR Ajax

项目名称：数字苏州 – 便民地图网

框架：Ext + Dwr

描述：

一、《数字苏州 – 便民地图网》后台管理(包括用户管理、标注管理、分类信息管理)采用ext+dwr做为框架,也拿来与大家一起讨论与分享。

二、已经对后台主页面所包含的javascript文件和css文件做了一定优化与压缩（javascript在线压缩工具：http://dean.edwards.name/packer/，css在线压缩工具http://www.cssdrive.com/index.php/main/csscompressor）。

三、采用YSlow对网站运行进行测试了，测试结果如下：

Yslow测试结果

四、网站示意截图如下

1、

2、

苏州便民地图网

分享到：

上传图片预览

2008-12-06 15:23
浏览 1794
评论(12)
论坛回复 / 浏览 (11 / 9195)
分类:Web前端
查看更多

12 楼 shevliu 2009-02-04

为什么没看到“优化”的具体内容？

11 楼 liang.zeng 2009-02-03

我们公司就用ext ,dwr开发，效果还不错。

10 楼 yourgame 2009-01-19

嘿嘿，楼主，项目怎么样了。再上几个图看看

9 楼 hanjs 2008-12-31

小心说你泄密，lz最好不要把项目名字什么都写出来。越来越感觉用Ext开发web application，怎么越象cs桌面程序呢？

8 楼 xiaoyu 2008-12-26

楼主注意哦，如果代码是在公司里研发的，版权是属于公司的。

7 楼 maozhibin 2008-12-26

呵呵，目前公司正在起步阶段，没有那么多人手，也没有美工，都是自己，还有另外两个GIS工程师，前天公司吃饭，老板和我们说了，公司会今年已经完成了预期目标，2009年将扩从投资和员工，并将不断改善我们的网站

6 楼 maozhibin 2008-12-09

yourgame 写道

这么多代码，看起来很复杂，代码的后期维护工作肯定不好做。http://yourgame.iteye.com/blog/252853 这个是我的一个EXTjs的Demo我也在学习这个框架，总希望能有更好的代码组织规则。还有请问你能提供给我一个测试的帐号么？不胜感激

好的，没问题。等上线测试后，我给你测试号，现在还在局域网测试,你没法访问。
另外：整个后台管理页面的布局、或者说组织规则简述如下：
左侧是导航条，右侧是tablePannel。点击左侧--->右侧便增加一tab项。而每个tab项基本上是一个GridPannel。先大体上介绍一下，明天上公司去再详述。

5 楼 yourgame 2008-12-09

这么多代码，看起来很复杂，代码的后期维护工作肯定不好做。
http://yourgame.iteye.com/blog/252853 这个是我的一个EXTjs的Demo
我也在学习这个框架，总希望能有更好的代码组织规则。

还有请问你能提供给我一个测试的帐号么？不胜感激

4 楼 maozhibin 2008-12-09

yourgame 写道

能共享你的代码编写规范么？

不好意思，公司有版权。所以把我写的js部分代码贴出来。供参考

var pageSize = 20;	
var poi_tableName = '',poi_id='',poi_userID='',poi_name='';
var poi_ids = [];
var poi_btn_upgrade=false;
myGrid = function(url, title,id){
    //Ext.BLANK_IMAGE_URL = 'http://localhost:8080/mapscene/member/images/s.gif';
	Ext.BLANK_IMAGE_URL = 'ext-2.2/resources/s.gif'
    Ext.QuickTips.init();
    var xg = Ext.grid;
    rendererOperate = function(value, cellmeta, record, rowIndex, columnIndex, store){
    	var idd = record.data['idd'];
        var name = record.data['name'];
		var userID = record.data['userID'];
		var branchShopName = record.data['branchShopName'];
        var address = record.data['address'];
		var longitude = record.data['longitude'];
		var latitude = record.data['latitude'];
        var telephone = record.data['telephone'];
        var mobile = record.data['mobile'];
        var type = record.data['type'].split('|')[0];
		var childType  =record.data['type'].split('|')[1];
		var cityCode = record.data['cityCode'];
		var commonUserLabel = record.data['commonUserLabel'];
		var nearBusStation = record.data['nearBusStation'];
		var busLine = record.data['busLine'];
		var newMarker = record.data['newMarker'];
		var shopUrl = record.data['shopUrl'];
		var shopIntro = record.data['shopIntro'];
		var imagesUrl = record.data['imagesUrl']!='null'?record.data['imagesUrl']:'';
		var shopHours = record.data['shopHours'];
		var parkingInfo = record.data['parkingInfo'];
		var swipeCard = record.data['swipeCard'];
		var shopkeeper = record.data['shopkeeper'];
		var labelTime = record.data['labelTime'];
        var url = 'labelModify.jsp?idd='+idd+'&name=' + name + '&branchShopName=' + branchShopName + '&address=' + address + '&longitude=' + longitude + '&latitude=' + latitude + '&telephone=' + telephone + '&mobile=' + mobile + '&type=' + type + '&commonUserLabel=' + commonUserLabel + '&nearBusStation=' + nearBusStation + '&busLine=' + busLine + '&newMarker=' + newMarker+ '&shopUrl=' + shopUrl+ '&shopIntro=' + shopIntro+ '&userID=' + userID+ '&cityCode=' + cityCode+ '&childType=' + childType+'&imagesUrl='+imagesUrl+'&shopHours='+shopHours+'&parkingInfo='+parkingInfo+'&swipeCard='+swipeCard+'&shopkeeper='+shopkeeper+'&labelTime='+labelTime;
        var str = "<font color='blue'><a onclick=\"window.open('" + url + "')\" style='cursor:pointer'>修改</a><font>";
        return str;
    }
    activeLaleOperate = function(id, tableName, isValidate){
        if (isValidate == '2') {
			if (i_userType == 2 ) {
				Ext.MessageBox.alert('警告','在地图上显示您的商户，请联系你的代理商进行激活！');
			}else{
				tableName = tableName.split('|')[0];
				Ext.MessageBox.confirm('提示框', '你确定要进行激活操作吗？？!', function(btn){
					if (btn == 'yes') {
						Ext.lib.Ajax.request('POST', 'labelManage.jsp', {
							success: function(e, b){
								var oImg = Ext.get(id);
								oImg.src = '/mapscene/member/images/bg3.jpg';
								var message = e.responseText;
								Ext.Msg.alert('信息', message);
								ds.load({
									params: {
										start: 0,
										limit: pageSize
									}
								});
							},
							failure: function(){
								Ext.Msg.alert('错误', '系统忙，请稍候再试！');
							}
						}, 'command=active&id=' + id + '&tableName=' + tableName);
					}
				});
			}
        }else if(isValidate == '1'){
        	if(i_userType ==2){
        		Ext.MessageBox.alert('警告','请联系你的代理商进行反向激活！');
        	}else{
        		tableName = tableName.split('|')[0];
        		Ext.MessageBox.confirm('提示框','您确定要进行反向激活操作吗？？！',function(btn){
        			if(btn=='yes'){
        				Ext.lib.Ajax.request('POST','labelManage.jsp',{
        					success:function(e,b){
								var oImg = Ext.get(id);
								oImg.src = '/mapscene/member/images/bg.jpg';
								var message = e.responseText;
								Ext.Msg.alert('信息', message);
								ds.load({
									params: {
										start: 0,
										limit: pageSize
									}
								});        						
        					},
        					failure:function(){
        						Ext.Msg.alert('错误', '系统忙，请稍候再试！');
        					}
        				},
        				'command=unactive&id='+id+'&tableName='+tableName
        				);
        			}
        		});
        	}
        	
        }
        /*else {
            Ext.MessageBox.alert('提示框', '已被激活');
        }*/
    }
    isActive = function(value, cellmeta, record){
        var id = record.data['idd'];
        var isValidate = record.data['isValidate'];
        var tableName = record.data['type'];
        if (value == '1') {
            return "<img id=" + id + " src='/mapscene/member/images/bg3.jpg'  onclick=activeLaleOperate('" + id + "','" + tableName + "','" + isValidate + "') />";
        }else {
            return "<img id=" + id + " src='/mapscene/member/images/bg.jpg' align='未被激活，请联系您的代理商' onclick=activeLaleOperate('" + id + "','" + tableName + "','" + isValidate + "') style='cursor:pointer' />";
        }
    }
    upgradeFn=function(value, cellmeta, record){
    	poi_tableName = record.data['type'].split('|')[0];
    	poi_id = record.data['idd'];
    	poi_name = record.data['name'];
    	return '<a href="javascript:poiUpgrade()">升级</a>';
    }
    viewForumFn=function(value, cellmeta, record){
    	var title=record.data['name'];
    	var iddd = 'forum_'+title;
    	return '<a href="javascript:addForumTab(\''+title+'\',\''+iddd+'\')">查看</a>';
    }
    reader = new Ext.data.JsonReader({
        totalProperty: 'totalProperty',
        root: 'root'
    }, [{name: 'idd'}, 
		{name: 'userID'},
		{name: 'name'}, 
		{name: 'branchShopName'},
		{name: 'address'}, 
		{name: 'telephone'}, 
		{name: 'mobile'}, 
		{name: 'type'},
		{name: 'cityCode'},
		{name: 'commonUserLabel'}, 
		{name: 'shopIntro'}, 
		{name: 'labelTime'},
		{name: 'modifiedTime'}, 
		{name: 'isValidate'},
		{name: 'longitude'}, 
		{name: 'latitude'}, 
		{name: 'nearBusStation'}, 
		{name: 'busLine'}, 
		{name: 'newMarker'},
		{name: 'shopUrl'}, 
		{name: 'imagesUrl'},
		{name: 'shopHours'},
		{name: 'parkingInfo'},
		{name: 'swipeCard'},
		{name: 'shopkeeper'},
		{name: 'operate'},
		{name: 'upgrade'},
		{name: 'viewForum'}
		]
	);
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: url
        }),
        reader: reader
    });
	sm = new Ext.grid.CheckboxSelectionModel();
	var cm = null;
	if(i_userType==0){
	    cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer(), 
			sm,
			{header: '名称',sortable: true,dataIndex: 'name'}, 
			{header: '地址',sortable: true,dataIndex: 'address'}, 
			{header: '电话',sortable: true,dataIndex: 'telephone'}, 
			{header: '手机号码',sortable: true,dataIndex: 'mobile'}, 
			{header: '行业类型',sortable: true,dataIndex: 'type'},
			{header: '店铺简介',sortable: true,dataIndex: 'shopIntro'}, 
			{header: '创建时间',sortable: true,dataIndex: 'labelTime'},
			{header: '修改时间',sortable: true,dataIndex: 'modifiedTime',renderer: function(value){if(value=='null'){return '';}else{return value}}}, 
			{header: '是否激活',sortable: true,dataIndex: 'isValidate',renderer: isActive},
			{header: '修改',dataIndex: 'operate',renderer: rendererOperate},
			{header: '升级',dataIndex: 'upgrade',renderer: upgradeFn},
			{header: '评论',dataIndex: 'viewForum',renderer: viewForumFn}
			
		]);
	}else{
	    cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer(), 
			sm,
			{header: '名称',sortable: true,dataIndex: 'name'}, 
			{header: '地址',sortable: true,dataIndex: 'address'}, 
			{header: '电话',sortable: true,dataIndex: 'telephone'}, 
			{header: '手机号码',sortable: true,dataIndex: 'mobile'}, 
			{header: '行业类型',sortable: true,dataIndex: 'type'},
			{header: '店铺简介',sortable: true,dataIndex: 'shopIntro'}, 
			{header: '创建时间',sortable: true,dataIndex: 'labelTime'},
			{header: '修改时间',sortable: true,dataIndex: 'modifiedTime',renderer: function(value){if(value=='null'){return '';}else{return value}}}, 
			{header: '是否激活',sortable: true,dataIndex: 'isValidate',renderer: isActive},
			{header: '修改',dataIndex: 'operate',renderer: rendererOperate},
			{header: '评论',dataIndex: 'viewForum',renderer: viewForumFn}
		]);		
	}

3 楼 ThinkingInAll 2008-12-09

宽屏......

2 楼 yourgame 2008-12-09

能共享你的代码编写规范么？

1 楼 fangzhouxing 2008-12-06

不错，顶一个！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论