手工打造Extjs

在没接触Ext时都不知道javascript是一门可以面向对象的语言，接触之后喜欢上了javascript这门语言，看了一些js相关书籍，想起之前项目经理说过的一句话，只有站在创造者的角度去想问题，才能以最好的方法解决问题。如果我以Ext创造者的角度去考虑问题，那么我的技术可以更上一层楼吧！

因为没有用Ext做过真正项目，只是看了官方的例子和api文档，看了一些源码，以自己的理解山寨了一下，命名为Design。之前看了< javascript设计模式>，思路大部分都来源于这本书，做这个只是兴趣爱好，功能上有很多细节没有实现（工作量较大），项目中用到什么功能就去完善那个功能。之前失败五次都因设计上不合理不得不重新做，而这回感觉还不错所以就拿出来给客位看官瞧瞧，如有建议还请多多指教。

使用的类库：

    jquery   // 因为jquery的插件比较丰富所以放弃使用Ext Core而选择jquery

    jquery 树插件 zTree

   jscal2 日期控件 

   TrimPath javascript模板引擎

   highcharts javascript 图表插件

下面先介绍主要的功能，下面列出的是项目中主要实现的功能。

1、类体系

Extjs中得类体系非常出色，这里我模仿了Extjs类体系中主要的功能，主要有 define(定义类)、create(创建对象)、widget(使用别名创建对象)。

define函数主要有2个参数，参数1是类名也是js文件的路径，参数2是配置参数。

Design.define(“Design.panel.Panel”, {      
    extend: ‘Design. Compoment,             // 继承某个类
    requires: [‘Design. toolbar.Toolbar’], // 这个类需要关联其它的类
    alias: 'widget.panel’,                  // 这个类的别名
    mixins: ['Design.util.Observable']       // 混入某个类
    constructure:function(){},               // 构造函数
});

在上面我们定义了一个类，就可以使用create函数来创建它。第一个参数是名称，第二个参数是参数，参数会被传送到上面的构造函数中。

var panel = Design.create("Design.panel.Panel",{
        id: 'panel',
	name: '面板'
});

widget与create几乎是一样的，唯一不同就是可以用别名来创建它，上面将Design.panel.Panel 别名定义成 panel。

var panel = Design.widget("panel",{
        id: 'panel',
	name: '面板'
});

2、Require按需加载JS文件，Extjs4中加入的功能，为了减少页面的压力，只加载需要的文件。

Design.setPath(“app”);   //配置路径。
Design.require(“Design.panel.Panel”);  //加载这个类，会加载 app/panel/Panel.js 这个文件。

上面两行代码是要去找 app/panel/Panel.js 并加载，在执行这个文件时 Design.define方法会检索extend、requires、mixins 属性会发现有关联类Design.Compoment、Design.toolbar.Toolbar’、 Design.util.Observable，所以会先加载这三个文件，完成后继续执行继承和混入。在Design.require方法执行完后会寻找页面中的Design.onRady方法并调用，在页面加载完成并且需要的文件加载完后执行，与jquery.ready类似。

 3、Design.util.Observable 监听者类

 继承或混入监听者对象可以使类可以被监听事件。

4、数据层

Design.data.Model 模型

Design.data.Store  数据源 

Model可以定义字段，而Store可以看成是模型的集合，主要用于控件装载模型作为显示内容，与监听数据的变化以及时更新控件。

5、Design. Compoment 基础组件类

这个基础组件类实现了对象与对象之间相组合的规则（组合模式）。

以表格为例它就组合了很多个对象 row（行）、cell（列）、table（表格）、header（标题栏）以及panel（面板），每一个组件对象中都会有一个HTMLElement对象，组合后将会生成下面的html片段。

<div id="panel-1">
	<div id = "header-1">
		标题
	</div>
	<table id = "table-1">
		<tr id = "row-1">
			<td id = "cell-1"></td>
		</tr>
	</table>
</div>

其中id可以使用var panel = Design.getCmp('panel-1')来获取这个控件对象,panel. destroy ()来销毁这个控件。

还实现一些基础功能：显示、销毁、大小改变、初始化Element、初始化子项、回调函数 ….等功能，几乎所有组件都继承自Compoment类。

下面说说缺点，缺点是没能实现Extjs中得layout布局功能（没有思路）导致组件之间无法灵活的布局（但可以设置Style的float属性来布局）、浏览器兼容有时需要配置style属性自己来写兼容样式（也可以说灵活吧！），以及性能上有些不理想。先介绍到这里，下面是一些截图 与Extjs相比较，第一张图是 Extjs官方例子group-header-grid 第二张是Design做出的效果，也可以比较下Extjs与Design的代码。

