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++驅動概述