• 转载Ext.form.formPanel 与服务器交互 初始化表单


    Ext.form.formPanel 与服务器交互 初始化表单

        formPanel 初始化表单有两种方式加载,一种是本地加载,一种是通过返回回来的Json格式数据加载到表单里面。
    得到表单来加载数据的时候,必须用form.getForm(), 得到basicForm()这个对象,formPanel是继承自basciForm()
    本地加载通过form.getForm.loadRecord() 加载,传入的一个记录集(new Ext.data.record.create())。 根据相应的映射会自动匹配到表单的每个文本框。
        比如,通过点击表格的编辑连接,得到表格记录的行数据,初始化到表单。
    var updateGrid = Ext.getCmp("displayEmpGrid");
    var rows = updateGrid.getSelectionModel().getSelections();
    if (rows) {
    //for (var i = 0; i < rows.length; i++) {
    alert(rows[0].imageUpload);
    form.getForm().loadRecord(rows[0]); //将数据集加载到表单中,直接获取表格的数据
    Ext.get('imageBrowse').dom.src = "images/anniubg.gif";
    //}
    }
        这种方式是将所有的数据放一次到页面,加载所有的数据到页面会加重页面负担。。

        远程加载是通过 form.getForm().load()加载。
    // 解析后台返回的数据

    var empReader = new Ext.data.JsonReader              //解析Json格式数据。 ({                                                                                                                                                                                                                                                  

    name:"empNo ",   //表单对应的属性名

    mapping:"empNo"      //为json数据里面 对应的属性值

    },{name:"empName", mapping:"empName"});


    form.getForm().reader = empReader;   //这个不能少,不然明明有获得数据,确没有显示。。

    // 从后台加载json格式数据
    form.getForm().load({
    url : "employee_selectByPrimaryEmployee.action",     
    method : "POST",
    params : {
    empNo : empNo //参数
    }
    });

    //json数据,即action中 selectByPrimaryEmployee 所要返回到页面的json数据格式

    var json = [{empNo:"111",empName:"小王"}];

         printwrite.print(json);     //将数据返回到前台

        这样子就是通过将服务器数据加载到表单显示。一定要注意,加载本地和加载远程不要用错方法了,加载远程是用load(),里面传的url。 本地用 加载用loadRecord(),直接传入一个Stroe的记录集,就可以加载进去。

    ------------------------------------------------------------------------------------------------------------------------------------

    grid.on('rowdblclick', function(grid, rowIndex, e) {   

    1.        var selectedId = ds.data.items[rowIndex].id;  
    2.      form1.loadRecord(ds.getAt(selectedId-1));  
    3.     }); 

    Ext.form.Form.loadRecord( Record record ) 加载一条记录,如果再做一点简单的工作,form可以根据grid记录的结构自动生成、渲染。

    另外data store有个方便的query方法,可以判断grid某记录是否是新增加记录,比如这样:

    Java代码  收藏代码
    1. if(ds.query('state','new').length!=0){  
    2.    console.log("我有新增记录!");  
    3.    //......  

    var editForm = new Ext.form.FormPanel( {
    baseCls : 'x-plain',
    labelWidth : 75,
    url : 'editCustomer.adminService',
    defaultType : 'textfield',
    items : [new Ext.form.TextField( {
    fieldLabel : 'userID',
    allowBlank : false,
    name : 'id',
    anchor : '90%'
    }), {
    fieldLabel : '用户名',
    name : 'name',
    allowBlank : false,// readOnly:true,
    anchor : '90%'
    }, {
    fieldLabel : '真实姓名',
    name : 'realName',
    allowBlank : false,
    anchor : '90%'
    }, {
    fieldLabel : '国籍',
    name : 'unation',
    allowBlank : false,
    anchor : '90%'
    }]
    });

    var editWin;
    var editCustomer = function() {
    if (!currRecord) {
    Ext.MessageBox.alert('提示', '请选择一个用户。');
    } else {
    if (!editWin) {
    editWin = new Ext.Window( {
    title : '修改用户信息',
    layout : 'fit',
    width : 500,
    height : 300,
    closeAction : 'hide',
    plain : true,
    modal : true,
    items : editForm,
    buttons : [ {
    text : '保存',
    handler : function() {
    // 保存修改信息
    if (editForm.form.isValid()) {
    editForm.form.submit( {
    waitMsg : '正在处理...',
    failure : function(form, action) {
    Ext.MessageBox.alert(
    'Error Message', '保存失败');
    },
    success : function(form, action) {
    Ext.MessageBox.alert('提示', '保存成功');
    addWin.hide();
    store.reload();
    }
    });
    } else {
    Ext.MessageBox
    .alert('错误', '请修正页面提示的错误后提交。');
    }
    }
    }, {
    text : '关闭',
    handler : function() {
    editWin.hide();
    }
    }]
    });
    }
    editWin.show();
    editForm.getForm().loadRecord(currRecord);
    }
    }
  • 相关阅读:
    Windows进程通信(2)使用内存映射文件
    VC2010添加头文件目录
    CString(ANSI/Unicode)与string/wstring的安全转换
    1005 ( Number Sequence )
    1004 ( Let the Balloon Rise )
    1003 ( Max Sum )
    CreateMutex
    CloseHandle
    delphi的Frame简单演示
    DLL中显示模式窗体
  • 原文地址:https://www.cnblogs.com/asingna/p/2122229.html
Copyright © 2020-2023  润新知