我的ExtJS学习之路 ——1

　　去年8月份进的公司，大约1个月后，经理告知新的系统需要ExtJS写前台，因公司没人写，我就被推到去写ExtJS。

　　之前就光学写后台了，刚开始有点吃力。

　　幸好《深入简出ExtJS》和随书的源码，学习效果非常的好。

　　后来经理给了jOffice的源码让我阅读[只看了前台]，后来证明，joffice的前台源码让我受益匪浅。

　　之后，公司完成2个项目的前台Ext，大部分都是小弟一人写的。

　　工作实际用到的东西，我会陆续的贴出来，希望和大家一块交流分享。

　　如有不当，还请指点。

 

　　因Ext过大，使用的时候，必须要考虑到性能问题。

　　在使用中，学着网上的示例，我将用到的东西，都封装为一个个组件，也可以说按照面向对象的写法去写JS。

实现的效果是这样的。。

需要用到的模拟数据： test.txt,    json格式的

{rowCount:5,result:[
　　{id:101,name:'aaaa',age:20,tel:'123132132'},
　　{id:102,name:'bbbb',age:23,tel:'12d32132'},
　　{id:103,name:'cccc',age:16,tel:'123d32132'},
　　{id:104,name:'dddd',age:21,tel:'123d2132'},
　　{id:105,name:'eeee',age:22,tel:'123f32132'}
]}

 

封装的Grid表格：

　　

Ext.namespace('Ext.cjl');
//封装表格
Ext.cjl.TestGrid = Ext.extend(Ext.grid.GridPanel, {
	//配置的一些属性
	//注意：封装表格组件，每一个都要一个唯一的Id
	id:'testgrid',
	title : '测试封装表格',
	baseUrl : 'test.txt',
	pageSize : 20,
	layout : 'fit',
	closable : true,
	loadMask : true,
	stripeRows : true,
	viewConfig : {
		forceFit : true
	},
	loadMask : {
		msg : '数据加载中.....'
	},
	closable : true,
	initComponent : function() {
		//复选框，显示列，读取输入的格式
		this.sm = new Ext.grid.CheckboxSelectionModel();
		this.cm = new Ext.grid.ColumnModel([this.sm, {
				header : 'ID编号',
				dataIndex : 'id'
			},{
				header : '姓名',
				dataIndex : 'name'
			},{
				header : '年龄',
				dataIndex : 'age'
			},{
				header:'联系电话',
				dataIndex:'tel'
			}]);
		this.record = Ext.data.Record.create([{
				name : 'id',
				type : 'int'
			}, {
				name : 'name',
				type : 'string'
			}, {
				name : 'age',
				type : 'int'
			}, {
				name : 'tel',
				type : 'string'
			}]);
		//载入数据
		this.store = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
					url : this.baseUrl + '?cmd=list'
				}),
				reader : new Ext.data.JsonReader({
					totalProperty : 'rowCount',
					root : 'result'
				}, this.record)
			});
		this.store.load({
			params : {
				start : 0,
				limit : this.pageSize
			}
		});
		//上工具条，右键菜单
		this.tbar = new Ext.Toolbar([{
				text : '刷新',
				handler : this.refresh.createDelegate(this)
			},{
				text : '新建',
				handler : this.add.createDelegate(this)
			},{
				text : '修改',
				handler : this.edit.createDelegate(this)
			},{
				text : '删除',
				handler : this.deleteOp.createDelegate(this)
			}]);
		this.contextmenu = new Ext.menu.Menu({
			items : [{
					text : '刷新',
					handler : this.refresh.createDelegate(this)
				}]
		});
		//分页
		this.bbar = new Ext.PagingToolbar({
			pageSize : this.pageSize,
			store : this.store,
			displayInfo : true,
			displayMsg : '显示第 {0} 条到 {1} 条，共 {2} 条',
			emptyMsg : '没有数据记录'
		});
		this.on('contextmenu', function(e) {
			e.preventDefault();
			this.contextmenu.showAt(e.getXY());
		});
		Ext.cjl.TestGrid.superclass.initComponent.call(this);
	},
	//自己写的function函数
	getSelectedRecord : function() {
		var rows = this.getSelectionModel().getSelections();
		if (rows.length <= 0) {
			return false;
		} else {
			return rows;
		}
	},
	getSelectedIds : function() {
		var s = this.getSelectedRecord();
		if (s != false) {
			var ids = new Array();
			Ext.each(s, function(item) {
				ids.push(item.data.id);
			});
			return Ext.encode(ids);
		} 
		else
			return false;
	},
	refresh : function() {
		this.store.removeAll();
		this.store.reload();
	},
	add : function(){
		alert('添加');
	},
	edit : function(){
		alert('修改');
	},
	deleteOp : function(){
		var ids=this.getSelectedIds();
		if(ids==false){
			Ext.Msg.alert('系统提示','请选择一行或多行进行操作！');
			return;
		}
		alert(ids);
	}
});
Ext.reg('testgrid',Ext.cjl.TestGrid);

　　需要一个html网页去显示：

　　　　

<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var tempGrid=new Ext.cjl.TestGrid();
    var win = new Ext.Window({
        title: '封装Grid',
        layout: 'fit',
        width: 800,
        height: 400,
        maximizable : true,
        resizable : false,
        closable: false,
        items:[tempGrid]
    });
    win.show();
});
</script>

 

注意引入  封装的js  ，和  ext本身需要的  1个css 和 2 个js 的文件。