`

Ext中GridPanel,分页通用实现方式

 
阅读更多

/*------------------后台交互,支持分页排序----------------------------*/
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中的数据网格,包括列定义、排序、过滤、分页和行操作等功能。EXT4的GridPanel提供了丰富的API,可以定制各种复杂的数据展示和交互需求。 2. **Function**: 这个部分可能包含...

    Ext组件描述,各个组件含义

    **2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...

    ext-2.3.0jar包

    例如,`Ext.grid.GridPanel`是EXTJS中的一个基础组件,用于创建数据表格,支持排序、分页和行编辑等功能。`Ext.Panel`则是一个通用容器,可以包含其他组件,通常用作应用程序的基础结构。 在EXTJS 2.3.0版本中,...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    - `GridPanel` 是EXTJS中用于展示表格数据的组件,它可以灵活地处理大量数据,并提供排序、分页、过滤等功能。 - 在 `GridComboBox` 中,`GridPanel` 作为下拉菜单的内容,使用户能以表格形式查看和选择数据。 3....

    ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc

    这个简单的示例展示了如何利用ExtJs从服务器获取JSON数据,并使用分页策略在GridPanel中显示。在实际项目中,你可能还需要考虑错误处理、用户交互、性能优化等方面的问题,以构建更加健壮和用户友好的数据展示界面。

    ext4.2学习之路

    ### ext4.2学习之路:深入理解Ext JS 4.2框架 #### 一、Ext JS 4.2概述 Ext JS是一款强大的企业级富客户端Web应用程序开发框架,基于JavaScript和HTML5技术,用于构建高性能的桌面和移动Web应用程序。Ext JS 4.2...

    ExtJs xtype一览

    - **`paging` (Ext.PagingToolbar)**: 分页工具条组件,用于实现分页功能。 - **`toolbar` (Ext.Toolbar)**: 工具栏组件,通常放置在窗口顶部或底部,包含一系列常用的操作按钮。 - **`tbbutton` (Ext.Toolbar....

    Extjs优化(一)删除冗余代码提高运行速度

    在提供的代码示例中,我们可以看到一些通用功能被定义为独立的函数,例如`$getGdSelectedIds`、`$postDel`和`$delGridRs`。这些函数是为了实现特定操作,如获取GridPanel选择的记录、执行删除操作以及批量删除。虽然...

Global site tag (gtag.js) - Google Analytics