zoukankan      html  css  js  c++  java

  • Ext JS 4 主从表

    Model

    定义三个model

     

    Js代码  
    1. /**  
    2.  * 对应Struts2中action的model  
    3.  */  
    4. Ext.define('PriceAreaAction', {   
    •     extend : 'Ext.data.Model',   
    •     fields : [ 'priceArea', 'updatePriceEntrys', 'createPriceEntrys',   
    •             'deletePriceEntrys', 'message' ],   
    •     proxy : {   
    •         type : 'ajax',   
    •         api : {   
    •             create : 'savePriceArea.action',   
    •             update : 'updatePriceArea.action'  
    •         },   
    •         writer : {   
    •             type : 'json'  
    •         },   
    •         reader : {   
    •             type : 'json'  
    •         }   
    •     }   
    • });   
    •     
    • /**  
    •  * PriceArea的Model  
    •  */  
    • Ext.define('priceAreaModel', {   
    •     extend : 'Ext.data.Model',   
    •     fields : [ 'id', 'areaCode', 'areaName', 'createUser', {   
    •         name : 'createDate',   
    •         type : 'number'  
    •     }, 'modifyUser', {   
    •         name : 'modifyDate',   
    •         type : 'number'  
    •     } ],   
    •     hasMany : {   
    •         model : 'entryModel',   
    •         name : 'entryList',   
    •         foreignKey : 'areaId',   
    •         associationKey : 'entryList',   
    •         primaryKey : 'id',   
    •         storeConfig : Ext.data.StoreManager.lookup('entryStore')   
    •     }   
    • });   
    • /*  
    •  * PriceEntry的Model  
    •  */  
    • Ext.define('entryModel', {   
    •     extend : 'Ext.data.Model',   
    •     fields : [ 'id', 'areaId', {   
    •         name : 'price',   
    •         type : 'number'  
    •     }, 'priceType', 'createUser', {   
    •         name : 'createDate',   
    •         type : 'number'  
    •     }, 'modifyUser', {   
    •         name : 'modifyDate',   
    •         type : 'number'  
    •     } ],   
    •     belongsTo : {   
    •         type : 'belongsTo',   
    •         model : 'priceAreaModel',   
    •         primaryKey : 'id',   
    •         foreignKey : 'areaId'  
    •     }   
    • });  
    /**
 * 对应Struts2中action的model
 */
Ext.define('PriceAreaAction', {
    extend : 'Ext.data.Model',
    fields : [ 'priceArea', 'updatePriceEntrys', 'createPriceEntrys',
            'deletePriceEntrys', 'message' ],
    proxy : {
        type : 'ajax',
        api : {
            create : 'savePriceArea.action',
            update : 'updatePriceArea.action'
        },
        writer : {
            type : 'json'
        },
        reader : {
            type : 'json'
        }
    }
});
 
/**
 * PriceArea的Model
 */
Ext.define('priceAreaModel', {
    extend : 'Ext.data.Model',
    fields : [ 'id', 'areaCode', 'areaName', 'createUser', {
        name : 'createDate',
        type : 'number'
    }, 'modifyUser', {
        name : 'modifyDate',
        type : 'number'
    } ],
    hasMany : {
        model : 'entryModel',
        name : 'entryList',
        foreignKey : 'areaId',
        associationKey : 'entryList',
        primaryKey : 'id',
        storeConfig : Ext.data.StoreManager.lookup('entryStore')
    }
});
/*
 * PriceEntry的Model
 */