Code:

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    // sample static data for the store
    var myData = [] // 省略;

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [{
            text     : 'Company',
            flex     : 1,
            sortable : false,
            dataIndex: 'company'
        }, {
            text: 'Stock Price',
            columns: [{
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            }, {
                text     : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            }, {
                text     : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            }]
        }, {
            text     : 'Last Updated',
            width    : 85,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        }],
        height: 350,
        width: 600,
        title: 'Grouped Header Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });
});

Code

Design.Loader.setPath('Design', '../../src');
Design.require(['Design.grid.Panel', 'Design.data.Model','Design.data.Store']);  // 本例中需要用到这三个类


var myData = [] // 数据较大省略

Design.onReady(function(){
	
	Design.define('GridModel', {    // 声明模型
		extend: 'Design.data.Model',
		fields: [{
			name: 'company',
			type: 'string'
		},{
			name: 'price',
			type: 'string'
		},{
			name: 'change',
			type: 'string'
		},{
			name: 'pctChange',
			type: 'string'
		},{
			name: 'lastChange',
			type: 'string'
		}]
	});
	
	var store = Design.create('Design.data.Store', {  // 创建模型集合
		model: 'GridModel',
		data: myData
	});
	
	function change(m,val) {   
		if (val > 0) {
			return '<span style="color:green;">' + val + '</span>';
		} else if (val < 0) {
			return '<span style="color:red;">' + val + '</span>';
		}
		return val;
	}
	
	function pctChange(m,val) {
		if (val > 0) {
			return '<span style="color:green;">' + val + '%</span>';
		} else if (val < 0) {
			return '<span style="color:red;">' + val + '%</span>';
		}
		return val;
	}
	
	function lastChange(m,val) {
		return Design.dateFormat(new Date(val),"yyyy年MM月dd日");
	}
	
	function price(m,val) {
		if (!val) {
			return val
		}
		return "$ " + val;
	}
	
	var grid = Design.widget('grid', {    // 创建一个表格
		title: {
			text: 'Grouped Header Grid'  // 标题
		},
		style: {						// 表格的样式
			height: 350,  				// 表格高度
			width: 600					// 表格宽度
		},
		columns: [{						// 列的配置与Extjs非常相似		
			text: 'company', 
			width: 200, 
			dataIndex: 'company', 		
			locked: true				
		}, {
			text: 'Stock Price', 
			columns: [					
				{text: 'price', width: 125, dataIndex: 'price', renderer: price},
				{text: 'change', width: 125, dataIndex: 'change', renderer: change},
				{text: 'pctChange', width: 125, dataIndex: 'pctChange', renderer: pctChange}
			]
		}, {
			text: 'lastChange', 
			width: 135, 
			dataIndex: 'lastChange', 
			renderer: lastChange
		}],
		drag: true,						// 使表格变为可拖动相当定义成了Ext.window.Window
		store:store						
	});
	
	grid.show();						// 显示到页面
	
	
});	

接下来发一些演示截图与代码，大部分都是模仿Extjs例子做的，感兴趣的话可以下载源码。

表格工具栏演示。

var grid = Design.widget('grid', {
	title: {
		text: 'toolbar'
	},
	toolbar: [{
		dock: 'top',
		items: [{
			xtype: 'textfield',
			style: {
				'float': 'left'
			},
			labelWidth: 40,
			label: 'text',
			fieldStyle: {
				width: 100
			},
			handler: function() {
				
			}
		},{
			xtype: 'radiogroup',
			style: {
				float: 'left'
			},
			items: [
				{boxLabel: 'radio1', value:'1', name: 'chartType', checked: true},
				{boxLabel: 'radio2', name: 'chartType', value:'2'}
			]
		},{
			xtype:'combobox',
			label:'combobox',
			displayField: 'value',
			valueField: 'id',
			allowBlank: false,
			data: [{id: 1, value: 'javascript1'}, {id: 0, value: 'javascript2'}],
			name:'holdData'
		},{
			xtype: 'button',
			iconCls: 'icon-plus',
			style: {
				'float': 'left'
			},
			label: 'button',
			handler: function() {
				
			}
		}]
	}],
	drag: true,
	bodyPadding: 0,
	columnHeight: 40,
	style: {
		height: 350,
		width: 600
	},
	columns: [
		{text: 'company', width: 200, dataIndex: 'company', locked: true}, 
		{text: 'price', width: 125, dataIndex: 'price', renderer: price},
		{text: 'change', width: 125, dataIndex: 'change', renderer: change},
		{text: 'pctChange', width: 125, dataIndex: 'pctChange', renderer: pctChange},
		{text: 'lastChange', width: 135, dataIndex: 'lastChange', renderer: lastChange}
	],
	store:store
});

