dialogeditor.js

来自「anewssystem新闻发布系统集成使用了spring hibernate f」· JavaScript 代码 · 共 454 行 · 第 1/2 页

        Ext.get(document.body).on("click", grid.handleClickOutside, grid);
    }

   /************************************************************
    * Create a new dialog - reuse by create and edit part
    ************************************************************/
    function createNewDialog(dialogName) {
        var thisDialog = new Ext.LayoutDialog(dialogName, {
            modal:true,
            autoTabs:true,
            proxyDrag:true,
            resizable:false,
            width: 480,
            height: 302,
            shadow:true,
            center: {
                autoScroll: true,
                tabPosition: 'top',
                closeOnTab: true,
                alwaysShowTabs: false
            }
        });
        thisDialog.addKeyListener(27, thisDialog.hide, thisDialog);
        thisDialog.addButton('Cancel', function() {thisDialog.hide();});

        return thisDialog;
    };

   /************************************************************
    * Action - update
    *   handle double click
    *   user select one of the item and want to update it
    ************************************************************/
    grid.on('rowdblclick', function(grid, rowIndex, e) {
        var selectedId = ds.data.items[rowIndex].id;

        // get information from DB and set form now...
        var account_data = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url:'loadData.htm?id=' + selectedId}),
            reader: new Ext.data.JsonReader({},['id','name']),
            remoteSort: false
        });

        account_data.on('load', function() {
            console.info(account_data);
            // set value now
            var updateId = account_data.getAt(0).data['id'];
            name_show.setValue(account_data.getAt(0).data['name']);
            console.info(account_data.getAt(0).data['name']);

            var updateInstanceDlg;
            if (!updateInstanceDlg) {
                updateInstanceDlg = createNewDialog("a-updateInstance-dlg");
                updateInstanceDlg.addButton('Save', function() {

                    // submit now... all the form information are submit to the server
                    // handle response after that...
                    if (form_instance_update.isValid()) {
                        form_instance_update.submit({
                            params:{id : updateId},
                            waitMsg:'更新数据...',
                            reset: false,
                            failure: function(form_instance_update, action) {
                                Ext.MessageBox.alert('Error Message', action.result.errorInfo);
                            },
                            success: function(form_instance_update, action) {
                                Ext.MessageBox.alert('Confirm', action.result.info);
                                updateInstanceDlg.hide();
                                ds.load({params:{start:0, limit:myPageSize}});
                            }
                        });
                    }else{
                        Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
                    }
                });

                var layout = updateInstanceDlg.getLayout();
                layout.beginUpdate();
                layout.add('center', new Ext.ContentPanel('a-updateInstance-inner', {title: 'Update Account'}));
                layout.endUpdate();

                updateInstanceDlg.show();
            }
        });

        account_data.load();
    });



   /************************************************************
    * Action - add
    *   start to handle add function
    *   new page appear and allow to submit
    ************************************************************/

   /************************************************************
    *  To create add new account dialog now....
    ************************************************************/
    function doAdd() {
        var aAddInstanceDlg;

        if (!aAddInstanceDlg) {
            aAddInstanceDlg = createNewDialog("a-addInstance-dlg");
            aAddInstanceDlg.addButton('Reset', resetForm, aAddInstanceDlg);
            aAddInstanceDlg.addButton('Save', function() {

                // submit now... all the form information are submit to the server
                // handle response after that...
                if (form_instance_create.isValid()) {
                    form_instance_create.submit({
                        waitMsg:'Creating new account now...',
                        reset: false,
                        failure: function(form_instance_create, action) {
                            var info =
                            Ext.MessageBox.alert('Error Message', action.result.errorInfo);
                        },
                        success: function(form_instance_create, action) {
                            Ext.MessageBox.alert('Confirm', action.result.info);
                            aAddInstanceDlg.hide();
                            ds.load({params:{start:0, limit:myPageSize}});
                        }
                    });
                }else{
                    Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
                }
            });

            var layout = aAddInstanceDlg.getLayout();
            layout.beginUpdate();
            layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title: 'create account'}));
            layout.endUpdate();

            resetForm();
            aAddInstanceDlg.show();
        }
    }

   /************************************************************
    * Form information - pop-up dialog
    * turn on validation errors beside the field globally
    ************************************************************/
    Ext.form.Field.prototype.msgTarget = 'side';
    Ext.form.Field.prototype.height = 20;
    Ext.form.Field.prototype.fieldClass = 'text-field-default';
    Ext.form.Field.prototype.focusClass = 'text-field-focus';
    Ext.form.Field.prototype.invalidClass = 'text-field-invalid';

    /************************************************************
    * Create new form to hold user enter information
    * This form is used to create new instance
    ************************************************************/
    var name_tf = new Ext.form.TextField({
        fieldLabel: '关键字',
        name: 'name',
        allowBlank:false
    });
    var form_instance_create = new Ext.form.Form({
        labelAlign: 'right',
        url:'insertRow.htm'
    });

    form_instance_create.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
    form_instance_create.fieldset(
        {id:'desc', legend:'Please fill the field'},
        name_tf
    );

    form_instance_create.applyIfToFields({width:255});
    form_instance_create.render('a-addInstance-form');
    form_instance_create.end();

    resetForm = function() {
        name_tf.setValue('');
    };


    /************************************************************
    * Create form to hold user enter information
    * This form is used to update current instance
    ************************************************************/
    var name_show = new Ext.form.TextField({
        // labelStyle: 'display: none',
        fieldLabel: '关键字',
        name: 'name',
        readOnly: false,
        allowBlank:false
    });
    var form_instance_update = new Ext.form.Form({
        labelAlign: 'right',
        url:'updateRow.htm'
    });

    form_instance_update.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
    form_instance_update.fieldset(
        {id:'', legend:'修改'},
        name_show
    );

    form_instance_update.applyIfToFields({width:255});
    form_instance_update.render('a-updateInstance-form');
    form_instance_update.end();

    //右键菜单
    function contextmenu(grid, rowIndex,e){
        e.preventDefault();
        e.stopEvent();
        var infoMenu = new Ext.menu.Item({
            id:'infoMenu',
            text: 'infoMenu',
            handler:function(){
                Ext.MessageBox.alert("info",Ext.util.JSON.encode(grid.dataSource.getAt(rowIndex).data));
            }
        });
        var menuList = [infoMenu];

        grid_menu = new Ext.menu.Menu({
            id: 'mainMenu',
            items: menuList
        });

        var coords = e.getXY();
        grid_menu.showAt([coords[0], coords[1]]);
    }
    grid.addListener('rowcontextmenu', contextmenu);
});