Ext.define('entryModel', {
    extend : 'Ext.data.Model',
    fields : [ 'id', 'areaId', {
        name : 'price',
        type : 'number'
    }, 'priceType', 'createUser', {
        name : 'createDate',
        type : 'number'
    }, 'modifyUser', {
        name : 'modifyDate',
        type : 'number'
    } ],
    belongsTo : {
        type : 'belongsTo',
        model : 'priceAreaModel',
        primaryKey : 'id',
        foreignKey : 'areaId'
    }
});

    第一个model与服务器端的Action对应，后两个model与服务端的两个实体相似。在定义model的时候，也可以定义一对多的关系，在model中定义一个hasMany的属性，这个属性与服务端定义的List是一样的，它可以关联到另一个自定义的model，在这个hasMany中还要定义一个foreignKey，用于外键关联到另一个model对象上的上面的哪个属性。例子就是priceAreaModel关联到entryModel。

     store 

    定义两个Store，priceAreaStore用于得到区域的信息，entryStore用于得到区域价格信息

     

    Js代码  
    1. var priceAreaStore = Ext.create('Ext.data.Store', {   
    2.     pageSize : 20,   
    3.     model : 'priceAreaModel',   
    4.     autoLoad : true,   
    5.     proxy : {   
    6.         type : 'ajax',   
    7.         actionMethods : 'post',   
    8.         url : 'queryPriceArea.action',   
    9.         reader : {   
    10.             type : 'json',   
    11.             root : 'priceAreaList',   
    12.             totalProperty : 'totalCount'  
    13.         }   
    14.     }   
    15. });   
    16. var entryStore = Ext.create('Ext.data.Store', {   
    17.     model : 'entryModel',   
    18.     storeId : 'entryStore',   
    19.     proxy : {   
    20.         url : 'queryPriceEntryByPriceAreaId.action',   
    21.         type : 'ajax',   
    22.         reader : {   
    23.             type : 'json',   
    24.             root : 'priceEntryList'  
    25.         }   
    26.     }   
    27. });  
    var priceAreaStore = Ext.create('Ext.data.Store', {
    pageSize : 20,
    model : 'priceAreaModel',
    autoLoad : true,
    proxy : {
        type : 'ajax',
        actionMethods : 'post',
        url : 'queryPriceArea.action',
        reader : {
            type : 'json',
            root : 'priceAreaList',
            totalProperty : 'totalCount'
        }
    }
});
var entryStore = Ext.create('Ext.data.Store', {
    model : 'entryModel',
    storeId : 'entryStore',
    proxy : {
        url : 'queryPriceEntryByPriceAreaId.action',
        type : 'ajax',
        reader : {
            type : 'json',
            root : 'priceEntryList'
        }
    }
});

     

    页面与操作

    Js代码  
    1. Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel',   
    2.         'Ext.layout.container.Column' ]);   
    3.     
    4. var priceAreaGrid = new Ext.grid.GridPanel({   
    5.     border : false,   
    6.     autoScroll : true,   
    7.     store : priceAreaStore,   
    8.     columns : [ {   
    9.         id : 'id',   
    10.         hidden : true,   
    11.         dataIndex : 'id'  
    12.     }, {   
    13.         text : i18n('page.module.oneToMany.areaCode'),   
    14.         name:'areaCode',   
    15.         flex : 1,   
    16.         sortable : true,   
    17.         dataIndex : 'areaCode'  
    18.     
    19.     }, {   
    20.         text : i18n('page.module.oneToMany.areaName'),   
    21.         name:'areaName',   
    22.         flex : 1,   
    23.         sortable : true,   
    24.         dataIndex : 'areaName'  
    25.     }, {   
    26.         text : i18n('page.module.oneToMany.createUser'),   
    27.         name:'createUser',   
    28.         flex : 1,   
    29.         sortable : true,   
    30.         dataIndex : 'createUser'  
    31.     }, {   
    32.         text : i18n('page.module.oneToMany.createDate'),   
    33.         name:'createDate',   
    34.         flex : 1,   
    35.         sortable : true,   
    36.         renderer : changeToDate,   
    37.         dataIndex : 'createDate'  
    38.     }, {   
    39.         text : i18n('page.module.oneToMany.modifyUser'),   
    40.         name:'modifyUser',   
    41.         flex : 1,   
    42.         sortable : true,   
    43.         dataIndex : 'modifyUser'  
    44.     }, {   
    45.         text : i18n('page.module.oneToMany.modifyDate'),   
    46.         name:'modifyDate',   
    47.         flex : 1,   
    48.         sortable : true,   
    49.         renderer : changeToDate,   
    50.         dataIndex : 'modifyDate'  
    51.     } ],   
    52.     width : window.screen.clientWidth * 0.998,   
    53.     height : window.screen.availHeight * 0.7,   
    54.     frame : true,   
    55.     tbar : [ {   
    56.         text : i18n('page.module.oneToMany.add'),   
    57.         handler : function() {   
    58.             createWin(new priceAreaModel());   
    59.         }   
    60.     },{   
    61.         text : i18n('page.module.oneToMany.update'),   
    62.         handler : function() {   
    63.             var sm = priceAreaGrid.getSelectionModel();   
    64.             if (sm.getSelection().length > 0) {   
    65.                 var record = sm.getSelection()[0];   
    66.                 entryStore.load({   
    67.                     params : {   
    68.                         'priceAreaId' : record.get("id")   
    69.                     },   
    70.                     callback: function(records, operation, success) {   
    71.                         if(success){   
    72.                             record.entryList().loadRecords(records,{});   
    73.                             createWin(record);   
    74.                         }   
    75.                     }   
    76.                 });   
    77.     
    78.             } else {   
    79.                 Ext.Msg.alert(i18n('page.module.oneToMany.message'), i18n('page.module.oneToMany.priceAreaGrid.message'));   
    80.             }   
    81.         }   
    82.     }, {   
    83.         text : i18n('page.module.oneToMany.delete'),   
    84.         handler : function() {   
    85.             var sm = priceAreaGrid.getSelectionModel();   
    86.             var selection = sm.getSelection();   
    87.             if (sm.getSelection().length > 0) {   
    88.                 Ext.MessageBox.confirm(i18n('page.module.oneToMany.chick'),i18n('page.module.oneToMany.priceAreaGrid.chick_message'),   
    89.                     function(btn) {   
    90.                         if (btn == 'yes') {   
    91.                             Ext.Ajax.request({   
    92.                                 url : 'deletePriceArea.action',   
    93.                                 params : {   
    94.                                     'priceAreaId' : selection[0].data.id   
    95.                                 },   
    96.                                 success : function(   
    97.                                         response) {   
    98.                                     var json = Ext.decode(response.responseText);   
    99.                                     if (json.success == false) {   
    100.                                         Ext.MessageBox.alert(i18n('page.module.oneToMany.message'),json.message);   
    101.                                     } else {   
    102.                                         Ext.MessageBox.alert(i18n('page.module.oneToMany.message'),json.message);   
    103.                                         priceAreaStore.remove(selection);   
    104.                                     }   
    105.                                 },   
    106.                                 failure : function(response) {   
    107.                                     var json = Ext.decode(response.responseText);   
    108.                                     Ext.MessageBox.alert(i18n('page.module.oneToMany.message'),json.message);   
    109.                                 }   
    110.                             });   
    111.                         }   
    112.                     });   
    113.             } else {   
    114.                 Ext.Msg.alert(i18n('page.module.oneToMany.message'), i18n('page.module.oneToMany.priceAreaGrid.message'));   
    115.             }   
    116.         }   
    117.     } ],   
    118.     bbar : Ext.create('Ext.toolbar.Paging', {   
    119.         id : 'priceAreaGrid_pagingToolbar',   
    120.         store : priceAreaStore,   
    121.         displayMsg : i18n('page.module.oneToMany.priceAreaGrid.displayMsg'),   
    122.         displayInfo : true,   
    123.         items:[   
    124.             '-',{   
    125.                     text: i18n('page.module.oneToMany.priceAreaGrid.page_count'),   
    126.                     xtype: 'tbtext'  
    127.                 },Ext.create('Ext.form.ComboBox', {   
    128.                              50,   
    129.                    value:          '20',   
    130.                    triggerAction:  'all',   
    131.                    forceSelection: true,   
    132.                    editable:       false,   
    133.                    name:           'comboItem',   
    134.                    displayField:   'value',   
    135.                    valueField:     'value',   
    136.                    queryMode:      'local',   
    137.                    store : Ext.create('Ext.data.Store',{   
    138.                        fields : ['value'],   
    139.                        data   : [   
    140.                            {'value':'10'},   
    141.                            {'value':'15'},   
    142.                            {'value':'20'},   
    143.                            {'value':'25'},   
    144.                            {'value':'40'},   
    145.                            {'value':'100'}   
    146.                        ]   
    147.                    }),   
    148.                    listeners:{   
    149.                         select : {scope : this,   
    150.                             fn: function(_field,_value){   
    151.                                 var pageSize = priceAreaStore.pageSize;   
    152.                                 var newPageSize = parseInt(_field.value);   
    153.                                 if(pageSize!=newPageSize){   
    154.                                     priceAreaStore.pageSize = newPageSize;   
    155.                                     Ext.getCmp('priceAreaGrid_pagingToolbar').moveFirst();   
    156.                                 }   
    157.                             }   
    158.                         }   
    159.                    }   
    160.                }),{   
    161.                     text: i18n('page.module.oneToMany.priceAreaGrid.number'),   
    162.                     xtype: 'tbtext'  
    163.                }]   
    164.     })   
    165. });   
    166.     
    167. Ext.onReady(function() {   
    168.     setTimeout(function() {   
    169.             Ext.get('loading').remove();   
    170.             Ext.get('loading-mask').fadeOut({   
    171.                 remove : true  
    172.             });   
    173.         }, 1000);   
    174.     Ext.QuickTips.init();   
    175.     Ext.form.Field.prototype.msgTarget = "side";   
    176.     Ext.create('Ext.Viewport',{   
    177.         layout : {   
    178.             type : 'border'  
    179.         },   
    180.         defaults : {   
    181.             split : true  
    182.         },   
    183.         width : window.screen.availWidth,   
    184.         height : window.screen.availHeight,   
    185.         items : [{   
    186.             xtype : 'form',   
    187.             id : "chack_form",   
    188.             region : 'north',   
    189.             border : false,   
    190.             hight : 50,   
    191.             width : 500,   
    192.             layout : {   
    193.                 type : 'hbox',   
    194.                 padding : 5   
    195.             },   
    196.             baseCls : 'x-plain',   
    197.             items : [{   
    198.                     xtype : 'textfield',   
    199.                     fieldLabel : i18n('page.module.oneToMany.areaCode'),   
    200.                     labelPad : 2,   
    201.                     labelWidth : 80,   
    202.                     name : 'priceArea.areaCode',   
    203.                     width : 250,   
    204.                     hight : 25   
    205.                 },{   
    206.                     xtype : 'label',   
    207.                     width : 50   
    208.                 },{   
    209.                     xtype : 'textfield',   
    210.                     fieldLabel : i18n('page.module.oneToMany.areaName'),   
    211.                     labelPad : 2,   
    212.                     labelWidth : 80,   
    213.                     name : 'priceArea.areaName',   
    214.                     width : 250,   
    215.                     hight : 25   
    216.                 },{   
    217.                     xtype : 'label',   
    218.                     width : 50   
    219.                 },{   
    220.                     xtype : 'button',   
    221.                     text : i18n('page.module.oneToMany.button_chick'),   
    222.                     width : 100,   
    223.                     hight : 25,   
    224.                     handler : function() {   
    225.                         priceAreaStore.load({   
    226.                             params : {   
    227.                                 'priceArea.areaName' : this.up('form').getForm().findField("priceArea.areaName").getValue(),   
    228.                                 'priceArea.areaCode' : this.up('form').getForm().findField("priceArea.areaCode").getValue()   
    229.                             }   
    230.                         });   
    231.                     }   
    232.                 } ]   
    233.             }, {   
    234.                 region : 'center',   
    235.                 border:false,   
    236.                 autoScroll : true,   
    237.                 items : [ priceAreaGrid ]   
    238.             }]   
    239.     });   
    240. });  
    Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel',
        'Ext.layout.container.Column' ]);
 
