当前位置：首页 → 问答吧 → 求解：关于extjs提交表单的两个问题

求解：关于extjs提交表单的两个问题

时间：2011-10-19

来源：互联网

第一个问题：新增数据到数据库中，提示ext-all.js语法错误，前台js如下：JScript code

Ext.onReady( function() {
        Ext.QuickTips.init();
        var hjm_form = new Ext.FormPanel( {
            url:'hjmAdd.icode',
            renderTo : document.body,
            frame : true,
//            title : 'Movie Information Form',
//            width : 600,
//            height: 450,
//            onSubmit : Ext.emptyFn,
//            submit : function() {
//                this.getEl().dom.action = 'hjmAdd.icode'; //连接到服务器的url地址
//            this.getEl().dom.submit();
//        },

        items : [ {
            xtype : 'textfield',
            fieldLabel : 'pHONE',
            name : 'hjm.nAME'
        }, {
            xtype : 'textfield',
            fieldLabel : 'pHONE',
            name : 'hjm.pHONE'
        } ],
        buttons : [ {
            text : '保存',
            handler : function() {
                hjm_form.getForm().submit( {
                    success : function(f, a) {
                        Ext.Msg.alert('success', 'it worked');
                    },
                    failure : function(f, a) {
                        Ext.Msg.alert('warning', 'error');
                    }
                });

            }
        }, {
            text : '重置',
            handler : function() {
                hjm_form.getForm().reset();
            }
        } ]

        });
    });

第二个问题，页面加载查询数据库中得数据显示到表格中，后台list可以得到数据，但是传不到前台中，js代码如下：
JScript code

Ext.onReady(function(){
    searchQueryForm();
    //页面加载的时候，默认数据查询页面显示用户信息列表 
    submitForm1(); 
});

function searchQueryForm() 
{ 
        //form 使用的时候建议设为局部变量，可以通过Ext.getCmp(“”)去获取form 
        var queryForm = null; 
        queryForm = new Ext.FormPanel({ 
        id:'queryForm', //指定queryForm的Id 
        renderTo:'searchPanel', //指向form所在的div层 
        labelWidth:70, //label标签的width占页面的百分比 
        region:'north', 
        border:false, //以显示面板的body元素的边界，虚假隐藏起来（默认为true） 
        badyBorder:false, //显示面板的body元素，假以隐藏它（默认为true的内部边界） 
        labelAlign:'right', //label标签的对齐方式 
        frame:true, //自定义面板的圆形边界，边界宽度1px。默认为false 
        title:'用户信息查询', //form的标题 
        
        items:[{ 
        /** 
        * layout:extJs容器组件，可以设置它的显示风格 
        * 它的有效值有absolute,accordion,anchor,border,card,fit,form and table 共9种 
        */ 
        layout:'column', 
        items:[ 
        { 
        columnWidth:.5, 
        layout:'form', 
        items:{ 
        name:'hjm.nAME', 
        hiddenName:'userId', 
        xtype:'textfield', 
        fieldLabel:'用户编码', 
        maxLength:'50', 
        //vtype:'specialChar', 
        anchor:'80%' 
        } 
        },{ 
        columnWidth:.5, 
        layout:'form', 
        items:{ 
        name:'hjm.pHONE', 
        hiddenName:'userName', 
        xtype:'textfield', 
        fieldLabel:'用户名称', 
        maxLength:'100', 
        //vtype:'specialChar', 
        anchor:'80%' 
        } 
        } 
        ] 
        }] 
        }); 
}



/** 
* 模糊查询 
*/ 
function submitForm1() 
        { 
        //初始化grid 
        var grid = null; 
        
        /** 
        * ? sortabel:（可选）如果真要排序允许在此列 
        * ? renderer:（可选）用于生成给定数据值单元格的HTML标记的功能。如果没有指定，默认渲染器使用的原始数据值。 
        * 在renderer:function createButton(参数)这里的参数可以没有或多个 
        * ? 鼠标移动图片上变成"手"是:style="cursor:hand" 
        */ 
        var colM = new Ext.grid.ColumnModel( 
        [{header:'用户账号',dataIndex:'iD',align:'center',sortable:true}, 
            {header:'用户姓名',dataIndex:'nAME',align:'center',sortabel:true}, 
            {header:'用户电话',dataIndex:'pHONE',align:'center',sortabel:true}]
        ); 
        //获取查询表单 
        var form = Ext.getCmp("queryForm").getForm(); 
        //判断是否通过验证，如果没有请直接关闭 
        if(!form.isValid()) 
        { 
        Ext.Msg.alert("系统提示","查询数据不正确，请确认输入!"); 
        return ; 
        } 
        //差选queryform中查询的数据参数 
        //store.baseParams = form.getValues(); 
        /** 
        * getLimitCount():获取分页每页行数,如果不传值，则会取默认值 
        * Start表示读取数据的起始位置、limit表示每次读取多少条数据 
        * callback:getMsg 表示回调时，执行函数 getMsg。可省略 
        */ 
        //查询信息 
        
        //查询信息 
        var store = new Ext.data.Store({ 
        url:'hjmList.icode?method=process1', //action的路径 
        reader:new Ext.data.JsonReader({ 
        root:'hjmList', //从struts2.0里面传递过来的参数:用户的集合 
        //totalProperty:'rowTotal', //从struts2.0里面传递过来的参数:总共的信息的行数 
        id:'id', 
        successPropery:'success'}, 
        ['id','name','phone'] 
        ) 
        }); 
        store.load(); 
        if(grid == null) 
        { 
        grid = new Ext.grid.EditorGridPanel({ 
        renderTo:"mainDiv", //grid查询结果指向显示的div层 
        title:"用户查询结果", //grid标题 
        //width:document.body.clientWidth, //设置grid的width的值 
        //hight:document.doby.clientHight-100,//设置hight的值 
        viewConfig:{forceFit:true}, //设置列数的充满窗口 
        loadMask:true, //在加载数据时的遮罩效果 
        stripeRows:true, //隔行换色 
        region:'center', //这个是设置在ViewPort中显示的位置 
        cm:colM, //定义的列 
        ds:store, //定义的数据源 
        border:false, 
        bodyBorder:false 
        //sm:sm, //定义的复选框 
        //listeners:包含一个或多个事件处理程序被添加到这个对象初始化过程中 
        //listeners:{cellclick:renderPage}
        /** 
        * bbar: new Ext.PagingToolbar部分是定义分页工具栏， 
        * 这里的分页控件栏还用到了1个自己定义的插件，就是可以选择每页显示多少条的 
        * plugins : [new Ext.ux.PageSizePlugin()],参考Ext的API 
        * 要实现分页，后台必须有total属性，表示共多少条数据 
        */ 

        }); 
        } 
        grid.render(); 
        }