extjs 应用总结

一.GridPanel

/**
*给grid添加复选框
**/
var sm = new Ext.grid.CheckboxSelectionModel();
/**
*数据解析器,name与mapping相同时，可以省略mapping
**/
var xmlReader = new Ext.data.XmlReader({
                    record : 'row',
                    totalProperty : 'results',
                    idProperty : 'ROLEID',
                    fields : [{
                                name : 'roleid',
                                mapping : 'ROLEID'
                            }, {
                                name : 'rolename',
                                mapping : 'ROLENAME'
                            },{
　　　　　　　　　　　　　　　　　　 name : 'CREATETIME',
                                type : 'date',
                                dateFormat : 'Y-m-d'
                             }]
                });
/**
*数据源
**/
var store = new Ext.data.Store({
                    autoLoad : true,
                    url : 'system/roleStore.action',
                    reader : xmlReader
                });
/**
*列模型    
**/
var cm = new Ext.grid.ColumnModel([sm, {
                    header : '角色代码',
                    dataIndex : 'roleid'
                }, {
                    header : '角色名称',
                    dataIndex : 'rolename'
                }]);
/**
*扩展 grid  (repairHtml 可以定义扩展的样式)
*/
var expander = new Ext.ux.grid.RowExpander( {
            tpl : new Ext.Template(repairHtml)
        });
/**
*组合成grid
**/
var grid = new Ext.grid.GridPanel( {
            cm : cm,
            viewConfig : {
                forceFit : true  //自动选择列宽
            },
            plugins : expander,
            store : store,
            id : 'query_repair_grid_id',
            border : false,
            region : 'center',
            stripeRows : true,
            bbar : new Ext.PagingToolbar( {
                displayInfo : true,
                store : store,
                plugins : new Ext.ux.grid.PageSize()
            }),
            tbar : [ "-", {
                text : '查询',
                iconCls : 'search-icon',
                handler : this.doQuery.createDelegate(this)
            }, "-" ]
        });

二. EditorGridPanel

组装editorGrid与grid基本差不多，如果要设置可以编辑列可以如下设置：

/**
*设可编辑列，如红色标识处，加editor属性
**/
    var cm = new Ext.grid.ColumnModel( [ {
            header : "材料类别名称",
            dataIndex : 'CATALOGNAME',
            sortable : true
        }, {
            header : "材料名称",
            dataIndex : 'NAME',
            sortable : true
        }, {
            header : "材料数量",
            dataIndex : 'MATERIALAMOUNT',
            editor : new Ext.form.NumberField( {
                allowBlank : true,
                maxValue : 100
            })
        } ]);
/**
*监听可编辑列，如红色属性标记处
**/
    listeners : {
                activate : function(p) {
                    this.store.load();
                },
                afteredit : this.afterEdit.createDelegate(obj)
            }
/**
*afteredit函数
**/
afterEdit : function(obj) {
        var row = obj.record;
        var materialid = row.id;
        var value = obj.value;
        var repairid = this.repairid;
        var self = this;
        Ext.Ajax.request( {
                    url : _ctx.base + '/BuildingRepairMaterial/savaBuildingMaterial.action',
                    params : {
                        materialid : materialid,
                        amount : value,
                        repairid : repairid
                    },
                    success : function(response, opts) {
                        self.editWindow.stroe.load();
                    }
                });
    }

三. 查询GridPanel

1. 按数据库字段查询

/**
* 往GridPanel的store中监听发beforeload事件
* values是获得所有查询条件值
**/
listeners : {
                 'beforeload' : function() {
                    var values = self.formPanel.getForm().getValues();
                    getQueryParams(values, this.baseParams);
                }
            }
/**
*执行查询
**/
doQuery : function() {
        this.queryGrid.getStore().load();
    }
/**
*设置查询值
**/
function getQueryParams(values, baseParams) {
    var i = 0;
    for ( var p in values) {
        var ps = p.split(":");
        if (!ps[1]) {
            ps[1] = "string";
        }
        if (!ps[2]) {
            ps[2] = "like";
        }
        var field = "filter[" + i + "][field]";
        var value = "filter[" + i + "][data][value]";
        var comparison = "filter[" + i + "][data][comparison]";
        var type = "filter[" + i + "][data][type]";
        baseParams[type] = ps[1];
        baseParams[field] = ps[0];
        baseParams[comparison] = ps[2];
        baseParams[value] = values[p];
        i++;
    }
}

2.按自设条件查询（ajax查询）

Ext.Ajax.request( {
        url :’查询的url’,
        params : {
            repairid : id,
            APPRAISESTATE : value
        }
    });

四.FormPanel

var queryForm = new Ext.FormPanel( {
            labelAlign : 'right',
            labelWidth : 70,
            height : 50,
            region : "north",
            border : false,
            frame : true,
            trackResetOnLoad : true,
            items : [ {
                bodyStyle : "padding:5px 0 0 0",
                layout : 'column',
                items : [ {
                    columnWidth : .2,
                    layout : 'form',
                    items : [ {
                        xtype : 'textfield',
                        fieldLabel : '报修人',
                        name : 'CREATERNAME',
                        anchor : '97%'
                    } ]
                }, {
                    columnWidth : .2,
                    layout : 'form',
                    items : [ {
                        xtype : 'textfield',
                        fieldLabel : '报修内容',
                        name : 'REPAIRCONTENT',
                        anchor : '97%'
                    } ]
                }, {
                    columnWidth : .2,
                    layout : 'form',
                    defaultType: 'datefield',
                    items : [ {
                         vtype: 'daterange',
                        fieldLabel : '开始时间',
                        format : 'Y-m-d',
                        name : 'CREATETIME:date:gt',
                        id:'CREATETIME:date:gt',
                        endDateField: 'CREATETIME:date:lt',
                        anchor : '97%'
                    } ]
                }, {
                    columnWidth : .2,
                    layout : 'form',
                    defaultType: 'datefield',
                    items : [ {
                        vtype: 'daterange',
                        fieldLabel : '结束时间',
                        format : 'Y-m-d',
                        id:'CREATETIME:date:lt',
                        name : 'CREATETIME:date:lt',
                        startDateField: 'CREATETIME:date:gt',
                        anchor : '97%'
                    } ]
                } ]
            } ]
        });

