ext学习笔记

ext3.0学习笔记

环境搭建

• 引入js文件

ext-base.js
ext-all.js
ext.lang-zh_CN.js

语法及函数

• 入口函数

Ext.onReady(直接填写定义的函数名即可)

• 弹窗函数

1. Ext.MessageBox.alert("弹窗标题","弹窗内容")

MessageBox:弹窗方法
alert：仅仅弹窗内容

2. Ext.Window()：该对象也可以做弹窗功能

window对象实例：
var win = new Ext.Window({ title: "测试标题", height: 300, width: 500, html: "<h1>测试内容</h1>" });
展示方法：
win.show();

3. Ext.MessageBox.confirm("弹窗标题","弹窗内容")

cofirm:表示弹窗有选择功能，yes/no

Ext.MessageBox.confirm("弹窗标题","弹窗内容",callback)；
//定义callback函数内容
function callback(id) { 
Ext.MessageBox.alert("提示","你选择的是:"+id); 
} 

callback:表示回调函数
id：表示用户选择的id值（yes/no）

4. Ext.MessageBox.prompt("弹窗标题","弹窗内容",callback)

prompt:表示可在弹窗中填写文本信息

此时回调函数定义格式：
function callback(id, text) { 
	if (id == "ok") { 
	Ext.MessageBox.alert("提示","你输入的是?：" + text); 
	} else { 
	Ext.MessageBox.alert("提示","你已经取消了输入！"); 
	} 
} 

5. 显示多行文本功能弹窗

代码实现：
Ext.MessageBox.show({ 
	title: '弹窗标题', 
	msg: '弹窗内容', 
	width: 300, 
	buttons: Ext.MessageBox.OKCANCEL, 
	multiline: true, 
	fn: callback//这个是Ext专属属性，用来指示处理函数名 
}); 
function callback(id, text) { 
	Ext.MessageBox.alert(text); 
}

6. 在弹框中设置多个按钮

代码实现：
Ext.MessageBox.show({ 
	title: '标题', 
	msg: '要显示的内容', 
	buttons: { yes: true, no: true, cancel: true }, 
	// buttons: { yes: "是啊", no: "不啊", cancel: "取消了啊" }, 
	fn: callback//这个是Ext专属属性，用来指示处理函数名 
}); 
function callback(id) { 
	Ext.MessageBox.alert("提示","你选择的是"+id); 
} 

7. 进度条弹窗

代码实现：
Ext.MessageBox.show({ 
	title: '请稍等', 
	msg: '加载中...', 
	width: 300, 
	progress: true, 
	closable: false 
}); 
var f = function (v) { 
	return function () { 
		if (v == 12) { 
			Ext.MessageBox.hide(); 
			Ext.MessageBox.alert('完成', '加载完毕!'); 
		} else { 
			var i = v / 11; 
			Ext.MessageBox.updateProgress(i, Math.round(100 * i) + '% 已经完成！'); 
		} 
	}; 
}; 
for (var i = 1; i < 13; i++) { 
	setTimeout(f(i), i * 500); 
} 

Ext.MessageBox.show()
调用格式：Ext.MessageBox.show(Object config)
参数说明：一个包含提示框配置信息的配置对象。
常用配置项：
title：提示框的标题
msg：显示的信息内容
buttons：一个包含配置信息的json对象或false不显示任何按钮，默认为false
可选值：
Ext.Msg.CANCEL
Ext.Msg.OK
Ext.Msg.OKCANCEL
Ext.Msg.YESNO
Ext.Msg.YESNOCANCEL
icon：样式文件
可选值：
Ext.Msg.ERROR
Ext.Msg.INFO
Ext.Msg.QUESTION
Ext.Msg.WARNING
fn：回调函数
width：对话框宽度，以像素为单位
minWidth：最小宽度
maxWidth：最大宽度
closable：是否显示右上角的关闭按钮，默认为true
modal：是否为模式窗口，默认为true
progress：是否显示一个进度条，默认为false，该进度条需要由程序控制滚动
progressText：进度条上显示的文字
wait：是否显示一个自动滚动的进度条，默认为false
prompt：是否显示一个单行文本域，默认为false
value：如果prompt为true，则value值将显示在文本域中
multiline：如果prompt为true，则是否显示多行文本域

当需要修改EditorGridPanel组建中部分数据，并获取修改内容提交保存。实现方法有两种，一种是动态保存，一种是修改后批量保存。

• 动态保存

动态保存修改内容，可用监听实现，可到底怎样才能在单元格修改后触发呢？这里做简单说明。我们可以直接在EditorGridPanel组件对象中添加afteredit监听（也有beforeedit监听，若需要，也可使用），它的参数为当前修改，可在此监听中获取相应数据并通过ajax完成修改。可通过其参数获取如下数据：
e.row;//修改过的行从0开始
e.column;//修改列索引
e.originalValue;//原始值
e.value;//当前值
e.grid;//当前修改的grid
e.field;//正在被编辑的字段名
e.record;//正在被编辑的行数据

代码实现：
//...
new Ext.grid.EditorGridPanel({
	clicksToEdit:1,
	forceValidation:true,
	frame : true,
	stripeRows:true,
	border:false,
	ds:ds,//配置数据源Store
	cm:cm,//配置列模型ColumnModel
	bbar:new Ext.PagingToolbar({
		pageSize:page,//页面大小参数page
		store:ds,
		displayInfo: true,
		afterPageText: '/ {0}',
		beforePageText: '页',
		firstText : "第一页",
		prevText : "上一页",
		nextText : "下一页",
		lastText : "最后页",
		refreshText : "刷新",
		displayMsg: '显示第 <em>{0}</em> 条到 <em>{1}</em> 条记录，一共 <em>{2}</em> 条',
		emptyMsg: "没有记录"
	}),
	loadMask:{msg:'数据加载中...'},
	listeners:{
		afteredit:function(e){
			//修改方法
			update(e.record.get("id"),e.field,e.value);
		}
	 }
})
//...

• 修改后批量保存

批量获取修改数据，可通过Ext.data.Store对象的getModifiedRecords()方法得到当前已修改的所有行数据的数组，可循环获取其中所需数据，重新组装成我们想要的数据，再作为ajaxc参数进行提交，实现操作。

//...
var arr = [];//声明空数组
var records = ds.getModifiedRecords();
Ext.each(records,function(record){//遍历行数据数组
	arr.push(record.data);
});
//...

renderer事件触发函数参数表达的意思：

renderer:function（value， cellmeta， record， rowIndex， columnIndex， store）{

}
1.value是当前单位格的值
2.cellmeta里保存的是cellId单位格id，id是列号，css是这个单位格的css样式。
3.record是所在行数据，你想要什么，record.data["id"]就获得了。
4.rowIndex是行号，不是从头往下数的意思，而是分页后的成果。
5.columnIndex列号。
6.store，这个是你创建表格时辰传递的ds，也就是说表格里所有的数据，你都可以随便调用，