var priceAreaGrid = new Ext.grid.GridPanel({
    border : false,
    autoScroll : true,
    store : priceAreaStore,
    columns : [ {
        id : 'id',
        hidden : true,
        dataIndex : 'id'
    }, {
        text : i18n('page.module.oneToMany.areaCode'),
        name:'areaCode',
        flex : 1,
        sortable : true,
        dataIndex : 'areaCode'
 
    }, {
        text : i18n('page.module.oneToMany.areaName'),
        name:'areaName',
        flex : 1,
        sortable : true,
        dataIndex : 'areaName'
    }, {
        text : i18n('page.module.oneToMany.createUser'),
        name:'createUser',
        flex : 1,
        sortable : true,
        dataIndex : 'createUser'
    }, {
        text : i18n('page.module.oneToMany.createDate'),
        name:'createDate',
        flex : 1,
        sortable : true,
        renderer : changeToDate,
        dataIndex : 'createDate'
    }, {
        text : i18n('page.module.oneToMany.modifyUser'),
        name:'modifyUser',
        flex : 1,
        sortable : true,
        dataIndex : 'modifyUser'
    }, {
        text : i18n('page.module.oneToMany.modifyDate'),
        name:'modifyDate',
        flex : 1,
        sortable : true,
        renderer : changeToDate,
        dataIndex : 'modifyDate'
    } ],
    width : window.screen.clientWidth * 0.998,
    height : window.screen.availHeight * 0.7,
    frame : true,
    tbar : [ {
        text : i18n('page.module.oneToMany.add'),
        handler : function() {
            createWin(new priceAreaModel());
        }
    },{
        text : i18n('page.module.oneToMany.update'),
        handler : function() {
            var sm = priceAreaGrid.getSelectionModel();
            if (sm.getSelection().length > 0) {
                var record = sm.getSelection()[0];
                entryStore.load({
                    params : {
                        'priceAreaId' : record.get("id")
                    },
                    callback: function(records, operation, success) {
                        if(success){
                            record.entryList().loadRecords(records,{});
                            createWin(record);
                        }
                    }
                });
 
            } else {
                Ext.Msg.alert(i18n('page.module.oneToMany.message'), i18n('page.module.oneToMany.priceAreaGrid.message'));
            }
        }
    }, {
        text : i18n('page.module.oneToMany.delete'),
        handler : function() {
            var sm = priceAreaGrid.getSelectionModel();
            var selection = sm.getSelection();
            if (sm.getSelection().length > 0) {
                Ext.MessageBox.confirm(i18n('page.module.oneToMany.chick'),i18n('page.module.oneToMany.priceAreaGrid.chick_message'),
                    function(btn) {
                        if (btn == 'yes') {
                            Ext.Ajax.request({
                                url : 'deletePriceArea.action',
                                params : {
                                    'priceAreaId' : selection[0].data.id
                                },
                                success : function(
                                        response) {
                                    var json = Ext.decode(response.responseText);
                                    if (json.success == false) {
                                        Ext.MessageBox.alert(i18n('page.module.oneToMany.message'),json.message);
                                    } else {
                                        Ext.MessageBox.alert(i18n('page.module.oneToMany.message'),json.message);
                                        priceAreaStore.remove(selection);
                                    }
                                },
                                failure : function(response) {
                                    var json = Ext.decode(response.responseText);
                                    Ext.MessageBox.alert(i18n('page.module.oneToMany.message'),json.message);
                                }
                            });
                        }
                    });
            } else {
                Ext.Msg.alert(i18n('page.module.oneToMany.message'), i18n('page.module.oneToMany.priceAreaGrid.message'));
            }
        }
    } ],
    bbar : Ext.create('Ext.toolbar.Paging', {
        id : 'priceAreaGrid_pagingToolbar',
        store : priceAreaStore,
        displayMsg : i18n('page.module.oneToMany.priceAreaGrid.displayMsg'),
        displayInfo : true,
        items:[
            '-',{
                    text: i18n('page.module.oneToMany.priceAreaGrid.page_count'),
                    xtype: 'tbtext'
                },Ext.create('Ext.form.ComboBox', {
                             50,
                   value:          '20',
                   triggerAction:  'all',
                   forceSelection: true,
                   editable:       false,
                   name:           'comboItem',
                   displayField:   'value',
                   valueField:     'value',
                   queryMode:      'local',
                   store : Ext.create('Ext.data.Store',{
                       fields : ['value'],
                       data   : [
                           {'value':'10'},
                           {'value':'15'},
                           {'value':'20'},
                           {'value':'25'},
                           {'value':'40'},
                           {'value':'100'}
                       ]
                   }),
                   listeners:{
                        select : {scope : this,
                            fn: function(_field,_value){
                                var pageSize = priceAreaStore.pageSize;
                                var newPageSize = parseInt(_field.value);
                                if(pageSize!=newPageSize){
                                    priceAreaStore.pageSize = newPageSize;
                                    Ext.getCmp('priceAreaGrid_pagingToolbar').moveFirst();
                                }
                            }
                        }
                   }
               }),{
                    text: i18n('page.module.oneToMany.priceAreaGrid.number'),
                    xtype: 'tbtext'
               }]
    })
});
 