1. 往FormPanel里面的组件传值

两种方式，一种直接从数据库中查找，另一种从gridpanel中传过来

数据库中直接查找

/**
*同样也需要有数据解析器，在formpanel中添加剂   reader : formReader
**/
form.load( {
            url : _ctx.base + '/buildingRepair/loadRepair.action',
            params : {
                repairid : r.id
            },
            failure : function(form, action) {
                Ext.Msg.alert("错误", "error");
            },
            waitMsg : 'Loading'
        });
//从GridPanel中直接传值
    var r = this.studentVacateGrid.getSelectionModel().getSelected();
    var formPanel = this.createStudentForm();
    formPanel.getForm().loadRecord(r);
//渲染FormPanel列的值
/**
*列模型中添加如下代码
**/
 {
            header :'性别',
            dataIndex :'SEX',
            renderer : function(value) {
                if (value == 1)
                    return "男";
                else
                    return "女";
            }
        }

2.提交FormPanel

/**
*在formPanel中添加URL属性列。如url : '/vacate/editVacate.action'
**/
formPanel.submit( {
            success : function(response, opts) {
                self.editWindow.hide();
                self.studentVacateGrid.getStore().load();
            }

3.将FormPanel值置空

formPanel.getForm().reset();

4.将FormPanel放入window弹出窗口显示

/**
*将FormPanel放入Window的items属性中即可
**/    
this.editWindow = new Ext.Window( {
            title :'修改请假信息',
            collapsible :true,
            closeAction :'hide',
            maximizable :true,
            width :550,
            height :370,
            minWidth :300,
            minHeight :200,
            layout :'fit',
            plain :true,
            bodyStyle :'padding:5px;',
            buttonAlign :'center',
            items :formPanel
        });

五. Combobox

1. 调用本地数据

xtype : 'combo',
                        mode : 'local',
                        value : '1',
                        triggerAction : 'all',
                        forceSelection : true,
                        editable : false,
                        fieldLabel : '评价',
                        hiddenName : 'APPRAISESTATE',
                        displayField : 'name',
                        valueField : 'value',
                        anchor : '97%',
                        store : new Ext.data.JsonStore( {
                            fields : [ 'name', 'value' ],
                            data : [ {
                                name : '一般',
                                value : '1'
                            }, {
                                name : '好',
                                value : '2'
                            }, {
                                name : '很好',
                                value : '3'
                            }, {
                                name : '差',
                                value : '4'
                            } ]
                        })

2.调用远程数据

/**
*当调用远程数据时，如果有传入默认值，应该在默认值传入formPanel之前加载完数据源
**/
this.vacateTypeStore = new Ext.data.JsonStore( {
                    url : '/vacate/findVacateCatalogList.action',
                    fields : [ 'VACATECATALOGID', 'NAME' ]
                });
    this.vacateTypeStore.load();
var vacateTypeCombo = new Ext.form.ComboBox( {
            xtype :'combo',
            store :this.vacateTypeStore,
            valueField :"VACATECATALOGID",
            displayField :"NAME",
            forceSelection :true,
            typeAhead :true,
            hiddenName :'VACATECATALOGID',
            editable :false,
            mode : 'remote',
            triggerAction :'all',
            allowBlank :false,
            fieldLabel :'请假类别',
            anchor :'97%'
        });

六.TreePanel

/**
*注意节点之间的父子关系
**/
var root = new Ext.tree.AsyncTreeNode({
                            text : appMeuns[i].MENUNAME,
                            draggable : false,
                            id : appMeuns[i].MENUID
                        });
                var node = new Ext.tree.TreePanel({
                            title : appMeuns[i].MENUNAME,
                            rootVisible : false,
                            loader : new Ext.tree.TreeLoader({
                                        dataUrl : '/system/meun.action'
                                    }),
                            animate : true,
                            autoScroll : true,
                            containerScroll : true,
                            root : root
                        });
                new Ext.tree.TreeSorter(node, {
                            folderSort : true
                        });
                node.on('click', function(node, e) {
                 }

七.开始日期与结束日期

/**
* 给所有FormPanel中含有VTYPE属性的组件添加如下事件。
* 必需给出name，如果只指定id则无效
**/
Ext.apply(Ext.form.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 = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        return true;
    }

转载于:https://www.cnblogs.com/qiiuji0135/p/3383574.html

extjs 应用总结

继续阅读

Testlink安装部署之XAMPP

set define off关闭替代变量功能

报错：'mysql' 不是内部或外部命令，也不是可运行的程序或批处理文件。

Linxu常用命令技巧汇总

ERROR 1 (HY000): Can't create/write to file '/tmp/#sql_4188_1.MYI' (Errcode: 28)

艰难安装LDAP,SSL认证

《Linux命令行与Shell脚本编程大全第2版.布卢姆》pdf

MySQL的4种隔离级别？出现问题

XX系统实施过程问题总结

无组件上传图片到数据库中，最完整解决方案

【MySQL数据库】数据库索引事务1.索引2.事务

neo4j之cypher使用文档

NOSQL安全攻击

mybatis_入门程序Mybatis入门

登录plsql 报错 the account is locked --用户被锁

SequoiaDB巨杉数据库C++驱动概述