/*------------------后台交互,支持分页排序----------------------------*/
function getGrid(title,urlpath,header,fileds)
{
var columns =getColModel(header,fileds);
var filed = getFiled(fileds);
var cm = new Ext.grid.ColumnModel(columns);
var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url:urlpath}),
totalProperty: 'totalProperty',
remoteSort:true,
root: 'root',
fields :filed
});
var pagetool = pagingTool(store);
var grid = new Ext.grid.GridPanel({
height: 300,
autoWidth:true,
store: store,
cm: cm,
loadMask:{msg:'数据加载中,请稍等...'},
title:title,
bbar:pagetool
});
store.load({params:{start:0,limit:5}});
return grid;
}
// 返回表头
function getColModel(header , filed)
{
var fields = filed.split(",");
var headers = header.split(",");
//获得列对对象
var col = "[";
for(var i = 0; i<headers.length;i++)
{
var h = headers[i];
var fun = "";
if (headers[i].indexOf("|") > 0)
{
var hs = headers[i].split("|");
h = hs[0];
fun = hs[1];
col = col+"{header:'"+h+"',align:'center',sortable: true,dataIndex:'"+fields[i]+"',renderer:"+fun+",height:30},";
}
else
{
col = col+"{header:'"+h+"',align:'center',sortable: true,dataIndex:'"+fields[i]+"',height:30},";
}
}
if(col != "[")
{
col = col.substring(0,col.length-1);
}
col = col+"]";
return strToJson(col);
}
function getFiled(filed)
{
var fields = filed.split(",");
var filed ="[";
for(var i=0;i<fields.length;i++)
{
filed = filed + "{name: '"+fields[i]+"'},";
}
filed = filed.substring(0,filed.length-1);
filed = filed +"]";
return strToJson(filed);
}
// 返回分页工具条
function pagingTool(store)
{
var pagetool = new Ext.PagingToolbar ( {
pageSize : 5,
store:store,
displayInfo:true,
displayMsg : '显示第{0}条到{1}条记录 ,一共{2}条',
emptyMsg: "没有记录"
});
return pagetool;
}
/**
* eval关于作用域浏览器见不一致
* ***/
function strToJson(str){
var json = (new Function("return " + str))();
return json;
}
分享到:
相关推荐
这部分可能包含了如何创建和配置EXT4中的数据网格,包括列定义、排序、过滤、分页和行操作等功能。EXT4的GridPanel提供了丰富的API,可以定制各种复杂的数据展示和交互需求。 2. **Function**: 这个部分可能包含...
**2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...
例如,`Ext.grid.GridPanel`是EXTJS中的一个基础组件,用于创建数据表格,支持排序、分页和行编辑等功能。`Ext.Panel`则是一个通用容器,可以包含其他组件,通常用作应用程序的基础结构。 在EXTJS 2.3.0版本中,...
- `GridPanel` 是EXTJS中用于展示表格数据的组件,它可以灵活地处理大量数据,并提供排序、分页、过滤等功能。 - 在 `GridComboBox` 中,`GridPanel` 作为下拉菜单的内容,使用户能以表格形式查看和选择数据。 3....
这个简单的示例展示了如何利用ExtJs从服务器获取JSON数据,并使用分页策略在GridPanel中显示。在实际项目中,你可能还需要考虑错误处理、用户交互、性能优化等方面的问题,以构建更加健壮和用户友好的数据展示界面。
### ext4.2学习之路:深入理解Ext JS 4.2框架 #### 一、Ext JS 4.2概述 Ext JS是一款强大的企业级富客户端Web应用程序开发框架,基于JavaScript和HTML5技术,用于构建高性能的桌面和移动Web应用程序。Ext JS 4.2...
- **`paging` (Ext.PagingToolbar)**: 分页工具条组件,用于实现分页功能。 - **`toolbar` (Ext.Toolbar)**: 工具栏组件,通常放置在窗口顶部或底部,包含一系列常用的操作按钮。 - **`tbbutton` (Ext.Toolbar....
在提供的代码示例中,我们可以看到一些通用功能被定义为独立的函数,例如`$getGdSelectedIds`、`$postDel`和`$delGridRs`。这些函数是为了实现特定操作,如获取GridPanel选择的记录、执行删除操作以及批量删除。虽然...