Ext.onReady(function() {
    setTimeout(function() {
            Ext.get('loading').remove();
            Ext.get('loading-mask').fadeOut({
                remove : true
            });
        }, 1000);
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = "side";
    Ext.create('Ext.Viewport',{
        layout : {
            type : 'border'
        },
        defaults : {
            split : true
        },
        width : window.screen.availWidth,
        height : window.screen.availHeight,
        items : [{
            xtype : 'form',
            id : "chack_form",
            region : 'north',
            border : false,
            hight : 50,
            width : 500,
            layout : {
                type : 'hbox',
                padding : 5
            },
            baseCls : 'x-plain',
            items : [{
                    xtype : 'textfield',
                    fieldLabel : i18n('page.module.oneToMany.areaCode'),
                    labelPad : 2,
                    labelWidth : 80,
                    name : 'priceArea.areaCode',
                    width : 250,
                    hight : 25
                },{
                    xtype : 'label',
                    width : 50
                },{
                    xtype : 'textfield',
                    fieldLabel : i18n('page.module.oneToMany.areaName'),
                    labelPad : 2,
                    labelWidth : 80,
                    name : 'priceArea.areaName',
                    width : 250,
                    hight : 25
                },{
                    xtype : 'label',
                    width : 50
                },{
                    xtype : 'button',
                    text : i18n('page.module.oneToMany.button_chick'),
                    width : 100,
                    hight : 25,
                    handler : function() {
                        priceAreaStore.load({
                            params : {
                                'priceArea.areaName' : this.up('form').getForm().findField("priceArea.areaName").getValue(),
                                'priceArea.areaCode' : this.up('form').getForm().findField("priceArea.areaCode").getValue()
                            }
                        });
                    }
                } ]
            }, {
                region : 'center',
                border:false,
                autoScroll : true,
                items : [ priceAreaGrid ]
            }]
    });
});

     
     打开的过程是：

    1. 点击新增（执行“createWin(new priceAreaModel());”，这里为什么要新建一个priceAreaModel，是为了让后面与form绑定的时候有一个对象）
    2. 得到价格区域编辑页面（根据传入的priceAreaModel对象绑定表单，执行priceForm.loadRecord(record);）

    保存的过程是：

    1. 得到表单的绑定对象“new_record = form.getRecord();”；
    2. 在把表单的更新信息写入绑定对象“form.updateRecord(new_record);”）；
    3. 新建设一个orderBillAction 对象var priceAreaAction = new PriceAreaAction();接下来要注意的下面这一点：priceAreaAction.phantom = new_record.phantom

    一定要把得到的表单绑定信息的phantom这个属性值给action对象，这样才可以完成action对象的save方法的请求选择，如果phantom是true，那么就是执行“create”，否则就就执行“update”。

    绑定对象中绑定的信息只能是表单中的信息，不能是表格中的信息，也就是priceAreaModel对象只能更新得到表单中的信息，不能得到表格中的订单明细信息，而且提交的信息是直接注入到Action中，所以要对订单明细信息做特别的处理。就是执行“processAction (_action,_record,_store)”方法，把增删改的订单明细信息加入到PriceAreaAction对象中，还有订单信息也注入到对象中。

     

    Js代码  
    1. /**  
    2.  * 用于处理提交数据  
    3.  *  
    4.  * @param _action  
    5.  * @param _record  
    6.  * @param _store  
    7.  * @returns  
    8.  */  
    9. function processAction(_action, _record, _store) {   
    10.     var _create = new Array();   
    11.     var _update = new Array();   
    12.     var _delete = new Array();   
    13.     var removed = _store.getRemovedRecords();   
    14.     var updated = _store.getUpdatedRecords();   
    15.     var newed = _store.getNewRecords();   
    16.     Ext.each(removed, function(record) {   
    17.         _delete.push(record.data);   
    18.     });   
    19.     Ext.each(updated, function(record) {   
    20.         _update.push(record.data);   
    21.     });   
    22.     Ext.each(newed, function(record) {   
    23.         _create.push(record.data);   
    24.     });   
    25.     _action.set('updatePriceEntrys', _update);   
    26.     _action.set('createPriceEntrys', _create);   
    27.     _action.set('deletePriceEntrys', _delete);   
    28.     _action.set('priceArea', _record.data);   
    29.     return _action;   
    30. }  
    /**
 * 用于处理提交数据
 *
 * @param _action
 * @param _record
 * @param _store
 * @returns
 */
