extjs新增数据到数据库中
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代码如下：
|
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();
}
|