grid.show('body');

表格分页演示。

var grid = Design.widget('grid', {
	title: {
		text: 'grid'
	},
	bodyPadding: 0,
	columnHeight: 40,
	style: {
		height: 350,
		width: 600
	},
	columns: [
		{text: 'company', width: 200, dataIndex: 'company', locked: true}, 
		{text: 'price', width: 125, dataIndex: 'price', locked: true, renderer: price},
		{text: 'change', width: 125, dataIndex: 'change', renderer: change},
		{text: 'pctChange', width: 125, dataIndex: 'pctChange', renderer: pctChange},
		{text: 'lastChange', width: 135, dataIndex: 'lastChange', renderer: lastChange}
	],
	store:store,
	drag: true,
	toolbar: [{
		dock: 'bottom',
		items: [{
			xtype: 'pagination',
			store: store,
			style: {
				float: 'right'
			}
		}]
	}]
});
grid.show();

表单演示1. 下面的form中日期控件扩展自jquery的 jscal2  日期控件。

var form = Design.widget('form', {
	style:{
		width: 400,
		height: 550
	},
	drag: true,
	title: {
		text: 'form'
	},
	bodyPadding: 30,
	fieldDefaults: {
		labelWidth: 50,
		fieldStyle:{
			width: 280
		}
	},
	items: [{
		xtype:'textfield',
		id: 'name',
		label:'姓名',
		allowBlank: false,
		name:'name'
	},{
		xtype:'combobox',
		label:'性别',
		displayField: 'value',
		valueField: 'id',
		allowBlank: false,
		data: [{id: 1, value: '男'}, {id: 0, value: '女'}],
		name:'holdData'
	},{
		xtype:'datefield',
		id: 'date',
		label:'日期',
		allowBlank: false,
		name:'name'
	},{
		xtype:'fieldcontainer',
		label:'电话',
		items:[
			{xtype:'displayfield',value:'(',fieldStyle:{'padding-right':'5px'}},
			{xtype:'textfield',labelWidth:0,fieldStyle:{width:'23px'}},
			{xtype:'displayfield',value:')',fieldStyle:{'padding-left':'5px','padding-right':'5px'}},
			{xtype:'textfield',labelWidth:0,fieldStyle:{width:'30px'}},
			{xtype:'displayfield',value:'-',fieldStyle:{'padding-left':'5px','padding-right':'5px'}},
			{xtype:'textfield',labelWidth:0,fieldStyle:{width:'30px'}
		}]
	},{
		xtype:'textareafield',
		label:'备注',
		name:'name'
	},{
		xtype:'fieldset',
		title:'选填内容',
		items:[{
			xtype:'fieldcontainer',
			label:'爱好',
			labelWidth: 50,
			fieldStyle:{
				width:185,
				height:100
			},
			items:(function(){
				var items = [{
					xtype:'radio',
					name:'color',
					fieldStyle:{
						width:70
					},
					boxLabel:'美工'
				}]
				for(var i=0;i<10;i++){
					items.push({
						xtype:'radio',
						name:'color',
						fieldStyle:{
							width:70
						},
						boxLabel:'码农'
					})
				}
				return items
			})()
		},{
			xtype:'textfield',
			label:'姓名',
			labelWidth: 50,
			fieldStyle:{
				width:'185'
			}
		},{
			xtype:'fieldcontainer',
			label:'宠物',
			items:[{
				xtype:'checkbox',
				boxLabel:'dog'
			},{
				xtype:'checkbox',
				boxLabel:'cat'
			}]
		}]
	}],
	buttons: [{
		text: '确定',
		handler: function() {
			var name = Design.getCmp('name');
			alert(name.getValue());
			//alert('ff');
		}
	}, {
		text: '取消',
		handler: function() {
			alert('cancel');
		}
	}]
});




form.show();

表单演示2.

