【ext js 学习笔记】GridPanel 右键显示菜单的制作
按照教程继续学习，发现了EXT里的一个非常强大，效果非常炫的Grid组件，
在此DEMO中的数据源来自康盛的UCENTER数据库的uc_members表，只要你配置下DEMO的数据库连接即可使用。
本DEMO中所需要的所有JS,CSS，只要你下载EXT JS的完整包里均有，目录都一点没变。
页面部分demo.html如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ext demo</title>
<link rel="Stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1">
<div>
<div id="panel_id"></div>
<script type="text/javascript">
var grid;
function DataGrid()
{
var cm = new Ext.grid.ColumnModel
([
{header: "编号", width: 120, dataIndex: 'uid', sortable: true},
{header: "用户", width: 180, dataIndex: 'username', sortable: true},
{header: "邮箱", width: 115, dataIndex: 'email', sortable: true},
{header: "注册日期", width: 100, dataIndex: 'regdate', sortable: true}
]);
var titleInfo = "编辑数据";
var fields = [{name:"uid"},{name:"username"},{name:"email"},{name:"regdate"}];
var newStore = new Ext.data.Store
({
proxy:new Ext.data.HttpProxy({url:"JsonData.php?param=initData"}),
reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:fields})
});
newStore.load({params:{start:0,limit:8}});
var pagingBar = new Ext.PagingToolbar
({
displayInfo:true,
emptyMsg:"没有数据显示",
displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
store:newStore,
pageSize:8
});
this.gridPanel = new Ext.grid.GridPanel
({
cm:cm,
id:"grid_panel",
title:titleInfo,
store:newStore,
frame:false,
border:true,
layout:"fit",
pageSize:8,
autoWidth:true,
height:400,
clicksToEdit:1,
viewConfig:{forceFit:true},
bbar:pagingBar
});
this.gridPanel.on("rowcontextmenu",open_rowcontextmenu);
}
function open_rowcontextmenu(grid,rowIndex,e)
{
if (rowIndex < 0) { return; }
e.preventDefault();
var menus = new Ext.menu.Menu
({
items:
[
{
text: "编辑", pressed: true, icon: "resources/images/default/menu/menu-parent.gif",
handler: function() { Edit(grid, rowIndex, e, "编辑");menus.destroy(); }
},
{
text: "删除", pressed: true, icon: "resources/images/default/menu/menu-parent.gif",
handler: function() { Edit(grid, rowIndex, e, "删除");menus.destroy(); }
}
]
});
menus.showAt(e.getPoint());
}
function Edit(grid,rowIndex,e,titleInfo)
{
var record = grid.getStore().getAt(rowIndex);
var currUid = record.data.uid;
var currUsername = record.data.username;
var currEmail = record.data.email;
var currRegdate = record.data.regdate;
var p = new Ext.FormPanel
({
frame:true,labelWidth:36,
items:
[
{xtype:"hidden",id:"Uid",width:201,value:currUid},
{xtype:"textfield",fieldLabel:"用户",id:"Username",width:201,value:currUsername},
{xtype:"textfield",fieldLabel:"邮箱",id:"Email",width:200,value:currEmail},
{xtype:"datefield",fieldLabel:"注册日期",id:"Regdate",width:201,value:currRegdate,format:"Y年m月d日"}
]
});
var win = new Ext.Window
({
title:titleInfo+"窗口",autoHeight:true,width:300,resizable:false,buttonAlign:"center", modal:true,//height:300,
items:[p],
bbar:
[
{xtype:"button",text:"确定"+titleInfo,handler:function(){Edit_Sub(win,titleInfo);}},
'','',
{xtype:"button",text:"关闭",handler:function(){win.destroy();}}
]
});
win.show();
}
function Edit_Sub(winParam,titleInfo)
{
var currUid = Ext.getCmp("Uid").getValue();
var currUsername = Ext.getCmp("Username").getValue();
winParam.destroy();
if(titleInfo=="删除")
{
Ext.Msg.alert("消息提示","删除 "+currUsername+" 成功");
//具体删除代码自己实现
}
else
{
Ext.Msg.alert("消息提示","编辑 "+currUsername+" 成功");
//具体修改代码自己实现
}
}
function MakePanel(obj)
{
this.panel_def = new Ext.Panel
({
layout:"fit",
border:true,
frame:true,
title:"数据浏览",
autoWidth:true,
height:500,
id:"Viewport_ID",
renderTo:"panel_id",
items:[obj.gridPanel]
});
}
function loader()
{
Ext.QuickTips.init();
grid = new DataGrid();
MakePanel(grid);
}
Ext.onReady(loader);
</script>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ext demo</title>
<link rel="Stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1">
<div>
<div id="panel_id"></div>
<script type="text/javascript">
var grid;
function DataGrid()
{
var cm = new Ext.grid.ColumnModel
([
{header: "编号", width: 120, dataIndex: 'uid', sortable: true},
{header: "用户", width: 180, dataIndex: 'username', sortable: true},
{header: "邮箱", width: 115, dataIndex: 'email', sortable: true},
{header: "注册日期", width: 100, dataIndex: 'regdate', sortable: true}
]);
var titleInfo = "编辑数据";
var fields = [{name:"uid"},{name:"username"},{name:"email"},{name:"regdate"}];
var newStore = new Ext.data.Store
({
proxy:new Ext.data.HttpProxy({url:"JsonData.php?param=initData"}),
reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:fields})
});
newStore.load({params:{start:0,limit:8}});
var pagingBar = new Ext.PagingToolbar
({
displayInfo:true,
emptyMsg:"没有数据显示",
displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
store:newStore,
pageSize:8
});
this.gridPanel = new Ext.grid.GridPanel
({
cm:cm,
id:"grid_panel",
title:titleInfo,
store:newStore,
frame:false,
border:true,
layout:"fit",
pageSize:8,
autoWidth:true,
height:400,
clicksToEdit:1,
viewConfig:{forceFit:true},
bbar:pagingBar
});
this.gridPanel.on("rowcontextmenu",open_rowcontextmenu);
}
function open_rowcontextmenu(grid,rowIndex,e)
{
if (rowIndex < 0) { return; }
e.preventDefault();
var menus = new Ext.menu.Menu
({
items:
[
{
text: "编辑", pressed: true, icon: "resources/images/default/menu/menu-parent.gif",
handler: function() { Edit(grid, rowIndex, e, "编辑");menus.destroy(); }
},
{
text: "删除", pressed: true, icon: "resources/images/default/menu/menu-parent.gif",
handler: function() { Edit(grid, rowIndex, e, "删除");menus.destroy(); }
}
]
});
menus.showAt(e.getPoint());
}
function Edit(grid,rowIndex,e,titleInfo)
{
var record = grid.getStore().getAt(rowIndex);
var currUid = record.data.uid;
var currUsername = record.data.username;
var currEmail = record.data.email;
var currRegdate = record.data.regdate;
var p = new Ext.FormPanel
({
frame:true,labelWidth:36,
items:
[
{xtype:"hidden",id:"Uid",width:201,value:currUid},
{xtype:"textfield",fieldLabel:"用户",id:"Username",width:201,value:currUsername},
{xtype:"textfield",fieldLabel:"邮箱",id:"Email",width:200,value:currEmail},
{xtype:"datefield",fieldLabel:"注册日期",id:"Regdate",width:201,value:currRegdate,format:"Y年m月d日"}
]
});
var win = new Ext.Window
({
title:titleInfo+"窗口",autoHeight:true,width:300,resizable:false,buttonAlign:"center", modal:true,//height:300,
items:[p],
bbar:
[
{xtype:"button",text:"确定"+titleInfo,handler:function(){Edit_Sub(win,titleInfo);}},
'','',
{xtype:"button",text:"关闭",handler:function(){win.destroy();}}
]
});
win.show();
}
function Edit_Sub(winParam,titleInfo)
{
var currUid = Ext.getCmp("Uid").getValue();
var currUsername = Ext.getCmp("Username").getValue();
winParam.destroy();
if(titleInfo=="删除")
{
Ext.Msg.alert("消息提示","删除 "+currUsername+" 成功");
//具体删除代码自己实现
}
else
{
Ext.Msg.alert("消息提示","编辑 "+currUsername+" 成功");
//具体修改代码自己实现
}
}
function MakePanel(obj)
{
this.panel_def = new Ext.Panel
({
layout:"fit",
border:true,
frame:true,
title:"数据浏览",
autoWidth:true,
height:500,
id:"Viewport_ID",
renderTo:"panel_id",
items:[obj.gridPanel]
});
}
function loader()
{
Ext.QuickTips.init();
grid = new DataGrid();
MakePanel(grid);
}
Ext.onReady(loader);
</script>
</div>
</form>
</body>
</html>
数据请求页面JsonData.php：
header('Content-Type: text/html; charset=utf-8');
if($_GET['param']=='initData')
{
$hostname='localhost';
$user='root123';
$pwd='123';
$dbname='uc7.2';
$start=$_POST['start'];
$limit=$_POST['limit'];
//计算总数的查询
$sql_count="SELECT uid,username,email,regdate FROM `uc_members`";
//进行分页的查询
$sql="SELECT uid,username,email,regdate FROM `uc_members` limit $start,$limit";
$connect=@mysql_connect($hostname,$user,$pwd);
@mysql_select_db($dbname,$connect);
mysql_query("SET NAMES utf8");
$query_count = mysql_query($sql_count , $connect);
$query = mysql_query($sql , $connect);
$i=0;
while($row=mysql_fetch_array($query))
{
$result[$i]['uid']=$row['uid'];
$result[$i]['username']=$row['username'];
$result[$i]['email']=$row['email'];
$result[$i]['regdate']=date("Y-m-d",$row['regdate']);
$i++;
}
$count=mysql_num_rows($query_count);
$res=array();
$res['totalPorperty']=$count;
$res['result']=$result;
mysql_close($connect);
echo json_encode($res);
}
if($_GET['param']=='initData')
{
$hostname='localhost';
$user='root123';
$pwd='123';
$dbname='uc7.2';
$start=$_POST['start'];
$limit=$_POST['limit'];
//计算总数的查询
$sql_count="SELECT uid,username,email,regdate FROM `uc_members`";
//进行分页的查询
$sql="SELECT uid,username,email,regdate FROM `uc_members` limit $start,$limit";
$connect=@mysql_connect($hostname,$user,$pwd);
@mysql_select_db($dbname,$connect);
mysql_query("SET NAMES utf8");
$query_count = mysql_query($sql_count , $connect);
$query = mysql_query($sql , $connect);
$i=0;
while($row=mysql_fetch_array($query))
{
$result[$i]['uid']=$row['uid'];
$result[$i]['username']=$row['username'];
$result[$i]['email']=$row['email'];
$result[$i]['regdate']=date("Y-m-d",$row['regdate']);
$i++;
}
$count=mysql_num_rows($query_count);
$res=array();
$res['totalPorperty']=$count;
$res['result']=$result;
mysql_close($connect);
echo json_encode($res);
}
效果图如下：