function processAction(_action, _record, _store) {
    var _create = new Array();
    var _update = new Array();
    var _delete = new Array();
    var removed = _store.getRemovedRecords();
    var updated = _store.getUpdatedRecords();
    var newed = _store.getNewRecords();
    Ext.each(removed, function(record) {
        _delete.push(record.data);
    });
    Ext.each(updated, function(record) {
        _update.push(record.data);
    });
    Ext.each(newed, function(record) {
        _create.push(record.data);
    });
    _action.set('updatePriceEntrys', _update);
    _action.set('createPriceEntrys', _create);
    _action.set('deletePriceEntrys', _delete);
    _action.set('priceArea', _record.data);
    return _action;
}

    所以在PriceAreaAction这个model要定义增删改的区域价格明细信息属性与区域属性“'priceArea', 'updatePriceEntrys',

    'createPriceEntrys','deletePriceEntrys'”，在方法中就要把增删改的信息分别set到PriceAreaAction对象中。

    在model中定义一个proxy，信息如下：

     

    Js代码  
    1. proxy : {   
    2.         type : 'ajax',   
    •         api : {   
    •             create : 'savePriceArea.action',   
    •             update : 'updatePriceArea.action'  
    •         },   
    •         writer : {   
    •             type : 'json'  
    •         },   
    •         reader : {   
    •             type : 'json'  
    •         }   
    •     }  
    proxy : {
        type : 'ajax',
        api : {
            create : 'savePriceArea.action',
            update : 'updatePriceArea.action'
        },
        writer : {
            type : 'json'
        },
        reader : {
            type : 'json'
        }
    }

     

    用PriceAreaAction对象的save方法，就会发一个create对应的URL（savePriceArea.action）,用定义的writer把区域价格信息以JSON的格式写回到服务端。

    修改过程说明： 

    1. 双击表格中的行（执行“createWin(record);”，得到订单修改页面，根据传入的record对象绑定表单，执行“priceForm.loadRecord(record);”进行绑定）；
    2. 进行表单信息与表格信息的修改；
    3. 点击保存，得到表单的绑定对象“new_record = form.getRecord();”；
    4. 在把表单的更新信息写入绑定对象“form.updateRecord(new_record);”）；
    5. 接下来的过程与新增的一样。 

    在开发过程中可以要对日期进行处理，对日期做处理可以有如下正反向两种方式：

     

    Java代码  
    1. /**  
    2.  * 修改date对象数据的JSON提交方式  
    3.  */  
    4. Ext.JSON.encodeDate = function(d) {   
    5.     return d.getTime();   
    • };   
    • /**  
    •  * 处理日期展现方式  
    •  * @param value  
    •  * @returns  
    •  */  
    • function changeToDate(value) {   
    •     if (value != null) {   
    •         var date = new Date(value);   
    •         return Ext.Date.format(date, 'Y-m-d H:i:s');   
    •     } else {   
    •         return null;   
    •     }   
    • };  
    /**
 * 修改date对象数据的JSON提交方式
 */
Ext.JSON.encodeDate = function(d) {
    return d.getTime();
};
/**
 * 处理日期展现方式
 * @param value
 * @returns
 */
function changeToDate(value) {
    if (value != null) {
        var date = new Date(value);
        return Ext.Date.format(date, 'Y-m-d H:i:s');
    } else {
        return null;
    }
};
  • 相关阅读:
    【C#】项目优化实战
    【NoSql】Redis
    【算法】非递归的方式生成树
    工作4年的一些想法
    【NoSql】MongoDb
    【微信开发】 前端
    【微信开发】常用 api
    [MVC] DIV 布局
    [Swift] 疑难杂症
    《你不懂我，我不怪你》
  • 原文地址：https://www.cnblogs.com/fang8206/p/2528336.html
Copyright © 2011-2022 走看看