var form = Design.widget('form', {
	style:{
		width: 605,
		height: 350
	},
	drag: true,
	title: {
		text: 'fieldcontainer'
	},
	bodyPadding: 15,
	fieldDefaults: {
		labelWidth: 100,
		fieldStyle:{
			width: 282
		}
	},
	items: [{
		xtype:'textfield',
		label:'Email Address',
		allowBlank: false,
		name:'email',
		fieldStyle:{
			width: 460
		}
	},{
		xtype:'fieldcontainer',
		label:'Date Range',
		items:[
			{xtype:'datefield',name: 'startDate', labelWidth:0, allowBlank: false, fieldStyle:{width:'224px'}},
			{xtype:'datefield',name: 'endDate', labelWidth:10, allowBlank: false, fieldStyle:{width:'224px'}}
		]
	},{
		xtype:'fieldset',
		title:'Details',
		items:[{
			xtype:'fieldcontainer',
			label:'phone',
			labelWidth: 100,
			items:[
				{xtype:'displayfield',value:'(',fieldStyle:{'padding-right':'5px'}},
				{xtype:'textfield',labelWidth:0,fieldStyle:{width:'23px'}},
				{xtype:'displayfield',value:')',fieldStyle:{'padding-left':'5px','padding-right':'5px'}},
				{xtype:'textfield',labelWidth:0,fieldStyle:{width:'30px'}},
				{xtype:'displayfield',value:'-',fieldStyle:{'padding-left':'5px','padding-right':'5px'}},
				{xtype:'textfield',labelWidth:0,fieldStyle:{width:'30px'}
			}]
		},{
			xtype:'fieldcontainer',
			label:'Time worked',
			labelWidth: 100,
			items:[
				{xtype:'textfield',name: 'hours', labelWidth:0,fieldStyle:{width:'35px'}},
				{xtype:'displayfield',value:'hours',fieldStyle:{'padding-right':'1px'}},
				{xtype:'textfield',name: 'mins', fieldStyle:{width:'35px'}},
				{xtype:'displayfield',value:'mins',fieldStyle:{'padding-right':'1px'}}
			]
		},{
			xtype:'fieldcontainer',
			label:'Full Name',
			labelWidth: 100,
			
			items:[
				{xtype:'combobox',name: 'hours', labelWidth:0,fieldStyle:{width:'55px'},value: 'mrs', displayField: 'name', valueField: 'value', data: [{name: 'Mr', value: 'mr'},{name: 'Mrs',  value: 'mrs'}, {name: 'Miss', value: 'miss'}]},
				{xtype: 'textfield', name : 'firstName', labelWidth:10,  allowBlank: false, fieldStyle:{width:'180px'}},
				{xtype: 'textfield', name : 'lastName', labelWidth:10,  allowBlank: false, fieldStyle:{width:'180px'}}
			]
		}]
	}],
	buttons: [{
		text: 'Save',
		handler: function() {
			alert('ff');
		}
	}, {
		text: 'Cancel',
		handler: function() {
			alert('cancel');
		}
	}]
});




form.show();

表单演示3.

var form = Design.widget('form', {
	style:{
		width: 406,
		height: 460
	},
	drag: true,
	title: {
		text: 'fieldcontainer'
	},
	bodyPadding: 15,
	fieldDefaults: {
		labelWidth: 100,
		fieldStyle:{
			width: 180
		},
		labelStyle: {
			'font-weight':'bold',
			'padding':'0'
		},
		labelAlign: 'top'
	},
	items: [{
		xtype:'fieldcontainer',
		label:'Your Name',
		labelWidth: 100,
		fieldDefaults: {
			labelWidth: 50,
			fieldStyle:{
				width: 110
			}
		},
		items:[{
			xtype: 'textfield',
			name: 'firstName',
			labelAlign: 'top',
			label: 'First',
			allowBlank: false
		}, {
			xtype: 'textfield',
			labelAlign: 'top',
			name: 'middleInitial',
			label: 'MI',
			labelWidth: 30,
			fieldStyle:{
				width: 30
			},
			style:{
				'margin-left': '10px',
				'margin-right': '10px'
			}
		}, {
			xtype: 'textfield',
			name: 'lastName',
			labelAlign: 'top',
			label: 'Last',
			allowBlank: false,
			fieldStyle:{
				width: 200
			}
		}]
	},{
		xtype: 'textfield',
		name: 'firstName',
		vtype: 'email',
		label: 'Your Email Address',
		allowBlank: false,
		fieldStyle:{
			width: 364
		}
	}, {
		xtype: 'textfield',
		label: 'Subject',
		allowBlank: false,
		fieldStyle:{
			width: 364
		}
	}, {
		xtype: 'textareafield',
		label: 'Message',
		allowBlank: false,
		fieldStyle:{
			width: 364,
			height: 130
		}
	}],
	buttons: [{
		text: 'Save',
		handler: function() {
			alert('ff');
		}
	}, {
		text: 'Cancel',
		handler: function() {
			alert('cancel');
		}
	}]
});




