Extjs--界面基本结构

这几天应新公司要求，开始学习Extjs，然后试着做了一个界面。

目前界面的需求已经都完成了，但是还有很多地方不是很清楚，特地记录学习一下。

写JS页面的时候比较痛苦，很多都忘记了，都是复制例子之后自己改的。除了开头的

Ext.BLANK_IMAGE_URL='../extsrc/resources/images/default/s.gif';
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";

也不知道具体什么用，先晾着

所有的代码都写在Ext.onReady( )里面了。

Ext.onReady(function(){   
	Ext.QuickTips.init();//QuickTips的作用是读取标签中的ext:qtip属性，并为它赋予显示提示的动作
});

store

//  store
    var store = new Ext.data.Store({      
        proxy: new Ext.data.ScriptTagProxy({//注意后台必须使用callback参数进行包装
            url: globalURL   //会向对应的Action传值
        }), 
        //对返回的呃Json进行解析，获取需要的值
	reader : new Ext.data.JsonReader({
				       	totalProperty : 'totalCount',
					root : 'root'
					}, [{
						name : 'majorId'
					}, {
						name : 'majorName'
					}, {
						name : 'majorCode'
					}, {
						name : 'majorUseFlag'
					},{
						name : 'flag'
					},{
						name : 'majorStime'
					},																
					{
						name : 'majorEtime'
					}																
			])   
       // sortInfo:{field:'majorId', direction:'ASC'}   排序
    });
store.load({params : {start : 0,limit : 30}});    //重新加载一下

checkbox

var checkbox = new Ext.form.Checkbox({
    	id : 'checkbox', 
    	boxLabel : '显示历史'
    	//labelAlign : 'right',  这个属性IE8下目测没有效果
       // name : 'no',  
       // inputValue : 1,  
       // checked : false,  
       // handler : checkboxshow   这个属性IE8下目测没有效果，但是下面的 listeners 就可以了，不知道为什么

		listeners:{
			   'check':function(checkbox,checked){//这个checked 的值是自动填充的并非要求传入的参数，即是否有勾，为boolean类型							       //checkbox 即他自身
					var delBut = Ext.getCmp('delBut');    //可通过 id 获取对应的组件  
		    			var celBut = Ext.getCmp('celBut');
					if(checked){
						alert("checked");
				    	        celBut.show();
				    	        delBut.hide();
					}else{
						alert("not checked");
				    	        delBut.show();
				    	        celBut.hide();
					}
				}
		}
}); 

sm

var sm = new Ext.grid.CheckboxSelectionModel({boxLabel: '全选'});//定义sm，这个 全选 在IE8中目测无效  

cm

var cm = new Ext.grid.ColumnModel([//定义cm ,以下为对应的列，和列对应的属性
           sm,
         {
           id:'majorId',
           header: "专业序号",
           width:200,
           dataIndex: 'majorId',
           editor:new Ext.form.TextField()
           
        },{
            id:'majorName',
            header: "专业名称",
            width:200,
            dataIndex: 'majorName',
            editor:new Ext.form.TextField()
           
     //      ,renderer:sourceRenderer
           
        },{
           id:'majorCode',
           header: "专业编码",
           width:200,
           dataIndex: 'majorCode'
           
        },
        {
           id:'majorStime',
           header: "开始时间",
           width:200,
           dataIndex: 'majorStime'
           
        },
        {
           id:'majorEtime',
           header: "结束时间",
           width:200,
           dataIndex: 'majorEtime'
                       

           
        },
        {
            id:'majorUseFlag',
            header: "使用标志",
            width:100,
            dataIndex: 'majorUseFlag',
            editor:new Ext.form.TextField()         
         },
         //这里定义了一组行按钮放在每行的末尾，用于单项删除，后面有 cellclick 事件与之对应
         {  header: "", 
            dataIndex: "delButton",
            width: 50,
            renderer: function (value, cellmeta) {
             		 return "<INPUT type='button' value='删除'>";}
         }
    ]);
   	cm.defaultSortable = true;    //指定是否可以排序，默认为 false

