1.设置label的对齐方式
labelAlign: 'left'
2.设置label的宽度
labelWidth:60,
3.设置整个组件的宽度
width
4.对于textfield可以设置的验证有哪些即Vtype
alpha,alphanum,email,url
5.如何自定义一个vypte
Ext.apply(Ext.form.field.VTypes, {
//IPAddress为vypte的名
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
//错误时显示的文本
IPAddressText: 'Must be a numeric IP address',
//字段的值
IPAddressMask: /[\d\.]/i
});
6.添加自己的样式
style: 'margin-top:15px',
7.找store
Ext.data.StoreManager.lookup('UserStore')
找model
Ext.ModelManager.getModel('User');
8.典型的 proxy配置
proxy:{
type:'ajax',
api:{
read:'app/data/users.json',
update:'app/data/updateUsers.json'
},
reader:{
type:'json',
root:'users',
successProperty:'success'
}
}
#grid.panel不显示红色三角号
view: Ext.grid.GridView({markDirty: false})
viewConfig: {
markDirty: false
}
9.设置label的宽度与对齐方式
labelWidth: 100,
labelAlign:'right'
10.如何在表单元素后加说明文字
用xtype:'fieldcontainter'
{
xtype : 'fieldcontainer',
labelWidth : 60,
fieldLabel : '联系电话',
layout : 'hbox',
width : 300,
items : [ {
xtype : 'textfield',
name : 'phone-1',
width : 40,
allowBlank : false
}, {
xtype : 'displayfield',
value : '-'
},]
}
11.为proxty的地址添加额外的参数
this.store.proxy.extraParams= {limit:5,cid:cid}
this.store.load();
12.自定义一fieldcontainer
var dataTypeStore=Ext.create('Ext.data.Store',{
fields:['name','value'],
data:[
{'name':'string','value':'string'},
{'name':'int','value':'int'},
{'name':'boolean','value':'boolean'}]
});
Ext.define('js.modelfield',{
extend:'Ext.form.FieldContainer',
labelWidth : 60,
fieldLabel : '字段名',
layout : 'hbox',
width : '100%',
items : [{
xtype : 'textfield',
name : 'fieldname[]',
width : 200,
allowBlank : false
},{
xtype : 'combobox',
fieldLabel:'数据类型',
labelAlign:'right',
name : 'fieldtype[]',
width : 200,
emptyText:'选择数据类型',
editable:false,
store:dataTypeStore,
queryMode:'local',
displayField:'name',
valueField:'value',
allowBlank : false
},
{
xtype : 'textfield',
labelAlign:'right',
labelWidth:40,
fieldLabel:'默认值',
name : 'defaultvalue[]',
width : 200
},{
xtype:'button',
text:'删除',
listeners:{
click:function(btn,e,ept){
var tempform=this.up('form');
var tempfielcontainer=this.up('fieldcontainer');
console.log(tempform);
console.log(tempfielcontainer);
tempform.remove(tempfielcontainer,true);
}
}
}]
});
13.Ext.apply, Ext.applyif, Ext.override之间的区别
Ext.apply, Ext.applyif, Ext.override 都是对对象 进行扩展的方法,Ext.extend则是对类 操作的方法。
Ext.apply 扩展时对已经存在的属性/方法会被覆盖掉, 通常用它来扩展普通对象.
Ext.applyif 扩展时不会覆盖已经存在的属性/方法,通常用它来扩展核心js,如Array.prototype,String.prototype等。
Ext.override 扩展某一个类的原型,可以覆盖toString方法。
Ext.extend 用来写类或继承,或者说用来扩展类。
14.在弹出窗口的表单中,如果想加载数据可以
form.loadRecord(model对象);
15.在弹出窗口的表单中,如果想修改其中某个字段的值
var form=win.down('putviewadd');
var bform=form.getForm();
bform.setValues({parentid:parentid});
16.为什么实例化treestore的model对象的时候会多出很多在model的fields中没有定义的字段?
17.extjs4 checktree父节点和子节点选中控制(权限控制树)
为树面板添加监听器
listener:
{
checkchange : function(node, checked) {
if (checked == true) {
node.checked = checked;
// console.dir(node.parentNode);
//alert(node.get("leaf"));
//获得父节点
pNode = node.parentNode;
//当checked == true通过循环将所有父节点选中
for (; pNode != null; pNode = pNode.parentNode) {
pNode.set("checked", true);
}
}
//当该节点有子节点时,将所有子节点选中删除
if (!node.get("leaf") && !checked)
node.cascade(function(node){
node.set('checked', false);
});
}
18.如果表单中fieldset
#自定义validator
IP地址验证
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i
});
19.不显示面板上的title这一条
header:false,
20.将数组转为json,然后通过ajax传给php
Ext.Array.each(records,function(rec){
var tempobj={moduleid:rec.get('id'),groupouser:rec.data.groupouser,identity:rec.data.groupouserid};
ids.push(tempobj);
});
var idsjson=Ext.JSON.encode(ids);
console.log(idsjson);
Ext.Ajax.request({
url:'/index.php/Sysuser/putviewedit',
method:'POST',
param:{name:'chen',age:222},
jsonData:idsjson,
success:function(response,opts){}
});
开始时间大于
Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);
if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
},
daterangeText: 'Start date must be less than end date',
password: function(val, field) {
if (field.initialPassField) {
var pwd = field.up('form').down('#' + field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'Passwords do not match'
});
labelAlign: 'left'
2.设置label的宽度
labelWidth:60,
3.设置整个组件的宽度
width
4.对于textfield可以设置的验证有哪些即Vtype
alpha,alphanum,email,url
5.如何自定义一个vypte
Ext.apply(Ext.form.field.VTypes, {
//IPAddress为vypte的名
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
//错误时显示的文本
IPAddressText: 'Must be a numeric IP address',
//字段的值
IPAddressMask: /[\d\.]/i
});
6.添加自己的样式
style: 'margin-top:15px',
7.找store
Ext.data.StoreManager.lookup('UserStore')
找model
Ext.ModelManager.getModel('User');
8.典型的 proxy配置
proxy:{
type:'ajax',
api:{
read:'app/data/users.json',
update:'app/data/updateUsers.json'
},
reader:{
type:'json',
root:'users',
successProperty:'success'
}
}
#grid.panel不显示红色三角号
view: Ext.grid.GridView({markDirty: false})
viewConfig: {
markDirty: false
}
9.设置label的宽度与对齐方式
labelWidth: 100,
labelAlign:'right'
10.如何在表单元素后加说明文字
用xtype:'fieldcontainter'
{
xtype : 'fieldcontainer',
labelWidth : 60,
fieldLabel : '联系电话',
layout : 'hbox',
width : 300,
items : [ {
xtype : 'textfield',
name : 'phone-1',
width : 40,
allowBlank : false
}, {
xtype : 'displayfield',
value : '-'
},]
}
11.为proxty的地址添加额外的参数
this.store.proxy.extraParams= {limit:5,cid:cid}
this.store.load();
12.自定义一fieldcontainer
var dataTypeStore=Ext.create('Ext.data.Store',{
fields:['name','value'],
data:[
{'name':'string','value':'string'},
{'name':'int','value':'int'},
{'name':'boolean','value':'boolean'}]
});
Ext.define('js.modelfield',{
extend:'Ext.form.FieldContainer',
labelWidth : 60,
fieldLabel : '字段名',
layout : 'hbox',
width : '100%',
items : [{
xtype : 'textfield',
name : 'fieldname[]',
width : 200,
allowBlank : false
},{
xtype : 'combobox',
fieldLabel:'数据类型',
labelAlign:'right',
name : 'fieldtype[]',
width : 200,
emptyText:'选择数据类型',
editable:false,
store:dataTypeStore,
queryMode:'local',
displayField:'name',
valueField:'value',
allowBlank : false
},
{
xtype : 'textfield',
labelAlign:'right',
labelWidth:40,
fieldLabel:'默认值',
name : 'defaultvalue[]',
width : 200
},{
xtype:'button',
text:'删除',
listeners:{
click:function(btn,e,ept){
var tempform=this.up('form');
var tempfielcontainer=this.up('fieldcontainer');
console.log(tempform);
console.log(tempfielcontainer);
tempform.remove(tempfielcontainer,true);
}
}
}]
});
13.Ext.apply, Ext.applyif, Ext.override之间的区别
Ext.apply, Ext.applyif, Ext.override 都是对对象 进行扩展的方法,Ext.extend则是对类 操作的方法。
Ext.apply 扩展时对已经存在的属性/方法会被覆盖掉, 通常用它来扩展普通对象.
Ext.applyif 扩展时不会覆盖已经存在的属性/方法,通常用它来扩展核心js,如Array.prototype,String.prototype等。
Ext.override 扩展某一个类的原型,可以覆盖toString方法。
Ext.extend 用来写类或继承,或者说用来扩展类。
14.在弹出窗口的表单中,如果想加载数据可以
form.loadRecord(model对象);
15.在弹出窗口的表单中,如果想修改其中某个字段的值
var form=win.down('putviewadd');
var bform=form.getForm();
bform.setValues({parentid:parentid});
16.为什么实例化treestore的model对象的时候会多出很多在model的fields中没有定义的字段?
17.extjs4 checktree父节点和子节点选中控制(权限控制树)
为树面板添加监听器
listener:
{
checkchange : function(node, checked) {
if (checked == true) {
node.checked = checked;
// console.dir(node.parentNode);
//alert(node.get("leaf"));
//获得父节点
pNode = node.parentNode;
//当checked == true通过循环将所有父节点选中
for (; pNode != null; pNode = pNode.parentNode) {
pNode.set("checked", true);
}
}
//当该节点有子节点时,将所有子节点选中删除
if (!node.get("leaf") && !checked)
node.cascade(function(node){
node.set('checked', false);
});
}
18.如果表单中fieldset
#自定义validator
IP地址验证
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i
});
19.不显示面板上的title这一条
header:false,
20.将数组转为json,然后通过ajax传给php
Ext.Array.each(records,function(rec){
var tempobj={moduleid:rec.get('id'),groupouser:rec.data.groupouser,identity:rec.data.groupouserid};
ids.push(tempobj);
});
var idsjson=Ext.JSON.encode(ids);
console.log(idsjson);
Ext.Ajax.request({
url:'/index.php/Sysuser/putviewedit',
method:'POST',
param:{name:'chen',age:222},
jsonData:idsjson,
success:function(response,opts){}
});
开始时间大于
Ext.apply(Ext.form.field.VTypes, {
daterange: function(val, field) {
var date = field.parseDate(val);
if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('form').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('form').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
},
daterangeText: 'Start date must be less than end date',
password: function(val, field) {
if (field.initialPassField) {
var pwd = field.up('form').down('#' + field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: 'Passwords do not match'
});