<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="ExtBase/ext-base.js"></script>
<script type="text/javascript" src="ExtBase/ext-all.js"></script>
<script type="text/javascript" src="ExtBase/ext-lang-zh_CN.js"></script>
</head>
<body>
<form runat="server">
<div>
<div ></div>
<script type="text/javascript">
var grid;
function DataGrid()
{
var cm = new Ext.grid.ColumnModel
([
{header: "编号", width: 120, dataIndex: 'ID', sortable: true},
{header: "标题", width: 180, dataIndex: 'Title', sortable: true},
{header: "作者", width: 115, dataIndex: 'Author', sortable: true},
{header: "来源", width: 100, dataIndex: 'Source', sortable: true},
{header: "日期", width: 100, dataIndex: 'PostDate', sortable: true}
]);
var titleInfo = "编辑数据";
var fields = [{name:"ID"},{name:"Title"},{name:"Author"},{name:"Source"},{name:"PostDate"}];
var newStore = new Ext.data.Store
({
proxy:new Ext.data.HttpProxy({url:"JsonData.aspx?param=initData"}),
reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:fields})
});
newStore.load({params:{start:0,limit:16}});
var pagingBar = new Ext.PagingToolbar
({
displayInfo:true,
emptyMsg:"没有数据显示",
displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
store:newStore,
pageSize:16
});
this.gridPanel = new Ext.grid.GridPanel
({
cm:cm,
id:"grid_panel",
title:titleInfo,
store:newStore,
frame:false,
border:true,
layout:"fit",
pageSize:16,
autoWidth:true,
height:400,
clicksToEdit:1,
viewConfig:{forceFit:true},
bbar:pagingBar
});
this.gridPanel.on("rowcontextmenu",open_rowcontextmenu);
}
function open_rowcontextmenu(grid,rowIndex,e)
{
e.preventDefault();
var menus = new Ext.menu.Menu
([
{
xtype:"button",text:"编辑",pressed:true,icon:"imgMenus/3.png",
handler:function(){Edit(grid,rowIndex,e ,"编辑");}
},
{
xtype:"button",text:"删除",pressed:true,icon:"imgMenus/3.png",
handler:function(){Edit(grid,rowIndex,e ,"删除");}
}
]);
menus.showAt(e.getPoint());
}
function Edit(grid,rowIndex,e,titleInfo)
{
var record = grid.getStore().getAt(rowIndex);
var currID = record.data.ID;
var currAuthor = record.data.Author;
var currTitle = record.data.Title;
var currSource = record.data.Source;
var currPostDate = record.data.PostDate;
var p = new Ext.FormPanel
({
frame:true,labelWidth:36,
items:
[
{xtype:"hidden",id:"ID",width:201,value:currID},
{xtype:"textfield",fieldLabel:"标题",id:"Title",width:201,value:currTitle},
{xtype:"textfield",fieldLabel:"作者",id:"Author",width:200,value:currAuthor},
{xtype:"textfield",fieldLabel:"来源",id:"Source",width:201,value:currSource},
{xtype:"datefield",fieldLabel:"日期",id:"PostDate",width:201,value:currPostDate,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 currID = Ext.getCmp("ID").getValue();
winParam.destroy();
if(titleInfo=="删除")
{
Ext.Msg.alert("消息提示","删除成功");
//具体删除代码自己实现
}
else
{
Ext.Msg.alert("消息提示","编辑成功");
//具体修改代码自己实现
}
}
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>
<head runat="server">
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="ExtBase/ext-base.js"></script>
<script type="text/javascript" src="ExtBase/ext-all.js"></script>
<script type="text/javascript" src="ExtBase/ext-lang-zh_CN.js"></script>
</head>
<body>
<form runat="server">
<div>
<div ></div>
<script type="text/javascript">
var grid;
function DataGrid()
{
var cm = new Ext.grid.ColumnModel
([
{header: "编号", width: 120, dataIndex: 'ID', sortable: true},
{header: "标题", width: 180, dataIndex: 'Title', sortable: true},
{header: "作者", width: 115, dataIndex: 'Author', sortable: true},
{header: "来源", width: 100, dataIndex: 'Source', sortable: true},
{header: "日期", width: 100, dataIndex: 'PostDate', sortable: true}
]);
var titleInfo = "编辑数据";
var fields = [{name:"ID"},{name:"Title"},{name:"Author"},{name:"Source"},{name:"PostDate"}];
var newStore = new Ext.data.Store
({
proxy:new Ext.data.HttpProxy({url:"JsonData.aspx?param=initData"}),
reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:fields})
});
newStore.load({params:{start:0,limit:16}});
var pagingBar = new Ext.PagingToolbar
({
displayInfo:true,
emptyMsg:"没有数据显示",
displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
store:newStore,
pageSize:16
});
this.gridPanel = new Ext.grid.GridPanel
({
cm:cm,
id:"grid_panel",
title:titleInfo,
store:newStore,
frame:false,
border:true,
layout:"fit",
pageSize:16,
autoWidth:true,
height:400,
clicksToEdit:1,
viewConfig:{forceFit:true},
bbar:pagingBar
});
this.gridPanel.on("rowcontextmenu",open_rowcontextmenu);
}
function open_rowcontextmenu(grid,rowIndex,e)
{
e.preventDefault();
var menus = new Ext.menu.Menu
([
{
xtype:"button",text:"编辑",pressed:true,icon:"imgMenus/3.png",
handler:function(){Edit(grid,rowIndex,e ,"编辑");}
},
{
xtype:"button",text:"删除",pressed:true,icon:"imgMenus/3.png",
handler:function(){Edit(grid,rowIndex,e ,"删除");}
}
]);
menus.showAt(e.getPoint());
}
function Edit(grid,rowIndex,e,titleInfo)
{
var record = grid.getStore().getAt(rowIndex);
var currID = record.data.ID;
var currAuthor = record.data.Author;
var currTitle = record.data.Title;
var currSource = record.data.Source;
var currPostDate = record.data.PostDate;
var p = new Ext.FormPanel
({
frame:true,labelWidth:36,
items:
[
{xtype:"hidden",id:"ID",width:201,value:currID},
{xtype:"textfield",fieldLabel:"标题",id:"Title",width:201,value:currTitle},
{xtype:"textfield",fieldLabel:"作者",id:"Author",width:200,value:currAuthor},
{xtype:"textfield",fieldLabel:"来源",id:"Source",width:201,value:currSource},
{xtype:"datefield",fieldLabel:"日期",id:"PostDate",width:201,value:currPostDate,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 currID = Ext.getCmp("ID").getValue();
winParam.destroy();
if(titleInfo=="删除")
{
Ext.Msg.alert("消息提示","删除成功");
//具体删除代码自己实现
}
else
{
Ext.Msg.alert("消息提示","编辑成功");
//具体修改代码自己实现
}
}
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>
分享到：
发表评论
-
EXT中Menu和ComboBox的BUG及解决方法
2011-04-26 19:58 1460最近一直在玩Ext,所以可 ... -
tabpanel的激活模式
2011-04-13 00:58 896listeners : { render : func ... -
ExtJs非Iframe框架加载页面实现
2011-04-09 00:32 3879在用Ext开发App应用时，一般的框架都是左边为菜单栏，中 ... -
EXTJS FORM textField emptyText 空值提交的解决办法
2011-04-02 01:10 4796Ext的textField有一个emptyText属性用起来很 ... -
项目开发中遇到的extjs常见问题
2011-03-31 22:16 1909事件触发机制 l ... -
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中使用 启用了事件验证。
2011-03-28 23:35 1239回发或回调参数无效。在配置中使用 <pages enab ... -
extjs 如何自动缩放
2011-03-24 00:03 1556例如 可编辑的grid面板 var grid_mate ... -
Extjs 开发使用
2011-03-13 16:24 1918extjs基础 extjs基础 extjs ... -
Extjs ajax实现文本框(TextField)联想功能
2011-03-13 16:19 2326<%@ page language="ja ... -
Extjs EditorGrid 可编辑表格控件
2011-03-03 23:26 1854定义Ext.grid.ColumnModel时，列的信息项ed ... -
Extjs操作Dom
2011-02-25 23:12 12671.获取dom 通过id获取： var el = Ext. ... -
调试ExtJs利器 - Firebug(Firefox插件)
2011-02-25 00:22 1086Firebug是一个Firefox插件,集HTML查看和编辑、 ... -
调试ExtJs利器 - Full Source(IE插件)
2011-02-25 00:19 992Full Source是一个Internet Explorer ... -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:17 806ExtJs的智能提示插件-Spket(Eclipse) -
ExtJs的智能提示插件-Spket(Eclipse)
2011-02-25 00:16 1493选择Help -> Software Updates - ... -
EXTJS accordion layout event
2011-02-24 20:14 1232EXTJS 的 accordion layout 布局在API ... -
extjs 相关PPT
2011-02-24 20:13 969布局介绍和开发相关介绍 -
EXTJS学习系列提高篇:第七篇(转载)作者殷良胜,制作树形菜单之一
2011-02-23 00:01 1011制作树形菜单的原理是:首先连接数据库,将数据按照树的结构形式返 ... -
去掉修改后extjs中grid 左上角的红三角
2011-02-17 13:54 1428gridpanel.on('afteredit',functi ... -
可输入可联想的下拉列表的实现——Ext ComboBox
2011-02-17 13:36 1862网上这样的控件不少，有很多实现方法，其中不少的很巧妙。 ...
相关推荐
右键菜单的资料，代码已经详细描写。请仿照文件中所描述即可使用，不限于EXT4.0以上版本使用。
下面是复选框的且带右键菜单的树代码。 HTML code Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); ...
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
对于GridPanel中拖动选中行排序的实现，网上有不少ExtJs实现的例子，但是没有找到使用Ext.net实现的，正好最近有个需求要使用，干脆来写一个。 DEMO功能说明： 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
扩展的GridPanel，让其分页后保持选择状态
EXT实例GridPanel. 实现简单的。
gridpanel的使用，挺好的啊 gridpanel的使用，挺好的啊 gridpanel的使用，挺好的啊
Extnet GridPanel 增行 删行 弹出窗体 页面传值
改变gridpanel的行颜色，以及gridpanel 的表格变色
ExtJS的GridPanel导出excel文件,方便快捷易懂!
通过Servlet让Extjs GridPanel 显示数据库数据
Ext.grid.GridPanel 删除线 放到example文件夹下运行
ExtJs GridPanel双击事件获得双击的行，双击行可以选中前面的checkbox，并获得行号
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
主要目的 a.... 将 gridpanel 的contextmenuID 设置为 menu 控件的ID, 从而为GridPanel 添加右键菜单 代码如下: <ext:Store ID=”Store1″ runat=”server” onbeforestorechanged=”Store1_Befo
针对Gridpanel多表头的扩展，适用于2.2的ext版本，3以上的没有测试过，有兴趣的可以自己研究研究。
详细介绍GridPanel各项属性，ExtJS 普通表格：Ext.grid.GridPanel属性详解
本人自己写的Extjs入门教程，上面实现了treePanel和GridPanel的集成和交互。
Ext的gridpanel控件二次加载时丢失解决方案
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...