各种页面响应的调用函数

	var newrecord = Ext.data.Record.create([
		
			{ 
				name : 'majorId',
				type : 'string'
			},	{
				name : 'majorName',
				type : 'string'
			}, 	{
				name : 'majorCode',
				type : 'string'
			},{
				name : 'majorUseFlag',
				type : 'string'
			},{
				name : 'flag',
				type : 'string'
			}
	]);
	
		
	
	function doadd(){
		var newrrecord = new newrecord({
					
					majorId:'',
					majorName : '',
					majorCode : '',
					majorUseFlag:'',
					flag: '1'

				})
		grid.stopEditing();
		store.insert(0, newrrecord);
		
	}
	
	function dosave() {
		var m = grid.store.getModifiedRecords();
		var jsonData = '[';
		for (var i = 0; i < m.length; i++) { // m表示被修改的行
			if(m[i].get('majorId')==''){
				Ext.Msg.alert('信息提示', '专业序号不能为空！');
				return false;
			}
			if(m[i].get('majorName')==''){
				Ext.Msg.alert('信息提示', '专业名称不能为空！');
				return false;
			}
			/*if(m[i].get('majorCode')==''){
				Ext.Msg.alert('信息提示', '专业编码不能为空！');
				return false;
			}
			if(m[i].get('majorUseFlag')==''){
				Ext.Msg.alert('信息提示', '使用标志不能为空！');
				return false;
			}*/
			var n=store.getCount();
			jsonData = jsonData + Ext.util.JSON.encode(m[i].data) + ',';
		}
		jsonData += ']';
		if (jsonData == '[]') {
			Ext.Msg.alert('信息提示', '没有发现保存项，请确认有保存项！');
			return false;
		}

		Ext.Msg.confirm('信息', '确定要保存所选项吗?', function(btn) {
			if (btn == 'yes') {
				Ext.MessageBox.wait("正在保存", "请稍候...");
					Ext.Ajax.request({
				   	url : '../control/IndexMajor?act=saveMajor',
				   	params : {
				       jsonData : jsonData
				   	},
				   	method: 'POST',
			       	success: function (request ) {
			            var message = request.responseText;								
						var resp=Ext.util.JSON.decode(request.responseText);
						if(resp.success == 'fail'){
							Ext.Msg.alert('信息','<center>保存项保存失败!<p>'+ resp.Info+'</center>');
						}
						else{
							Ext.Msg.alert('信息','保存项保存成功！');
							store.each(function(record) {
								record.commit();
							})
							loadF = 0;
							selectedrecord = null;							
							grid.getView().refresh();
							saved=true;	
							store.reload();
							renderGrid();
						}  
			       	},			
				   	failure: function ( result, request) { 
					        Ext.Msg.alert('错误','保存时出现未知错误.');  
				   	} 
				  });
		
			}
		})

	}

	
	function dodelete(){
		var m = grid.getSelections();
		if(m.length <= 0){
			Ext.Msg.alert('信息','<center>请至少选择一行数据!</center>');
		}else{
			Ext.MessageBox.confirm('确认删除', '你真的要删除所选行记录吗?', function(btn) {
						if (btn == 'yes') {
							Ext.MessageBox.wait("正在删除", "请稍候...");
							var majorCodes = '';
				            for(var i=0;i<m.length-1;i++){
				             majorCodes += m[i].get('majorCode')+','; 
				            }
				            majorCodes +=m[m.length-1].get('majorCode');	
					Ext.Ajax.request({
					   	url : '../control/IndexMajor?act=deleteMajor',
					   	params : {
					       majorCodes : majorCodes
					   	},
					   	method: 'POST',
				       	success: function (request ) {
							var resp=Ext.util.JSON.decode(request.responseText);
							if(resp.success == 'fail'){
								Ext.Msg.alert('信息','<center>记录删除失败!<p>'+ resp.Info+'</center>');
							}
							else{
								Ext.Msg.alert('提示', '记录删除成功！');
								store.reload();
								grid.getView().refresh();
								store.commitChanges();
							}
				       	},			
					   	failure: function ( result, request) { 
						        Ext.Msg.alert('错误','删除时出现未知错误.'); 
					   	} 
					  });
					}
				})
			}
	}
	
	//撤销删除
	function canceldel(){
		historyFlag = "mark";
		var m = grid.getSelections();
		if(m.length <= 0){
			Ext.Msg.alert('信息','<center>请至少选择一行数据!</center>');
		}else{
			Ext.MessageBox.confirm('确认撤销删除', '你真的要恢复所选行记录吗?', function(btn) {
						if (btn == 'yes') {
							Ext.MessageBox.wait("正在恢复", "请稍候...");
							var majorCodes = '';
				            for(var i=0;i<m.length-1;i++){
				             majorCodes += m[i].get('majorCode')+','; 
				            }
				            majorCodes +=m[m.length-1].get('majorCode');	
					Ext.Ajax.request({
					   	url : '../control/IndexMajor?act=deleteMajor',
					   	params : {
					       majorCodes : majorCodes,
					       historyFlag :historyFlag
					   	},
					   	method: 'POST',
				       	success: function (request ) {
							var resp=Ext.util.JSON.decode(request.responseText);
							if(resp.success == 'fail'){
								Ext.Msg.alert('信息','<center>记录恢复失败!<p>'+ resp.Info+'</center>');
							}
							else{
								Ext.Msg.alert('提示', '记录恢复成功！');
								store.reload();
								grid.getView().refresh();
								store.commitChanges();
							}
				       	},			
					   	failure: function ( result, request) { 
						        Ext.Msg.alert('错误','恢复时出现未知错误.'); 
					   	} 
					  });
					}
				})
			}
	}
	    function dosearch() {
    	var delBut = Ext.getCmp('delBut');
		var celBut = Ext.getCmp('celBut');
		var newBut = Ext.getCmp('newBut');
		var saveBut = Ext.getCmp('saveBut');
   		// var historyBut = Ext.getCmp('checkbox');
    	if(Ext.getCmp('checkbox').getValue()){
 				//展示历史数据   		
    			//alert("checked");
		    	celBut.show();
		    	delBut.hide();
		    	newBut.hide();
		    	saveBut.hide();
		    	historyFlag = "mark";
		    	store.load({params : {start:0,limit:30,searchMajorId:searchMajorId,searchMajorName:searchMajorName,searchMajorCode:searchMajorCode,historyFlag:historyFlag}});
				reader : new Ext.data.JsonReader({
									totalProperty : 'totalCount',
									root : 'root'
								}, [{
										name : 'majorId'
									}, {
										name : 'majorName'
									}, {
										name : 'majorCode'
									}, {
										name : 'majorUseFlag'
									},{
										name : 'flag'
									},{
										name : 'stime'
									},{
										name : 'etime'
									}																
					]);
    	
    	}else{
    			delBut.show();
    			newBut.show();
    			saveBut.show();
		    	celBut.hide();
    			//展示使用中数据
		    	var searchMajorId = sMajorId.getValue();
				var searchMajorName = sMajorName.getValue();
				var searchMajorCode = sMajorCode.getValue();
				searchMajorName = encodeURIComponent(searchMajorName);
				//alert(searchMajorId);
				/*store = new Ext.data.Store({      
			        proxy: new Ext.data.ScriptTagProxy({//注意后台必须使用callback参数进行包装
			            url: globalURL
			        }), */
			    store.load({params : {start:0,limit:30,searchMajorId:searchMajorId,searchMajorName:searchMajorName,searchMajorCode:searchMajorCode}});
				reader : new Ext.data.JsonReader({
									totalProperty : 'totalCount',
									root : 'root'
								}, [{
										name : 'majorId'
									}, {
										name : 'majorName'
									}, {
										name : 'majorCode'
									}, {
										name : 'majorUseFlag'
									},{
										name : 'flag'
									},{
										name : 'stime'
									},{
										name : 'etime'
									}																
					]);
		       // sortInfo:{field:'majorId', direction:'ASC'}
    	}
		
		
		grid.reconfigure(store, cm);
		grid.getBottomToolbar().render();// 重新渲染询问工具栏
		grid.view.startCollapsed = false;
		
	};

