extjs from,grid,pagingToolbar,store的使用，及分页

阅读更多

extjs4

 

相信很多人在用from对grid动态查询时，都遇到过pagingtoolar分页不更新的问题，我也是翻了好多次api,搜索了好多次，试用了好多次，终于找到了解决办法，希望对大家有用。

 

在下面的代码中，可以直接拷到页面中用，但需要改几个地方：

1.form中的items

2.proxy的url

3.fields的field

4.grid的columns

5.save()方法中的extraParams要传递的参数

改动的地方都很简单，需要根据实际情况而定.其中save()方法，实现了动态更新grid及pagingToolbar的数据。

 

 

 

var form = Ext.create("Ext.form.FormPanel", {
	frame : true,
	autoWidth : true,
	bodyPadding : '5 5 5 5',
	fieldDefaults : {
		labelAlign : "right",
		msgTarget : "side",
		labelWidth : 60
	},
	layout : {
		type : "table",
		columns : 2,
		tdAttrs : {
			style : "padding:2px"
		}
	},
	items : [ {
		xtype : "textfield",
		id:"title",
		fieldLabel : "职务名称"
	}, {
		xtype : "textfield",
		id:"group",
		fieldLabel : "组织名称"

	} ],
	buttons : {
		menuAlign : "center",
		items : [ {
			type : "submit",
			text : "查询",
			handler : save
		}, {
			type : "rest",
			text : "取消",
			handler : wind
		} ]
	}
});

var win;
function wind() {
	win = Ext.create("widget.window", {
		title : "window",
		closable : true,
		closeAction : 'hide',
		width : 600,
		height : 350,
		tools : [ {
			type : "pin"
		} ]
	});

	if (win.isVisible()) {
		win.hide(this, function() {
			button.dom.disabled = false;
		});
	} else {
		win.show(this, function() {
			button.dom.disabled = false;
		});
	}
}

Ext.define('fields', {
	extend : 'Ext.data.Model',
	fields : [ "title", "sendtime", "sheetid" ]
});

var proxy;
function setProxy() {
	var url = "http://localhost:8080/etw/user2!extJson2.action";
	proxy = new Ext.data.HttpProxy({
		type : 'ajax',
		url : url,
		reader : {
			type : "json",
			root : "list",
			totalProperty : "jsonStr"
		}
	});
	return proxy;
}

var store = new Ext.data.JsonStore({
	pageSize : 3,
	proxy : setProxy(),
	model : "fields"
});

var page = new Ext.PagingToolbar({
	id : "page",
	store : store,
	displayInfo : true,
	emptyMsg : "no data"
});

var grid = Ext.create("Ext.grid.Panel", {
	id : "grid",
	height : 200,
	store : store,
	loadMask : true,
	disableSelection : true,
	resizable : true,
	columns : [ {
		text : "title",
		dataIndex : "title"
	}, {
		text : "sheetid",
		dataIndex : "sheetid"
	}, {
		text : "sendtime",
		dataIndex : "sendtime"
	} ],
	bbar : page
});
store.loadPage(1);

var centerRegion = new Ext.create("Ext.Panel", {
	id : "center_region",
	title : "职务管理",
	region : "center",
	width : "80%",
	xtype : "panel",
	items : [ form, grid ],
	renderTo : Ext.getBody()
});

function save() {
	
	var title = form.getForm().findField("title").getValue();
	var group = form.getForm().findField("group").getValue();

	store.on("beforeload", function() {
		Ext.apply(store.proxy.extraParams, {
			title : title,
			sheetid:group
		});

	});
	store.load();

}