extjs新增数据到数据库中

来源：互联网发布：第三方网络推广平台编辑：程序博客网时间：2024/04/28 19:13

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代码如下：

JavaScript code
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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(); 
        } 