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, // 多选，
disabled : true,   // 灰掉，不可用。不能用,无法激活
selectOnFocus : 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;
}

 

 每一行设置

enableKeyNav:true,  // 可以使用键盘控制上下
columnLines:true,    // 展示竖线，Grid列分明

 

 

 

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);
    }
});

 

 

 

二、应用

1、列表应用，其中包含

①新增黑名单

②黑名单查询，根据卡号、练习电话、服务中心查询

③可以移除黑名单

④分页列表查询功能

 

转载于:https://www.cnblogs.com/yuchuan/p/extjs_baseinfo.html