首页 > 代码库 > 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 一些配置以及方法