tbar

var tbar = new Ext.Toolbar({
    	items : [   
		'专业序号',sMajorId,'-','专业名称','-',sMajorName,'-','专业编码',sMajorCode,'&nbsp ',
		 	{text:'查询',width:100,iconCls:'search',handler : dosearch},'&nbsp','-',
		        {text:'新增',width:100,iconCls:'user_add',handler : doadd,id:'newBut'},'&nbsp',
		{text:'保存',width:100,iconCls:'save',handler : dosave,id:'saveBut'},'&nbsp',
			{text:'删除',width:100,iconCls:'user_delete',handler : dodelete,id:'delBut'},'&nbsp',
			{text:'撤销删除',width:100,iconCls:'user_cel',handler : canceldel,id:'celBut',hidden:true},'&nbsp','-',
			checkbox
		]
            });

bbar

var bbar = new Ext.PagingToolbar({
				pageSize : 30,
				store : store,
				displayInfo : true,
				displayMsg : '共有 {2} 条记录.当前显示 {0} - {1}条记录.',
				emptyMsg : "没有数据"
			});

这个经常用到

function renderGrid() {
		store.load({
				params : {
						  start : 0,
						  limit : 30
					}
				  });
}

grid

var grid = new Ext.grid.EditorGridPanel({
    	id:'grid',
        store: store,
        cm: cm,
        height:Ext.getBody().getComputedHeight()-20,
        //title:'任务管理',
        frame:true,
      //  plugins:checkColumn,
        clicksToEdit:1,
        sm: sm,
        bbar: bbar,
        tbar: tbar,
        clickToEdit:2,
     	renderer:renderGrid()
});

viewport

//viewport
    var viewport =  new Ext.Viewport({
	   // region:'center', 
	    layout:'fit',   
	    split:true,   
	    collapsible: true,   
	    margins:'0 0 20 0',   
	    frame:true,   
	    items:[{autoScroll:false,items:[grid]}]
    });

cellclick事件

//添加删除按钮
	//添加cell单击事件
	grid.addListener('cellclick', cellclick);
	
	function cellclick(grid, rowIndex, columnIndex, e){  
			 //同上面 checkbox 的函数，
			 //这边的所有参数也是自动填充的，自动填充这个很不习惯，总想着要去传个值给他用，其实根本不用
		var fieldName = grid.getColumnModel().getDataIndex(columnIndex);    //获取点击的 cell 的 列名
　　    if (fieldName == "delButton") {
            					dodelete();
 　　    	} 
  	}