日期:2014-05-16  浏览次数:20363 次

extjs应用实例
一、js就一个文件:plans.js
Ext.namespace("com.ibeans.ui");


/**
 * 数据列表
 * @class com.ibeans.PlansGridPanel 
 * @extends Ext.grid.GridPanel
 */
PlansGridPanel = Ext.extend(Ext.grid.GridPanel,{
	//1、定义基本属性
	id : 'id_plans_gridpanel',
	region : 'center',
	frame : true,
	border : true,
	trackMouseOver : true,
	loadMask : true,
	viewConfig : {forceFit : true},
	
	
	
	//2、重写父类函数initComonent(),完成对象的构造和初始化 
    initComponent : function() {    //必须,  
        this.store = new Ext.data.JsonStore({
			url : rootPath+'/plans/plans_findPageList.action',
			totalProperty : 'totalSize',
			id : 'id',
			root : 'list',
			remoteSort : true,
			fields :[
				{name:"plans.id",mapping:"id"},
				{name:"plans.plansName",mapping:"plansName"},
				{name:"plans.plansType",mapping:"plansType"},
				{name:"plans.recorder",mapping:"recorder"},
				{name:"plans.orgId",mapping:"orgId"},
				{name:"plans.orgName",mapping:"orgName"},
				{name:"plans.compileOrgName",mapping:"compileOrgName"},
				{name:"plans.issueOrgName",mapping:"issueOrgName"},
				{name:"plans.issueDate",mapping:"issueDate"},
				{name:"plans.recordDate",mapping:"recordDate"},
				{name:"plans.updateDate",mapping:"updateDate"},
				{name:"plans.status",mapping:"status"},
				{name:"plans.remark",mapping:"remark"}
			]
		}); 
        this.store.load({
			params : {
				start : 0,
				limit : 15
			}
		});
		
		this.sm = new Ext.grid.CheckboxSelectionModel();
		
        this.cm = new Ext.grid.ColumnModel([
			new Ext.grid.RowNumberer(), 
			this.sm,
			{
				header : "预案名称",
				width : 120,
				sortable : true,
				dataIndex : 'plans.plansName'
			}, {
				header : "预案类型",
				width : 90,
				sortable : true,
				dataIndex : 'plans.plansType'		
			}, {
				header : "编制单位",
				width : 90,
				sortable : true,
				dataIndex : 'plans.compileOrgName'
			}, {
				header : "发布单位",
				width : 90,
				sortable : true,
				dataIndex : 'plans.issueOrgName'
			},{
				header : "发布时间",
				width : 90,
				sortable : true,
				dataIndex : 'plans.issueDate',
				renderer : function(value){
					var v = value.substring(0,10);
					return v;
				}
			},{
				header : "报备时间",
				width : 90,
				sortable : true,
				dataIndex : 'plans.recordDate'
			},{
				header : "预案状态",
				width : 90,
				sortable : true,
				dataIndex : 'plans.status',
				renderer : function(value) {
					if(value=="0") value="已保存";
					if(value=="1") value="已备案";
					if(value=="2") value="修订中";
					return value;
				}
			}
		]); 
        this.cm.defaultSortable = true; 
         
        this.tbar = new Ext.Toolbar([{
			text : '添加',
			tooltip : '添加',
			iconCls : 'icon-add',
			handler : function(){
				new EditWindow().show();
			},
			scope : this
		}, '-', {
			text : '删除',
			tooltip : '删除',
			iconCls : 'icon-del',
			handler : this.remove,
			scope : this
		
		},'-', {
			text : '导出',
			tooltip : '导出到Excel',
			iconCls : 'icon-excel',
			handler : this.doExport,
			scope : this
		
		}]);
		
        this.bbar = new Ext.PagingToolbar({
			pageSize : 15,
			store : this.store,
			displayInfo : true,
			displayMsg : '显示第 {0} 到第 {1},共 {2} 条',
			emptyMsg : "没有可显示的记录"
		});
		
        PlansGridPanel.superclass.initComponent.call(this,{});  //必须  
        //....  
       
    },
    
    
    //3、实现对gridpanel事件的监听
	listeners : {
		"rowdblclick" : function(grid, rowNum, e) {
			var record = grid.store.getAt(rowNum);
			var win = new EditWindow(grid,"edit");
			win.show();
		}
	},
    
	
    //4、以下为根据具体业务需要自定义的扩展方法
	refresh : function() {
		this.store.removeAll();
		this.store.reload();
	},

	remove : function() {
		var selectedKeys = this.selModel.selections.keys;
		if(selectedKeys.length<1){
			Ext.MessageBox.alert('提示', '请选择要删除的记录');
			return;
		}
		//处理删除动作
		Ext.MessageBox.confirm('提示', '确定要删除选中的记录吗?', function(btn) {
			if (btn == "yes") {
				Ext.MessageBox.show({
					msg : '正在请求数据, 请稍侯',
					progressText : '正在请求数据',
					width : 300,
					wait : true,
					waitC