1、例如想要实现以下功能，本来model中只有用户的firstname和lastname,但是在grid中展示还需要展示用户姓名，或者只展示用户姓名
{
text : ‘姓‘,
dataIndex : ‘firstName‘,
width : 150
}, {
text : ‘名‘,
dataIndex : ‘lastName‘,
width : 150
}, {
text : ‘用户姓名‘,
dataIndex : ‘lastName‘,
width : 150,
renderer : function(v, m, data, ri, ci) { var record = data.record; // 此处可以“加法”处理
return record.lastName + record.firstName; // 返回姓名
}
},
2、当前如果想让两行显示两列显示
此时可以设置它的 columns : 4 属性，主要确保两列的宽度不大于面板宽度即可，不然会被遮挡，这里是一个日期选择控件，外加一个下拉列表展示。
3、设置长宽、大小
padding : ‘10 5 10 45‘,// 此处是‘ 上 右 下 左’的顺序按照规格设定 margin : ‘10 0 0 15‘,// 此处是‘ 上 右 下 左’的顺序按照规格设定 width : 560, height : 320,
4、一些基础配置
文本框
xtype : ‘textfield‘, // 文本框 allowBlank : false, // 允许为空，此处是false:不允许为空
日期控件
xtype : ‘datefield‘, // 文本框
format: ‘Y-m-d‘, // 此处是日期格式
minValue: new Date(), // 时间限制
allowBlank : false,
editable : false,
注意：替换‘Y-m-d H:i:s‘中的各个字母,当然增加和减少都没有问题,留意大小写.可得到多种样式的日期格式.
Ext.Date的格式说明
d 01 to 31
D Mon to Sun
j 1 to 31
l Sunday to Saturday
N 1 (for Monday) through 7 (for Sunday)
S st, nd, rd or th. Works well with j
w 0 (for Sunday) to 6 (for Saturday)
z 0 to 364 (365 in leap years)
W 01 to 53
F January to December
m 01 to 12
M Jan to Dec
n 1 to 12
t 28 to 31
L 1 if it is a leap year, 0 otherwise.
o Examples: 1998 or 2004
Y Examples: 1999 or 2003
y Examples: 99 or 03
a am or pm
A AM or PM
g 1 to 12
G 0 to 23
h 01 to 12
H 00 to 23
i 00 to 59
s 00 to 59
u 001 to 999
O Example: +1030
P Example: -08:00
T Examples: EST, MDT, PDT ...
Z -43200 to 50400
c 2007-04-17T15:19:21+08:00
U 1193432466 or -2138434463
下拉列表框
xtype : ‘combo‘, // 文本框 emptyText : ‘请选择‘, editable : false, // 可以编辑，此处是false:不可编辑multiSelect : true, // 多选，
fieldLabel: ‘身份‘,
allowBlank: false,
xtype: ‘combo‘,
name: ‘type‘,
itemId: ‘type‘,
listeners : {
afterrender : function(combo){
if(me.type==‘达人‘){
combo.setValue(combo.getStore().getAt(0));
}else{
combo.setValue(combo.getStore().getAt(0));
}
}
},
store: {
fields: [‘time‘],
data: [{
time: ‘达人‘
}]
},
正则表达式
regex : /^[A-Za-z0-9]+$/, // 用法和js一样
几种默认验证类型
vtype : ‘url‘, vtypeText : ‘请填写正确的图片外链地址，例如：http://www.demo.com！‘, vtype默认的： alpha（只输入字母）， alphanum(只能输入字母和数字)， email(Email验证)， url（url验证）
5、获取Store数据源，可以这样子设置
store : Ext.create(‘Ext.data.Store‘, {
fields : [‘key‘, ‘value‘],
proxy : {
type : ‘ajax‘,
url : ‘../demo/demo.do‘,
reader : {
type : ‘json‘,
root : ‘data‘
}
},
autoLoad : true
}),
6、关于透传参数
xtype: ‘hidden‘,
其他用法与上面相同
7、关于上传图片、文件
xtype: ‘filefield‘,
fieldLabel : ‘图片名称‘,
itemId : ‘imageName‘,
name : ‘imageName‘,
width : 400,
labelWidth : 80,
padding : "25 5 10 15",
allowBlank : false,
listeners:{
change:function(newValue, oldValue, eOpts){
var ableFormats = new Array();
ableFormats[0] = "gif";
ableFormats[1] = "jpg";
ableFormats[2] = "png";
var formats = "";
var suffix = oldValue ? oldValue.substring(oldValue.lastIndexOf(‘.‘)+1) : undefined;
var fileName = oldValue ? oldValue.substring(oldValue.lastIndexOf(‘\\‘)+1) : undefined;
var bFlag = false;
for(var i=0;i<ableFormats.length;i++){
formats = formats + ableFormats[i]+",";
if(suffix.toLowerCase() == ableFormats[i].toLowerCase()){
bFlag = true;
}
}
if(bFlag == false){
Ext.getCmp(‘imageName‘).reset();
Ext.Msg.alert("提示","请上传"+formats+"格式文件");
}
}
}
此外，如果想要隐藏文本框，只保留按钮，并设定按钮上面的提示文字
buttonOnly: true, buttonText: ‘上传缩略图（建议尺寸：200像素 * 200像素）‘,
展示图片
xtype : ‘image‘,
8、关于Grid
Grid上面的按钮
tbar : [ {
xtype : ‘button‘,
text : ‘配置‘, // 按钮文本
ref : ‘addConfigForm‘, // 映射字段
iconCls : ‘table_add‘ // 按钮图标，不设置没有
}, {
xtype : ‘button‘,
text : ‘新增‘,
ref : ‘uploadConfigForm‘,
iconCls : ‘table_add‘
} ],
底部菜单栏
bbar : {
xtype : ‘pagingtoolbar‘,
store : ‘xx.yy.zz.aaStore‘,
dock : ‘bottom‘,
displayInfo : true
}
如果Grid显示行号，则此设置与columns的属性设置为一行上面
xtype : ‘rownumberer‘
设置单元格的监听事件
listeners : {
‘click‘ : function(grid, rowIndex, colIndex) {
// 获取数据
var data = grid.store.data.items[colIndex].data;
var showForm= Ext.create(‘form‘,{
id: data.id
});
showForm.show();
}
}
如何判断当前grid的列是否被选中
var sm = grid.getSelectionModel(); // 获取Grid选择对象
var selections = sm.getSelection();// 获取选择
var record = selections[0].data; // 获取选择的记录
if (selections == null || selections.length == 0) {
Ext.Msg.alert("提示", "请选择!");
return false;
}
9、设置弹框
var confirm = Ext.Msg.confirm(‘提示‘, ‘删除后不可恢复，确认要删除吗？‘,function(select){
if(select == ‘yes‘){
// 此处操作
......
｝
});
/**
* Ext.MessageBox.INFO
* Ext.MessageBox.WARNING
* Ext.MessageBox.QUESTION
* Ext.MessageBox.ERROR
*/
confirm.setIcon(Ext.MessageBox.WARNING);
Ext.Msg.show({
title : "提示",
msg : "请选择一条提示语类型编辑！"
});
Ext.Msg.alert("提示", "请勿添加重复数据!");
10、可编辑的插件
当前的store写在了当前页面，所以下面直接调用store
// 编辑插件
plugins : [
Ext.create(‘Ext.grid.plugin.RowEditing‘, {
clicksToMoveEditor : 2, // 双击进行修改 1-单击 2-双击 0-可取消双击/单击事件
saveBtnText : ‘保存‘,
cancelBtnText : ‘取消‘,
autoCancel : false,
cancelEdit : function(grid) {
var me = this;
me.getEditor().cancelEdit();
},
listeners : {
edit : function(ele) {
var id = ele.context.record.data.id;
var successMsg = (id == null || id == "") ? ‘创建成功‘ : ‘更新成功‘;
var failureMsg = (id == null || id == "") ? ‘创建失败‘ : ‘更新失败‘;
var record = ele.context.record.data;
Ext.Ajax.request({
url : ‘请求操作‘,
success : function() {
Ext.Msg.alert(‘提示‘, successMsg);
ele.grid.getStore().load();
},
failure : function() {
Ext.Msg.alert(‘提示‘, failureMsg);
},
params : {
id : record.id,
imageHrefUrl : record.imageHrefUrl
}
});
}
}
})
],
在Grid中需要设置
editor : {
xtype : "textfield",
maxLength : 500,
// vtype : ‘url‘,
// vtypeText : "请填写正确的图片外链地址，例如：http://www.test.com！",
allowBlank : true
},
然后在初始化数据时候
initComponent : function() {
var me = this;
store.on(‘beforeload‘, function(store, options) {
Ext.apply(store.proxy.extraParams, { id: this.id});
});
store.load();
this.callParent(arguments);
},
11、Ajax请求数据
Ext.Ajax.request({
url :"url",
params : { id:id },
async : false,
method : "POST",
timeout : 0.5 * 60 * 60 * 1000,
success : function(response,opts){
var resObj = Ext.decode(response.responseText);
if(resObj.success){
var obj = resObj.obj;
}
}
});
表单提交
form.submit({
url : "url",
params : {id : id},
waitMsg : "数据保存中",
timeout : 0.5 * 60 * 60 * 1000,
success : function(form, action) {
var result = action.result.result;
if (result) {
Ext.Msg.alert("提示", "数据保存成功!");
me.parent.getStore().reload();
me.destroy();
} else {
Ext.Msg.alert("提示", "数据保存失败，请联系管理员!");
}
},
failure : function(form, action) {
Ext.Msg.alert("提示", "数据保存失败，请重试！");
}
});
// 取消"demoForm button[ref=cancel]":{ click:function(btn){ var me = btn.up("demoForm"); me.parent.getStore().reload(); me.destroy(); }}
12、图表、报表
var colors = [‘#6bd3dd‘];
Ext.define(‘Ext.chart.theme.MyFancy‘, {
extend: ‘Ext.chart.theme.Base‘,
constructor: function(config) {
this.callParent([Ext.apply({
colors: colors
}, config)]);
}
});
Ext.define("chart",{
extend:"Ext.chart.Chart",
theme: ‘MyFancy‘,
alias:"widget.columnchart",
store:"Store",
style: ‘background:#fff‘,
animate: true,
//shadow: true,
id:"columnchart",
axes: [{
type: ‘Numeric‘,
position: ‘left‘,
fields: [‘data‘],
label: {
renderer: Ext.util.Format.numberRenderer(‘0,0‘)
},
title: ‘数量‘,
grid: true,
minimum: 0
}, {
type: ‘Category‘,
position: ‘bottom‘,
fields: [‘name‘],
title: ‘年月‘
}],
legend : {
position : ‘top‘ //图例位置
// boxFill : ‘总参观人数‘
},
series: [{
type: ‘column‘,
axis: ‘left‘,
title: ‘总参观人数‘,
// style: { width: 30 },//这里是宽度
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get(‘name‘) + ‘: ‘ + storeItem.get(‘data‘));
}
},
label: {
display: ‘insideEnd‘,
field: ‘data‘,
renderer: Ext.util.Format.numberRenderer(‘0‘),
orientation: ‘horizontal‘,
color: ‘#6bd3dd‘,
‘text-anchor‘: ‘middle‘
},
xField: ‘name‘,
yField: ‘data‘
}]
,
initComponent:function(){
/*if(this.customLoad) {
this.store = Ext.create(this.store, {autoLoad : false});
}*/
this.callParent(arguments);
}
});
时间： 2024-11-07 19:41:36