Extjs学习总结
@time 2018年4月14日21:18:44@author fuyilong
@home
EXtjs grid
首先，一个表格应该有列定义，即定义表头ColumnModel：
// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：
{header:'编号',dataIndex:'id',Sortable:true},
var ds = new Ext.data.Store();
ds.load();方法会对表格数据进行一次初始化
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();
2.如何在表格中添加CheckBox呢？
var sm = new Ext.grid.CheckboxSelectionModel();
new Ext.grid.RowNumberer(),//自动行号
3. 如何做Grid上触发事件呢？
4.如何做Grid中做出快捷菜单效果：
在grid 中作出右键菜单的的思路和步骤：
1. grid.addListener(‘rowContextMenu’,’rightClick’);//给Grid添加监听
2. var rightClick = new Ext.menu.Menu({})//new一个右键菜单对象并添加相关内容和菜单属性。
3. 注册右键监听事件：
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
4．(可选)注册右键菜单项里面的事件
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick');
}
4. 如何将一列中的数据根据要求进行改变呢？
给GridPanel添加底部按钮和分页信息
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
}),
给GridPanel添加顶部按钮和分页信息
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
如何在Grid的上方添加按钮呢？
添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条：
如何将GridPanel放入一个Panel或TabPanel中
注意：sortInfo:{field:"name",direction:"asc"} 是Ext.data.JsonStore()对象的一个属性，指定默认的排序列字段和排序方式。
bbar:new Ext.PagingToolbar();是GridPanel的一个属性，用来指定底部分页信息
tbar:new Ext.Toolbar()；用来指定是按钮是在gridPanel的上面还是下面。
自定义gridPanel底部分页工具条：需求根据用户选中的下拉选项中的值来分页：
两种分页条：每页固定条数的分页条 和 自定义选择每页内容条数的分页条
displayInfo: true,
items: ['-', '每页', {
xtype: 'combobox',
displayField: 'id', //获取的内容
valueField: 'value', //显示的内容
editable: false, //不允许编辑只能选择
allowBlank: false, //不允许为空
triggerAction: 'all', //请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，
//如果设为”all”的话，每次下拉均显示全部选项
width: 60,
listeners: {
render: function (comboBox) {comboBox.setValue(comboBox.ownerCt.getStore().getPageSize()); //使得下拉菜单的默认值是初始值
},
select: function (comboBox) {
var pSize = comboBox.getValue();
comboBox.ownerCt.getStore().pageSize = parseInt(pSize); //改变PagingToolbar的pageSize 值 comboBox.ownerCt.getStore().load({start: 0, limit: parseInt(pSize)});
}
},
在用ExtJs的时候经常需要使用Grid来显示数据，当数据过多时就需要翻页。Ext的Ext.PagingToolbar翻页提供了一个UI，真正的翻页是在store里面进行的。
总结：gridPanel的分页关键点在这里：分页主要是store的数据处理，
store.load({params:{start:0, limit:10}});//这是主要代码传递两个参数
var $inpTel = new Ext.form.TextField({
fieldLabel: '电话号',
labelWidth: 70,
regex: /^[1]\d{10}$/,
enableKeyEvents: true,//这个属性是允许注册键盘(按键）事件
margin: "10 10 0 10"
});
$inpTel.on('keyup', function () {// 不满足检查条件
if (this.getValue().length != 11) return;
// 满足检查条件，修改store请求参数
var params = {
'phone': $inpTel.getValue()
};
remoteStore.getConfig("proxy").setExtraParams(params);
remoteStore.load();
});
ComboBox需要结合Store一起使用
获取实际值是用，getValue()方法，
获取显示值是用，getRawValue()方法
对于单选的赋值，只要把value传递给combobox的setValue()方法就可以了。
对于多选的赋值，需要传递value的数组给setValue()方法。
combo内置了对多选的支持，只需要将multiSelect属性配置项设置为true即可
https://blog.csdn.net/evilcry2012/article/details/52918064 (ExtJS grid单选、多选，显示选择框列)
https://blog.csdn.net/angus_17/article/details/6913108 (Extjs)对于GridPanel的各种操作
extjs grid 中 Checkbox 单选和复选的如何设置？
列选择模式：
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:’ID’,
singleSelect:true//这样显示的就是单选按钮了，默认的singleSelect是false,
});
(1)注意后面紧跟的是回调函数，要习惯和接受这种写法
store.on(‘beforeLoad’,loadFun);
function loadFun(){
alert(111);
}
(2)也可这样来写：
Store.on(‘beforeLoad’,function(){
alert(‘111’);
});
在grid中定义好bbar:new Ext.PagingToolbar();后关键的代码是下面两步：
1、reader中配置总共的数据集和返回来的数据
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root' //这个属性是解析的是后台返回的哪个字段值
2、store的load方法传递start和limit参数
store.load({params:{start:0,limit:5}});//给load()传递两个参数，既可实现分页。
relayEvents();//将事件传递给另一个对象，让它去触发
relay:转发，接力赛，传递
Ext.util.Observable();
observable:观察者
listener:监视，监听
watch:监视，监听，观察
suspendEvents();将事件挂起，暂停，等某个事件执行完毕后再恢复
resumeEvents();恢复事件
handler:处理者，管理者，处理机
Extjs中注册和删除事件
wind.on(‘close’,closeHandler);
wind.un(‘show’,showHandler);
un();可以用来删除一个事件监听器
而purgeListeners();可以删除所有事件监听器
var textSearch = new Ext.form.TextField({
enableKeyEvents:true//这个属性可以相应键盘事件
//然后可以添加监听器
listeners:{
//在添加各种键盘事件
“keyUp”:function(){};
‘change’:function(){};
}
});
问题：
1. getForm()的basicForm是什么东西？
Ext.form.BasicForm的解析：
常用属性：
baseParams Object 传递到请求中的参数，如{id;'123',foo:'bar'}
fileUpload Boolean 设置表单是否进行文件上传
method String 设置表单提交方式GET或POST
reader DataReader 设置表单执行load读取数据时的数据读取器
timeout Number 设置表单动作的超时时间
常用方法：
getForm():Ext.form.BasicForm 获取表单面板基本表单对象
load(Object options):void 加载表单内容，为Ext.form.BasicForm.load代理
isValid():Boolean 如果客户端验证成功返回true
load(Object options):BasicForm 执行表单读取动作，配置对象options被传递到action中
loadRecord(Record record):BasicForm 从一个数据记录中读取数据到表单中
reset():BasicForm 重置表单
setValues(Array/Object values):BasicForm 成批设置表单字段值[{id:'name',value:'tom'},...]
submit(Object options):BasicForm 执行表单提交动作，配置对象options被传递到action中
//才能出现线框
border: true,
//frame: true,这个应该只能用在window中 让他和背景色相同
//对于年 Y为四位数字 y为后两位数字
//可以Y-m-d 也可以不用横杠则显示也没有横杠
format: 'Y-m-d',
//让输入框不能编辑 变成和点击右边图标的作用是一样的。这个好
editable: false,
//获得当前月份第一天显示 可以直接给出字符创'2017-04-21'
value: (new Date).getFirstDateOfMonth()
{
xtype: 'button',},
text: '提交',
handler: function() {
//直接用getForm().getValues()当参数提交
var form = Ext.getCmp('myForm').getForm();
var formValues = form.getValues();
Ext.Ajax.request({
url : '/extJS3.2Demo/FormCommitValueTest',
params : {
params : Ext.encode(formValues)//注意这个方法会将表单值解析成json对象
success : function (r,o){
Ext.Msg.alert('提示','提交成功');
},failure : function (r,o){
Ext.Msg.alert('提示','提交失败');
}});
}
2. form.isValid();是校验什么东西？
扫一扫
6983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