form.show();

   组合功能表格与表单交互。

var grid = Design.widget('panel', {
	title: {
		text: 'grid'
	},
	style: {
		height: 550,
		width: 900
	},
	bodyStyle: {
		overflow: 'hidden'
	},
	drag: true,
	items: [{
		xtype: 'grid',
		bodyPadding: 0,
		columnHeight: 40,
		onItemSelect: function(models, event) {
			//alert('')
			Design.getCmp('form').setModel(models[0]);
		},
		stripeRows: true,
		style: {
			height: '100%',
			width: "60%",
			float: 'left'
		},
		columns: [
			{text: 'company', width: 200, dataIndex: 'company', locked: true}, 
			{text: 'price', width: 125, dataIndex: 'price', renderer: price},
			{text: 'change', width: 125, dataIndex: 'change', renderer: change},
			{text: 'pctChange', width: 125, dataIndex: 'pctChange', renderer: pctChange},
			{text: 'lastChange', width: 135, dataIndex: 'lastChange', renderer: lastChange},
			{text: 'rating', width: 135, dataIndex: 'rating', renderer: rating}
		],
		store:store
	},{
		xtype: 'form',
		id: 'form',
		items: [{
			xtype: 'fieldset',
			title: 'Company details',
			fieldDefaults: {
				labelWidth: '100'
			},
			items: [{
				xtype: 'textfield',
				label: 'Name',
				name: 'company'
			},{
				xtype: 'textfield',
				label: 'Price',
				name: 'price'
			},{
				xtype: 'textfield',
				label: '% Change',
				name: 'pctChange'
			},{
				xtype: 'datefield',
				label: 'Last Updated',
				name: 'lastChange'
			}, {
				xtype: 'fieldcontainer',
				label: 'Rating',
				fieldDefaults: {
					name: 'rating', 
					xtype: 'radio'
				},
				items: [{
					value: '0',
					boxLabel: 'A'
				}, {
					value: '1',
					boxLabel: 'B'
				}, {
					value: '2',
					boxLabel: 'C'
				}]
			}]
		}],
		style: {
			width: '40%',
			height: '100%',
			float: 'left'
		}
	}]
});

grid.show('body');

树列表例子 下面的树扩展自jquery的zTree插件

var tree = Design.widget('tree',{
	title: {
		text: 'tree'
	},
	drag: true,
	style: {
		width: 300,
		height: 500,
		'float': 'left'	
	},
	bodyStyle: {
		overflow: 'auto'
	},
	datas: jsonData
});

tree.show('body');

选项卡例子。

var tree = Design.widget('tabpanel',{
	title: {
		text: 'tree'
	},
	drag: true,
	style: {
		width: 600,
		height: 500
	},
	items: [{
		xtype: 'panel',
		style: {
			width: '100%',
			height: '100%'
		},
		html: '<h1>panel1</h1>',
		title: {
			text: 'panel1'
		}
	},{
		xtype: 'panel',
		style: {
			width: '100%',
			height: '100%'
		},
		html: '<h1>panel2</h1>',
		title: {
			text: 'panel2'
		}
	},{
		xtype: 'panel',
		style: {
			width: '100%',
			height: '100%'
		},
		html: '<h1>panel3</h1>',
		title: {
			text: 'panel3'
		}
	}]
});

tree.show('body');

图表演示下面图表扩展自javascript highcharts 插件。

Design.Loader.setPath('Design', '../../src');
Design.require(['Design.chart.Chart']); 

var data = [['第一季度', 20],['第二季度', 20],['第三季度', 20],['第四季度', 20],['第五季度', 20]];

Design.onReady(function(){
	
	var chart = Design.widget('chart', {
		title: {
			text: 'chart'
		},
		drag: true,
		style: {
			width: 500,
			height: 500,
			'float': 'left'	
		}
	});
	chart.show('body');
	chart.setPieChart(data, '营业额');
});	

代码下载：

http://download.csdn.net/detail/junjun16818/5108310