`
ootabc
  • 浏览: 110825 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

extjs项目整理二

阅读更多
girdpanel curd
/**
* viewConfig作用在grid's UI试图上的配置项对象, 任何Ext.grid.GridView可用的配置
*选项都可在这里指定。
* forceFit True表示为自动展开/缩小列的宽度以适应grid的宽度,这样就不会出现水
*平的滚动条。ColumnModel中任意的width的设置可覆盖此配置项。
**/
TabPanelGrid = Ext.extend(Ext.grid.GridPanel, {
	initComponent : function() {
		if(!this.csm){
			this.sm = new Ext.grid.CheckboxSelectionModel();
		}else{
			this.sm = this.csm;
		}
		//this.autoHeight = true;
		this.stripeRows = true;
		//this.border = false;
		this.viewConfig = {
			forceFit : true
		};
		this.createColumns();
		this.createBbar();
		this.createtbar();
		TabPanelGrid.superclass.initComponent.call(this);
	}
}		



CreateColumns

/**
* dataIndex(可选的)数据索引,相当于Grid记录集(Ext.data.Store里面的
* Ext.data.Record )*中字段名称,字段的值用于展示列里面的值(column's value)。*如不指定,Record*的数据列中的索引将作为列的索引。
**/
createColumns : function() {
		var cols = [];
		cols.push(this.sm);
		for ( var i = 0; i < this.cols.length; i++) {
			var f = this.cols[i];
			if(f.dataIndex)cols.push(f);
		}
		this.columns = cols;
	}


createBbar

	createBbar : function() {
		this.bbar = new Ext.PagingToolbar( {
			displayInfo : true,
			store : this.store
		});
	}



createTbar
createtbar : function() {
		this.tbar = new Ext.Toolbar( {
			items : [ "-", {
				text : '增加',
				handler : this.createRecord.createDelegate(this)
			}, "-", {
				text : '修改',
				handler : this.updateRecord.createDelegate(this)
			}, "-", {
				text : '删除',
				handler : this.removeRecord.createDelegate(this)
			}, "-", new Ext.ux.form.SearchField( {
				store : this.store,
				width : 150
			}) ]
		});
	}



createRecord

/**
*this.cols 是全局cols(初始化时的那个cols)
*cols 是函数里面声明的cols
**/
createRecord : function() {
		this.showWindow();
		form = this.getForm();
		form.baseParams = {
			create : true
		};
		//表单置空
		var emptyRecord = {};
		for ( var i = 0; i < this.cols.length; i++) {
				var f = this.cols[i].dataIndex;
				emptyRecord[f] = '';
		}
		form.setValues(emptyRecord);
	}


updateRecord
	updateRecord : function() {
		var r = this.getSelectedRecord();
		if (r != false) {
			this.showWindow();
			this.form = this.getForm();
			this.form.baseParams = {create : false};
			this.form.loadRecord(r);
		}
	}



getSelectedRecord

/**
*getSelectionModel返回grid的RowSelectionModel
*getSelections() : Array 
*返回以选取的纪录。Returns the selected records 
*getSelected() : Record 
*返回选区中的第一个记录。
**/
getSelectedRecord : function() {
		var sm = this.getSelectionModel();
		if (sm.getCount() == 0) {
			Ext.Msg.alert('信息', '请选择记录!');
			return false;
		} else {
			return sm.getSelections()[0];
	}
	}



getForm
/**
*getForm() : ext.form.BasicForm
*返回该面板包含的Form
**/
getForm : function() {
		return this.getFormPanel().getForm();
}	



getFormPanel

getFormPanel : function() {
		if (!this.gridForm) {
			this.gridForm = this.createForm();
		}
		return this.gridForm;
	}	



CreateForm

/**
*this.cols 初始化得到
* trackResetOnLoad : Boolean 
*如果为true,则表单对象的form.reset()方法重置到最后一次加载的数据或*setValues()数据,以相对于一开始创建表单那时的数据。
**/
createForm : function() {
		var items = new Array();
		for ( var i = 0; i < this.cols.length; i++) {
			var object = this.cols[i].formItem;
			if(object){
				items.push(object);
			}
		}
		var form = new Ext.form.FormPanel( {
			frame : true,
			defaultType : 'textfield',
			buttonAlign : 'center',
			labelAlign : 'rigth',
			labelWidth : 70,
			layout : 'form',
			trackResetOnLoad : true,
			url : this.formUrl,
			reader : this.store.reader,
			items : items,
			buttons : [ {
				text : '提交',
				handler : this.submintRecord.createDelegate(this)
			}, {
				text : '重置',
				handler : function() {
					form.getForm().reset();
				}
			} ]
		});
		return form;
	}



submintRecord
/**
* beginEdit() 属于record属性 
* 进入编辑。编辑期间,没有与所在的store任何关联的事件。
* endEdit()
* 结束编辑。如数据有变动,则会通知所在的store。
**/
submintRecord : function() {
		var form = this.getForm();
		var values = form.getFieldValues();
		if(!form.isValid()) return;
		var self = this;
		if (form.baseParams.create) {
			var data = new Ext.data.Record();
			for ( var name in values) {
				data.set(name,values[name]);
			}
		} else {
			var r = this.getSelectedRecord();
			r.beginEdit();
			for ( var name in values) {
				r.set(name, values[name]);
			}
			r.endEdit();
		}
		var tag = form.submit({
			success : function(form,action){
				if(action.result){
					if(form.baseParams.create)self.store.load();
				};
			},
			failure : function(form,action){
				Ext.Msg.alert("提示","操作错误!您可能没有权限或会话过期!");
			}
		});
		this.window.hide();
	}



removeRecord
removeRecord : function() {
		var r = this.getSelectedRecord();
		var self = this;
		if (r != false) {
			Ext.Msg.confirm("提示","是否确定删除!",function(btn){
				if(btn == 'yes'){
					Ext.Ajax.request({
					url:self.deleteUrl,
					params: { id: r.id},
					success:function(response, opts){
						self.store.load();
						try{
							var object = Ext.util.JSON.decode(response.responseText);
							if(object && !object.success){
								Ext.Msg.alert("错误!",object.msg);
							}
						}catch(e){

						}	
					},
					failure : function(response,Optional){
						Ext.Msg.alert("错误!",response.responseText);
					}
					});			
				}
			});
		}
	}



showWindow

/**
*closeAction : String 
*当关闭按钮被点击时执行的动作。“close”缺省的动作是从DOM树中移
*除window并彻底加以销毁。“hide”是另外一个有效的选项,只是在视
*觉上通过偏移到零下(negative)的区域的手法来隐藏,这样使得window可
*通过show 的方法再显示. 
*modal : Boolean 
*True 表示为当window显示时对其后面的一切内容进行遮罩,false表示为
*限制对其它UI元素的语法(默认为 false)。
*constrain : Boolean 
*True表示为将window约束在视图中显示,false表示为允许window在视
*图之外的地方显示(默认为false)。可选地设置constrainHeader使得头
*部只被约束。
*shim : Boolean 
*False表示为禁止用iframe填充,有些浏览器可能需要设置(默认为true)
*。注意此项只当floating = true时有效。
**/
showWindow : function() {
		if (!this.window) {
			var fromPanel = this.getFormPanel();
			var win = new Ext.Window( {
				title : 'user information',
				closeAction : 'hide',
				modal : true,
				constrain : true,
				shim : false,
				width : 300,
				items : [ fromPanel ]
			});
			win.show();
			this.window = win;
		} else {
			this.window.show();
		}
	}
分享到:
评论

相关推荐

    ExtJS项目后台模板

    已经整理,能直接看效果的哦,用着不错,要使用的拿走吧

    extjs 项目整理

    ### ExtJS 项目整理知识点详解 #### ExtJS 概述 - **定义**: ExtJS 是一种主要用于构建丰富、交互式的前端用户界面的框架。它基于 JavaScript 和 AJAX 技术,可以独立于后端技术使用,这使得开发者可以更加专注于...

    整理3种类型extjs

    EXTJS是一种流行的JavaScript库,用于构建富客户端Web应用程序。它提供了丰富的组件库,包括数据绑定、布局管理和用户界面元素。在这个文档中,我们将讨论三种类型的EXTJS,主要集中在它们在列表、特殊(如树形列表...

    Extjs4使用要点个人整理

    以下是我根据提供的文件名整理的关于ExtJS 4的关键知识点: 1. **控件属性**:在`Extjs 控件属性.doc`中,可能会涵盖ExtJS 4中的各种组件(如窗口、面板、表格等)的常用属性。这些属性用于定义组件的行为、外观和...

    Spring.Net+NHibenate+Asp.Net mvc +ExtJs 项目实例

    Spring.Net+NHibenate+Asp.Net mvc +ExtJs 系列文档 包含 6 个文档,以及4个demo ,以及包含一个NMG-2.1Nhibernate生成工具,可以生成实体对应的实体类以及对应的.hbm.xml类. 案例来自&lt;博客园&gt;孤独侠客(似水流年) 的 ...

    Extjs4_API文档整理.pdf

    ### Extjs4_API文档整理——深入理解类系统与编码规范 #### 一、概述:类系统的重要性 在《Extjs4_API文档整理.pdf》中,文档着重介绍了ExtJS4的类系统及其重要性。作为一款功能强大的前端框架,ExtJS4在版本升级...

    Extjs4开发笔记(收集整理).pdf

    Extjs4开发笔记(二)中说明了页面的各个部分被分离成头部、菜单、内容区和底部四个JS文件。这样的分离有助于提高代码的模块化和可维护性。Extjs4框架在组件创建和布局管理方面做了改进,比如在布局(layout)和区域...

    ExtJs资料

    项目中用到了extjs,为了方便自学整理了一些extjs的资料,大家互相学习啊。 --open source,free software

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    `Extjs学习笔记.docx` 可能是一位开发者或讲师整理的学习心得和笔记,可能包含了一些个人的理解、技巧、常见问题解答和解决方案。这种类型的文档通常会提供一些实战中的经验和见解,对于深化理解和解决问题可能非常...

    ExtJs源码上传和下载

    对于源码上传,如果你希望分享或备份你的ExtJs项目,你可以选择将源码上传到个人的代码仓库,如GitHub或GitLab。这不仅可以保护你的代码,还可以方便他人查看和贡献。在上传之前,确保你已经整理好项目结构,包含了...

    EXTJS Javascript HTML 代码格式化 工具

    EXTJS、JavaScript和HTML的代码格式化工具可以帮助自动整理代码的缩进、换行、括号对齐等,让原本杂乱的代码变得井井有条。这类工具通常具备以下特性: 1. 自定义规则:用户可以根据自己的喜好或团队规范设置代码...

    老师整理的extjs学习笔记

    #### 二、ExtJS 的 Heart—Ext.Element **2.1 如何理解 Ext.Element** `Ext.Element` 是 ExtJS 中的一个核心类,它提供了操作 DOM 节点的方法。通过这个类,开发者可以轻松地选择元素、修改样式、添加事件监听器等...

    EXTJS 目录文件打包压缩工具 并可加密解密

    标题提到的"EXTJS 目录文件打包压缩工具"是针对EXTJS项目开发的一种实用工具,它的主要目的是帮助开发者对EXTJS的源代码文件进行整理、压缩和打包。 在EXTJS开发过程中,通常会涉及到大量的JavaScript、CSS、图像和...

    Extjs4.0学习指南中文PDF版

    资源名称:Extjs4.0学习指南 中文PDF版内容简介:本书详细讲解了extjs的结构原理,用的实战项目进行讲解 ;Extjs4学习指南(仅供学习使用、转载需注明出处)Extjs4可用的学习资料少之又少,本文内容大部分为网络整理...

    Extjs4 学习指南

    文章内容主要来源于网络整理,目的是为了方便学习者掌握Extjs4的基础知识,所有内容应以Extjs4 API文档为准。下面我们将深入探讨文中提到的一些关键知识点。 1. **获取Extjs** - 要开始学习Extjs4,首先需要从官方...

    extjs study

    2. **J2ee项目开发Ext4环境准备.docx**:此文档着重于在Java EE(J2EE)环境中配置和使用ExtJS 4的步骤。可能包括安装必要的开发工具,如Sencha CMD,设置Maven或Gradle构建工具,以及配置服务器环境如Tomcat或Jetty...

    ExtJS实用开发指南.pdf

    #### 二、ExtJS环境搭建与基本使用 - **获取ExtJS**:访问官方网站http://extjs.com/download下载最新版本的ExtJS库文件。教程推荐使用的是2.0版本。 - **安装与配置**: - 将下载的文件解压至项目的指定目录。 -...

Global site tag (gtag.js) - Google Analytics