zoukankan      html  css  js  c++  java
  • 转载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);
    }
    }
  • 相关阅读:
    可变参数的宏
    解决Visio复制绘图时虚框变实框的问题
    CSS选择器:伪类(图文详解)
    CSS属性:背景属性(图文详解)
    CSS样式----浮动(图文详解)
    CSS盒模型详解(图文教程)
    CSS样式----CSS样式表的继承性和层叠性(图文详解)
    Android UI组件----AppWidget控件入门详解
    Android UI控件----ExpandableListView的基本用法
    ListView中动态显示和隐藏Header&Footer
  • 原文地址:https://www.cnblogs.com/asingna/p/2122229.html
Copyright © 2011-2022 走看看