首页 > 代码库 > Extjs 一些配置以及方法
Extjs 一些配置以及方法
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 =http://www.mamicode.com/ 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); }});
Extjs 一些配置以及方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。