ExtJs-GridPanelの簡単な添削
81155 ワード
1.まず効果図を見ます.
2.extコード
コード
コード
4.asxコード
コード
2.extコード
コード
//
/ <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" />
Ext.namespace(
'
XQH.ExtJs.Frame
'
);
XQH.ExtJs.Frame.RoleManage
=
function
() {
this
.init();
};
Ext.extend(XQH.ExtJs.Frame.RoleManage, Ext.util.Observable, {
init:
function
() {
//
addForm
=
new
Ext.form.FormPanel({
id:
'
addRoleForm
'
,
width:
460
,
height:
250
,
//
bodyStyle:
'
margin:5px 5px 5px 5px
'
,
frame:
true
,
xtype:
'
filedset
'
,
labelWidth:
60
,
items:
[
{
xtype:
'
fieldset
'
,
title:
'
'
,
collapsible:
true
,
autoHeight:
true
,
autoWidth:
true
,
items:
[
{
xtype:
'
textfield
'
,
name:
'
RoleName
'
,
fieldLabel:
'
'
,
emptyText:
'
'
,
blankText:
'
'
,
allowBlank:
false
,
maxLength:
10
,
maxLengthText:
'
10
'
,
anchor:
'
98%
'
}
]
},
{
xtype:
'
fieldset
'
,
title:
'
'
,
collapsible:
true
,
autoHeight:
true
,
autoWidth:
true
,
items:
[
{ html:
'
...
'
}
]
}
],
reader:
new
Ext.data.JsonReader({
root:
'
data
'
,
fields: [
{ name:
'
RoleId
'
, mapping:
'
RoleId
'
, type:
'
int
'
},
{ name:
'
RoleName
'
, mapping:
'
RoleName
'
, type:
'
string
'
}
]
})
});
//
addWin
=
new
Ext.Window({
id:
'
addRoleWin
'
,
title:
'
'
,
width:
480
,
height:
210
,
//
modal:
true
,
//
resizable:
false
,
//
closeAction:
'
hide
'
,
plain:
true
,
buttonAlign:
'
center
'
,
items:addForm,
buttons:
[
{ text:
'
'
, handler:
function
() { Ext.getCmp(
'
addRoleWin
'
).hide(); } },
{ text:
'
'
, id:
'
btnSubmit
'
}
]
});
//
function
addRoleFunction() {
var
submitButton
=
this
;
submitButton.disable();
var
userForm
=
Ext.getCmp(
"
addRoleForm
"
);
if
(userForm.form.isValid()) {
userForm.form.doAction(
'
submit
'
, {
url:
"
http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=AddRole
"
,
method:
'
post
'
,
waitTitle:
"
"
,
waitMsg:
'
...
'
,
success:
function
(form, action) {
submitButton.enable();
Ext.getCmp(
'
roleGD
'
).store.reload();
userForm.ownerCt.hide();
},
failure:
function
(form, action) {
var
tip
=
"
!
"
;
if
(action.result.rspText
!=
""
)
tip
=
action.result.rspText;
Ext.Msg.alert(
'
'
, tip);
submitButton.enable();
}
});
}
else
{
submitButton.enable();
}
};
//
function
btnAddClick() {
Ext.getCmp(
'
addRoleForm
'
).form.reset();
Ext.getCmp(
"
addRoleWin
"
).setTitle(
'
'
);
Ext.getCmp(
"
addRoleWin
"
).buttons[
1
].handler
=
addRoleFunction;
Ext.getCmp(
"
addRoleWin
"
).show();
};
//
function
updateRoleFunction() {
var
submitButton
=
this
;
submitButton.disable();
var
userForm
=
Ext.getCmp(
"
addRoleForm
"
);
var
id
=
userForm.form.reader.jsonData.data[
0
].RoleId;
if
(userForm.form.isValid()) {
userForm.form.doAction(
'
submit
'
, {
url:
'
http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=UpdateRoleById&RoleId=
'
+
id,
method:
'
post
'
,
//
params:{},
waitTitle:
"
"
,
waitMsg:
'
...
'
,
success:
function
(form, action) {
submitButton.enable();
Ext.getCmp(
'
roleGD
'
).store.reload();
userForm.ownerCt.hide();
},
failure:
function
(form, action) {
var
tip
=
"
！
"
;
if
(action.result.text
!=
""
&
action.result.text
!=
null
)
tip
=
action.result.text;
Ext.Msg.alert(
'
'
, tip);
submitButton.enable();
}
});
}
else
{
submitButton.enable();
}
};
//
function
btnUpdateClick() {
var
grid
=
Ext.getCmp(
'
roleGD
'
);
if
(grid.getSelectionModel().getSelections()[
0
]
==
undefined) {
Ext.Msg.alert(
"
"
,
"
"
);
}
else
{
Ext.getCmp(
'
addRoleWin
'
).setTitle(
'
'
);
Ext.getCmp(
"
btnSubmit
"
).handler
=
updateRoleFunction;
Ext.getCmp(
"
addRoleForm
"
).form.reset();
var
roleId
=
grid.getSelectionModel().getSelections()[
0
].data.RoleId;
var
url
=
'
http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=GetRoleById&roleId=
'
+
roleId;
Ext.getCmp(
"
addRoleWin
"
).show();
Ext.getCmp(
"
addRoleForm
"
).load({
url: url,
waitTitle:
"
"
,
waitMsg:
'
...
'
,
success:
function
(form, action) {
},
failure:
function
(form, action) {
var
tip
=
"
"
;
if
(action.response.responseText
!=
""
)
tip
=
action.response.responseText;
Ext.Msg.alert(
'
'
, tip);
}
});
}
};
//
function
delRoleFunction() {
var
grid
=
Ext.getCmp(
'
roleGD
'
);
if
(grid.getSelectionModel().getSelections()[
0
]
==
undefined) {
Ext.Msg.alert(
"
"
,
"
"
);
}
else
{
Ext.MessageBox.confirm(
'
'
,
'
？
'
,
function
(btn) {
if
(btn
==
'
yes
'
) {
var
conn
=
new
Ext.data.Connection();
conn.request
({
url:
'
http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=DeleteRoleById
'
,
params: { Id: grid.getSelectionModel().getSelections()[
0
].data.RoleId },
method:
'
post
'
,
scope:
this
,
callback:
function
(options, success, response) {
if
(success) {
Ext.getCmp(
'
roleGD
'
).store.reload();
}
else
{
Ext.MessageBox.alert(
"
"
,
"
！
"
);
}
}
});
}
});
}
};
//
toolBar
=
new
Ext.Toolbar({
items:
[
{ text:
'
'
, id:
'
btnAdd
'
},
'
-
'
,
{ text:
'
'
, id:
'
btnUpdate
'
},
'
-
'
,
{ text:
'
'
, handler:delRoleFunction }
]
});
//
var
addUserBtn
=
Ext.getCmp(
'
btnAdd
'
);
addUserBtn.on(
'
click
'
, btnAddClick);
//
var
btnUpdate
=
Ext.getCmp(
'
btnUpdate
'
);
btnUpdate.on(
'
click
'
, btnUpdateClick);
var
dataStore
=
new
Ext.data.Store({
proxy:
new
Ext.data.HttpProxy({
url:
'
http://www.cnblogs.com/Service/SystemService/RoleService.ashx?Method=GetAllRoles
'
}),
reader:
new
Ext.data.JsonReader({
root:
'
Table
'
,
totalProperty:
'
RecordCount
'
,
id:
'
RoleId
'
,
fields: [
'
RoleId
'
,
'
RoleName
'
]
})
});
dataStore.load({ params: { start:
0
, limit:
20
} });
//
grid
var
roleGrid
=
new
Ext.grid.GridPanel({
region:
'
center
'
,
id:
'
roleGD
'
,
title:
'
'
,
store: dataStore,
columns:
[
new
Ext.grid.RowNumberer({ header:
"
"
, width:
50
}),
{ header:
"
RoleId
"
, width:
50
, sortable:
false
, dataIndex:
'
RoleId
'
, hidden:
true
},
{ header:
"
"
, width:
50
, sortable:
true
, dataIndex:
'
RoleName
'
}
],
loadMask: { msg:
"
...
"
},
stripeRows:
true
,
viewConfig: {
forceFit:
true
},
sm:
new
Ext.grid.RowSelectionModel({ singleSelect:
true
}),
bbar:
new
Ext.PagingToolbar({
pageSize:
20
,
store: dataStore,
displayInfo:
true
,
displayMsg:
"
{0} {1} ， {2}
"
,
emptyMsg:
"
"
}),
tbar: toolBar
});
//
var
roleView
=
new
Ext.Panel({
renderTo:
'
roleMain
'
,
height:
550
,
layout:
'
border
'
,
border:
false
,
items: [roleGrid]
});
},
destroy:
function
() {
}
});
コード
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace XQH.ExtJs.LinqDatabase
{
public class RoleLinqAccess
{
LinqDatabaseDataContext db
=
new
LinqDatabaseDataContext();
//
/ <summary>
//
/
//
/ </summary>
//
/ <param name="start"></param>
//
/ <param name="limit"></param>
//
/ <param name="total"></param>
//
/ <returns></returns>
public List
<
XRole
>
GetAllRole(
int
start,
int
limit,out
int
total)
{
var
q
=
from r
in
db.XRole
select r;
total
=
q.Count();
if
(limit
==
0
)
{
return
q.ToList();
}
else
{
return
q.Skip(start).Take(limit).ToList();
}
}
//
/ <summary>
//
/ ID
//
/ </summary>
//
/ <param name="id"></param>
//
/ <returns></returns>
public XRole GetRoleById(
int
id)
{
var
q
=
from r
in
db.XRole
where r.RoleId
==
id
select r;
return
q.First();
}
//
/ <summary>
//
/
//
/ </summary>
//
/ <param name="role"></param>
//
/ <returns></returns>
public List
<
XRole
>
AddRole(XRole role)
{
db.XRole.InsertOnSubmit(role);
db.SubmitChanges();
return
db.XRole.ToList();
}
//
/ <summary>
//
/ ID
//
/ </summary>
//
/ <param name="id"></param>
//
/ <returns></returns>
public List
<
XRole
>
DelRoleById(
int
id)
{
var
q
=
from r
in
db.XRole
where r.RoleId
==
id
select r;
db.XRole.DeleteAllOnSubmit(q);
db.SubmitChanges();
return
db.XRole.ToList();
}
//
/ <summary>
//
/
//
/ </summary>
//
/ <param name="role"></param>
//
/ <returns></returns>
public List
<
XRole
>
UpdateRole(XRole role)
{
var
q
=
from r
in
db.XRole
where r.RoleId
==
role.RoleId
select r;
foreach (XRole r
in
q)
{
r.RoleId
=
role.RoleId;
r.RoleName
=
role.RoleName;
}
db.SubmitChanges();
return
db.XRole.ToList();
}
}
}
4.asxコード
コード
//
/ <summary>
//
/
//
/ </summary>
public
void
GetAllRoles()
{
StringBuilder jsonData
=
new
StringBuilder();
int
start
=
Convert.ToInt32(Request[
"
start
"
]);
int
limit
=
Convert.ToInt32(Request[
"
limit
"
]);
int
total
=
0
;
List
<
XRole
>
lsRole
=
roleAccess.GetAllRole(start, limit, out total);
JsonConvert
<
XRole
>
json
=
new
JsonConvert
<
XRole
>
();
jsonData
=
json.ToGridPanel(lsRole, total);
Response.Write(jsonData);
Response.End();
}
//
/ <summary>
//
/ ID
//
/ </summary>
//
/ <param name="id"></param>
//
/ <returns></returns>
public
void
GetRoleById()
{
StringBuilder jsonData
=
new
StringBuilder();
bool success
=
false
;
string rspText
=
string.Empty;
string id
=
Request[
"
RoleId
"
].ToString();
try
{
XRole role
=
roleAccess.GetRoleById(Convert.ToInt32(id));
success
=
true
;
rspText
=
"
success
"
;
JsonConvert
<
XRole
>
json
=
new
JsonConvert
<
XRole
>
();
jsonData
=
json.ToFormPanel(success, rspText, role);
}
catch
(Exception ex)
{
success
=
false
;
rspText
=
ex.Message;
}
Response.Write(jsonData);
Response.End();
}
//
/ <summary>
//
/
//
/ </summary>
public
void
AddRole()
{
string jsonStr
=
string.Empty;
bool success
=
false
;
string rspText
=
string.Empty;
string roleName
=
Request[
"
RoleName
"
].ToString();
XRole role
=
new
XRole();
role.RoleName
=
roleName;
try
{
roleAccess.AddRole(role);
success
=
true
;
rspText
=
"
!
"
;
}
catch
(Exception ex)
{
success
=
false
;
rspText
=
ex.Message;
}
jsonStr
=
"
{success:
"
+
success.ToString().ToLower()
+
"
,message:'
"
+
rspText
+
"
!'}
"
;
Response.Write(jsonStr);
Response.End();
}
//
/ <summary>
//
/
//
/ </summary>
public
void
UpdateRoleById()
{
string jsonStr
=
string.Empty;
bool success
=
false
;
string rspText
=
string.Empty;
string RoleId
=
Request[
"
RoleId
"
].ToString();
string RoleName
=
Request[
"
RoleName
"
].ToString();
XRole role
=
new
XRole();
role.RoleId
=
Convert.ToInt32(RoleId);
role.RoleName
=
RoleName;
try
{
roleAccess.UpdateRole(role);
success
=
true
;
rspText
=
"
!
"
;
}
catch
(Exception ex)
{
success
=
false
;
rspText
=
ex.Message;
}
jsonStr
=
"
{success:
"
+
success.ToString().ToLower()
+
"
,message:'
"
+
rspText
+
"
!'}
"
;
Response.Write(jsonStr);
Response.End();
}
//
/ <summary>
//
/ ID
//
/ </summary>
public
void
DeleteRoleById()
{
string jsonStr
=
string.Empty;
bool success
=
false
;
string rspText
=
string.Empty;
try
{
int
id
=
Convert.ToInt32(Request[
"
Id
"
].ToString());
List
<
XRole
>
lsRole
=
roleAccess.DelRoleById(id);
success
=
true
;
rspText
=
"
success
"
;
}
catch
(Exception ex)
{
success
=
true
;
rspText
=
ex.Message;
}
jsonStr
=
"
{success:
"
+
success.ToString().ToLower()
+
"
,message:'
"
+
rspText
+
"
!'}
"
;
Response.Write(jsonStr);
Response.End();
}