您的位置：首页 > Web前端 > JavaScript

EXTJS学习系列提高篇:第二十三篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--显示列表第二篇

2008-11-03 16:58 731 查看

本篇主要描述如何将列表的各种常用操作放在表格上面,也就是放在工具栏里面,而不是放在分页栏里面
下面具体看看效果图.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridTop.aspx.cs" Inherits="GridTop" %>

<!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">

<head runat="server">

<title>无标题页</title>

<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />

<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />

<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ExtJS/ext-all.js"></script>

<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>

<style type="text/css">

.panel_icon { background-image:url(images/first.gif)}

.center_icon { background-image:url(images/center.png)}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<script type="text/javascript">

//TypeTable实体类 ID PID TypeEName TypeCName DelFlag AddDate

function ready()

{

//建立Ext Grid

var url = "jsonGrid.aspx?Param=select";

var sm = new Ext.grid.CheckboxSelectionModel();

//sm.on("rowselect",function( SelectionModel,rowIndex,record ){debugger;});

var cm = new Ext.grid.ColumnModel

([

sm,new Ext.grid.RowNumberer({header:"编号",width:50}),

{header:"编号",dataIndex:"ID",width:10,hidden:true},

{header:"标题",dataIndex:"TypeCName",width:100,editor:new Ext.form.TextField()},

{header:"英文名称",dataIndex:"TypeEName",width:100,editor:new Ext.form.TextField()},

{header:"状态",dataIndex:"DelFlag",width:100,renderer:function(value){if(value==false) {return "显示";} else {return "隐藏";}}},

{header:"添加日期",dataIndex:"AddDate",width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}

]);

cm.defaultSortable = true;

var fields =

[

{name:"ID"},

{name:"TypeCName"},

{name:"TypeEName"},

{name:"DelFlag"},

{name:"AddDate"}

];

var store = new Ext.data.Store

({

proxy:new Ext.data.HttpProxy({url:url}),

reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})

});

store.load({params:{start:0,limit:15}});

var pagingBar = new Ext.PagingToolbar

({

displayInfo:true,emptyMsg:"没有数据显示",displayMsg:"显示第{0}--{1}条数据，共{2}条",

store:store,

pageSize:15

});

var grid = new Ext.grid.GridPanel //Ext.grid.EditorGridPanel

({

id:"MenuGridPanel",

renderTo:"divGridPanel",

layout:"fit",

frame:true,

border:true,

width:600,

height:450,

autoScroll:true,

store:store,

sm:sm,

cm:cm,

viewConfig:{forceFit: true},

title:'<img style="height:auto; width:auto;" src="images/first.gif" /> Ext2.2全新功能版--ExtJS与.NET结合开发实例',

clicksToEdit:1,

bbar:pagingBar,

tbar:

[

{

text: '刷新',

cls: 'x-btn-text-icon details',icon:"images/plugin.gif",

handler: function(btn, pressed)

{

//事件处理比较简单自己尝试处理

}

},

'-',

{

text: '添加',

cls: 'x-btn-text-icon details',icon:"images/plugin.gif",

handler: function(btn, pressed)

{

//事件处理比较简单自己尝试处理

}

}, ' ',

{

text: '编辑',

cls: 'x-btn-text-icon details',icon:"images/plugin.gif",

handler: function(btn, pressed)

{

}

}, ' ',

{

text: '隐藏/显示',

cls: 'x-btn-text-icon details',icon:"images/plugin.gif",

handler: function(btn, pressed)

{

//事件处理比较简单自己尝试处理

}

}, ' ',

{

text: '删除',

cls: 'x-btn-text-icon details',icon:"images/plugin.gif",

handler: function(btn, pressed)

{

//事件处理比较简单自己尝试处理

}

},'-',

{

text: '多选删除',

cls: 'x-btn-text-icon details',icon:"images/plugin.gif",

handler: function(btn, pressed)

{

//事件处理比较简单自己尝试处理

}

}

]

});

}

</script>

<script type="text/javascript">

Ext.onReady(ready);

</script>

<div id="divGridPanel"></div><img style="height:auto; width:auto;" src="images/plugin.gif" />

</div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航