`
01jiangwei01
  • 浏览: 542215 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用 Ext Grid paging插件

阅读更多
FactoryListGridPanel = function(viewer, config) {
    this.viewer = viewer;
    Ext.apply(this, config);
    this.httpProxy = new Ext.data.HttpProxy({
		//url : '/erw/server/base/busilist_Array_Ext.jsp?json=' + pageparam.busiobj
		url : '/erw/server/base/busilist_Array_Ext.jsp'
	});
	
	var title = pageparam.title;
	var defines = pageparam.defines;
	this.busi = pageparam.businame;
	this.loadColumns(defines,pageRowCount);
	
	var pagingBar = new Ext.PagingToolbar({
		plugins : new Ext.ux.grid.PageSizePlugin(),
		pageSize: pageRowCount,
		store: this.store,
		displayInfo: true
    });
    
    this.pagingBar = pagingBar;
    
    var sm = new Ext.grid.CheckboxSelectionModel({
        listeners: {
           beforerowselect : function (sm, rowIndex, keep, rec) {
	          
	          }
    	},
    	onMouseDown : function(e, t){
	        if(e.button === 0){
	        }
    	}
    });
    
    FactoryListGridPanel.superclass.constructor.call(this, {
        region: 'center',
        id: 'basefactory-grid',
        margins:'2 2 2 2',
        loadMask: {msg:title},
        enableDragDrop: true,
 		sm: sm,
        enableColumnHide:false,
       viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true
          // , getRowClass : this.applyRowClass
        },
        //autoExpandColumn:4,
        bbar:pagingBar
    });
   
   
	this.insertWin.on("submit" , this.onInsertWinSubmit , this) ;
		
	this.updateWin.on("submit" , this.onUpdateWinSubmit , this) ;
	
	
};

Ext.extend(FactoryListGridPanel, Ext.grid.GridPanel, {
		busi :"",
		insertWin:new InsertFactoryInfoWindow(),
		updateWin:new UpdateFactoryInfoWindow(),
		loadColumns : function ( ataglist  ,apageSize)
		    {
			var cmarray = [new Ext.grid.RowNumberer(),new Ext.grid.CheckboxSelectionModel()];
			var rdarray = [];
			if (ataglist)
			{
				for (var i=0;i<ataglist.length;i++)
				{
					var cmobj = {};
					var rdobj = {};
					
					var oname = ataglist[i];
					if (typeof(oname)=='object')
					{
						cmobj.header = oname.name;
						cmobj.dataIndex = oname.name;
						if (oname.width) cmobj.width = oname.width * 1;
						if (oname.id) cmobj.id = oname.id;
						if (oname.hidden) cmobj.hidden = oname.hidden;
						rdobj.name = oname.name;
						if(oname.name=="操作") cmobj.renderer = function (value,met){
							var grid = Ext.getCmp("basefactory-grid");
							return "<span style=cursor:hand; onclick=grid.openWindow()><font color=red>修改</font></span>"
							};
					}
					else
					{
						cmobj.header = oname;
						cmobj.dataIndex = oname;
						cmobj.width =120;
						rdobj.name = oname;
					}
					
					cmobj.sortable = true;
					cmarray.push(cmobj);
					rdarray.push(rdobj);
				}
			}
			
			if (rdarray.length>0){
				this.reader = new Ext.data.ArrayReader({
												root:"rows",
												totalProperty  :"count"
										   },rdarray)
			}
			
			var cjson = Ext.util.JSON.encode(pageparam.busiobj);
			
			this.store = new Ext.data.Store({
					autoLoad :{params : {start : 0,limit : apageSize}},
					baseParams: {json:cjson},
				    proxy: this.httpProxy,
				    reader : this.reader
			    });
				
			    this.columns = cmarray;
		    }
	
	
	})[color=red][/color]
分享到:
评论

相关推荐

    ext grid 显示数据

    7. **编辑(Editing)**: 如果需要在Grid中直接编辑数据,可以使用CellEditing或RowEditing插件。它们提供了在单元格或整行内编辑数据的能力。 8. **事件监听(Event Handling)**: Grid组件提供了丰富的事件,如`...

    EXT2.0 GRID 示例

    文档"document"可能包含了EXT2.0 GRID的详细配置、使用方法、示例代码等,对于理解和使用EXT GRID组件至关重要。通过深入学习这个文档,你可以掌握EXT GRID的基本用法和高级特性,从而在项目中构建出功能强大的数据...

    Ext框架的Grid使用介绍

    7. **插件支持**:EXT JS Grid有多种插件,如CellEditing用于单元格编辑,RowExpander用于行展开显示更多信息,RowBody用于在行内显示额外内容。 8. **响应式设计**:EXT JS的Grid支持响应式布局,自动适应不同屏幕...

    ext--grid--demo

    在`extgrid`这个文件中,可能包含了实现上述功能的代码示例,包括HTML、CSS和JavaScript文件。开发者可以通过查看和学习这些示例,掌握如何在实际项目中应用Ext JS Grid,以构建高性能、功能丰富的数据展示界面。

    Ext4mvc实现grid

    总之,"Ext4mvc实现grid"项目涉及到Ext JS 4的MVC架构和GridPanel组件的使用,这要求开发者理解数据模型、视图组件、控制器逻辑以及如何通过MVC模式有效地组织代码。通过学习和实践这样的项目,开发者能够提升在Ext ...

    Extjs Grid 扩展实例

    4. **过滤**:通过`Ext.grid.filters.Filters`插件,我们可以为Grid的每一列添加过滤功能。这样用户可以根据需求筛选数据,提高数据操作的效率。 5. **排序**:默认情况下,Grid支持单击列头进行升序或降序排序。若...

    sencha touch grid

    如果需要在Grid中编辑数据,可以使用`Ext.grid.plugin.CellEditing`或`Ext.grid.plugin.RowEditing`插件。这些插件提供单元格或整行的编辑模式,使用户可以直接在Grid上修改数据。 ### 排序与过滤 Grid默认支持对...

    Ext扩展控件-------可以通过下拉列表框选择每页的分页条数

    2. **分页工具栏(paging toolbar)**:EXT Grid的分页功能通常通过分页工具栏来实现,这个工具栏包括了页码导航、每页记录数选择等功能。扩展控件会替换或添加到这个工具栏中,提供下拉列表供用户选择每页记录数。 ...

    ExtJS 使用grid显示数据

    7. **编辑功能**:如果需要在Grid中编辑数据,可以使用CellEditing或RowEditing插件,实现单击单元格或整行编辑。 8. **分页**:通过配置store的proxy和paging属性,可以实现数据的分页加载,`Ext.toolbar.Paging`...

    通过ext实现CURD

    EXT Grid Panel支持行级编辑,只需监听cellClick事件,启用Cell Editing插件。当用户完成编辑并保存时,通过Data Store的sync方法将更改同步回服务器。 **5. 删除(Delete)** 删除操作可以通过Grid Panel的行选中...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 ...10.3.4 数据汇总功能:ext.grid.featrue.abstractsummary与ext.grid.featrue. summary / 539 10.3.5 分组功能:ext.grid.featrue.grouping / 543 10.3.6 分组汇总...

    Ext JS的table设计实例

    在"表格可编辑"的场景中,我们可以使用`Ext.grid.plugin.CellEditing`插件来实现单元格级别的编辑功能。当用户点击某个单元格时,编辑框会自动出现,让用户可以直接修改数据,然后提交到服务器进行更新。这极大提升...

    extjs前台分页插件PagingStore!

    ExtJS的PagingStore是其框架中用于实现前端分页功能的...以上就是关于ExtJS前台分页插件PagingStore的基本概念和使用方法。通过合理地使用PagingStore,可以有效地管理大量的数据展示,提升Web应用的性能和用户体验。

    extJs之分页控件

    为了使用这个插件,我们需要在Grid或Panel的配置中引用它,并设置相应的配置项: ```javascript var grid = Ext.create('Ext.grid.Panel', { store: store, plugins: [{ ptype: 'ux.Andrie.pPageSize', // 这里...

    EXT 分页,树形结构案列

    1. 分页栏(Paging Toolbar):EXT提供了一个内置的分页工具栏组件,可以轻松地添加到Grid或DataView中。分页栏包含页码按钮、每页记录数选择器和状态指示器等元素,用户可以通过这些元素轻松导航和调整分页设置。 ...

    extjs表格Grid比较全面的功能

    开发者可以使用事件监听和插件机制,为Grid添加自定义行为,如右键菜单、双击事件等。 15. **响应式设计(Responsive Design)** Grid支持不同设备和屏幕尺寸,可以自动调整布局和列宽,适应移动设备和桌面环境。...

    ext设置分页大小.rar

    要设置分页大小,我们首先需要引入EXT的分页插件`Ext.toolbar.Paging`,然后在配置对象中指定`pagingConfig`。以下是一个简单的例子: ```javascript var grid = Ext.create('Ext.grid.Panel', { store: myStore, ...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    2. **分页插件(Paging Toolbar)**:当与数据存储结合使用时,分页工具栏(`Ext.PagingToolbar`)可以在底部显示页码导航,允许用户切换页面。它需要配置`store`属性来引用数据存储,并通过`displayMsg`和`emptyMsg...

    ExtGridDemo

    7. **编辑(Editing)**:如果你的Grid需要支持数据编辑,可以集成Ext.grid.plugin.CellEditing或RowEditing插件。它们提供单元格级别的编辑,用户双击单元格后可以直接修改值。 8. **事件监听(Event Handling)**...

    extjs grid.panel 项目 源码

    通过深入研究这个"extjs grid.panel 项目 源码",我们可以提升对ExtJS框架的理解,特别是关于Grid Panel的使用,这对于开发复杂的Web应用是非常有价值的。同时,这也有助于我们掌握JavaScript前端开发的技巧,提升...

Global site tag (gtag.js) - Google Analytics