как создать простой grid ?

[remember_me]

Нужно создать Grid с 4 колонками(первые две типа Стринг, потом булеан и Дата). Если число строк больше 10 то перебрасывать на следующую страницу.
P.S. нужно также добавить фильтр.
P.S.2. Можно код с комментариями потому я новичок в ExtJS.

Спасибо всем кто ответил!!!!

[skrudjmakdak]

а на официальном сайте по копаться не вариант? там таких простецких примеров целый вагон!
вот их сайт с примерами: http://docs.sencha.com/extjs/4.2.1/

вот тут примеры гридов: http://docs.sencha.com/extjs/4.2.1/e...ulti-sort-grid

[remember_me]

Грид я создал, только не могу подключить pagingtoolbar. Он появляется только не перекидываются страницы.

Ext.define('User', {
	extend: 'Ext.data.Model',
	fields: [ 
		{name: 'String1', type:'string'},
		{name: 'String2', type:'string'},
		{name: 'Boolean', type:'boolean', defaultValue: true},
		{name: 'Date', type:'date'}
	]
});

var userStore = Ext.create('Ext.data.Store', {
	model: 'User',
	pageSize: 4,
	data: [
		{ String1: 'Name11', String2:'Name21', Boolean: true, Date:'08/14/2012'},
		{ String1: 'Name12', String2:'Name22', Boolean: false, Date:'01/30/2012'},
		{ String1: 'Name13', String2:'Name23', Boolean: false, Date:'12/12/2012'},
		{ String1: 'Name14', String2:'Name24', Boolean: true, Date:'08/22/2012'},
		{ String1: 'Name15', String2:'Name25', Boolean: true, Date:'10/11/2012'},
		{ String1: 'Name16', String2:'Name26', Boolean: false, Date:'10/01/2012'},
		{ String1: 'Name17', String2:'Name27', Boolean: true, Date:'05/11/2012'},
		{ String1: 'Name18', String2:'Name28', Boolean: true, Date:'02/11/2012'},
		{ String1: 'Name19', String2:'Name29', Boolean: true, Date:'09/16/2012'}
	]
});

Ext.create('Ext.grid.Panel', {
	store: userStore,
	width: 500,
	height: 250,
	title: 'Test Grid',
	columns: [
		{
			text: 'String1',
			width: 100,
			hideable: false,
			dataIndex: 'String1'
		},
		{
			text: 'String2',
			width: 100,
			dataIndex: 'String2'
		},
		{
			text: 'Boolean',
			width: 50,
			dataIndex: 'Boolean'
		},
		{
			text: 'Date',
			width: 100,
			format:'d.m.Y',
			xtype: 'datecolumn',
			dataIndex: 'Date'
		}
	],
	dockedItems: [{
		xtype: 'pagingtoolbar',
		store: userStore,
		dock: 'bottom',
		displayInfo: true
	}],
	renderTo: Ext.getBody()
});

[skrudjmakdak]

оф сайт говорит, что нужно стору так прописывать:
http://docs.sencha.com/extjs/4.2.1/e...#sliding-pager

remember_me, попробуйте вот эту стору:

var userStore = Ext.create('Ext.data.Store', 
	{
	model: 'User',
	remoteSort: true,
	pageSize: 5,
	proxy:
		{
		type: 'memory',
		enablePaging: true,
		data: [
			{ String1: 'Name11', String2:'Name21', Boolean: true, Date:'08/14/2012'},
			{ String1: 'Name12', String2:'Name22', Boolean: false, Date:'01/30/2012'},
			{ String1: 'Name13', String2:'Name23', Boolean: false, Date:'12/12/2012'},
			{ String1: 'Name14', String2:'Name24', Boolean: true, Date:'08/22/2012'},
			{ String1: 'Name15', String2:'Name25', Boolean: true, Date:'10/11/2012'},
			{ String1: 'Name16', String2:'Name26', Boolean: false, Date:'10/01/2012'},
			{ String1: 'Name17', String2:'Name27', Boolean: true, Date:'05/11/2012'},
			{ String1: 'Name18', String2:'Name28', Boolean: true, Date:'02/11/2012'},
			{ String1: 'Name19', String2:'Name29', Boolean: true, Date:'09/16/2012'}],
		reader:
			{
			type: 'json'
			}
		},
	autoLoad: true
});

[remember_me]

var userStore = Ext.create('Ext.data.Store', 
	{
	model: 'User',
	remoteSort: true,
	pageSize: 5,
	proxy:
		{
		type: 'memory',
		enablePaging: true,
		data: [
			{ String1: 'Name11', String2:'Name21', Boolean: true, Date:'08/14/2012'},
			{ String1: 'Name12', String2:'Name22', Boolean: false, Date:'01/30/2012'},
			{ String1: 'Name13', String2:'Name23', Boolean: false, Date:'12/12/2012'},
			{ String1: 'Name14', String2:'Name24', Boolean: true, Date:'08/22/2012'},
			{ String1: 'Name15', String2:'Name25', Boolean: true, Date:'10/11/2012'},
			{ String1: 'Name16', String2:'Name26', Boolean: false, Date:'10/01/2012'},
			{ String1: 'Name17', String2:'Name27', Boolean: true, Date:'05/11/2012'},
			{ String1: 'Name18', String2:'Name28', Boolean: true, Date:'02/11/2012'},
			{ String1: 'Name19', String2:'Name29', Boolean: true, Date:'09/16/2012'}],
		reader:
			{
			type: 'json'
			}
		},
	autoLoad: true
});

не работает!!!! походу проблема с pageSize. Потому что Info pagingtoolbar`a считает верное количество страниц, но показывает данные все на одной. Если перейти на следующую страницу, то аналогичная картина.

[skrudjmakdak]

я вчера скопировал ваш пример, изменил стору (на ту которая выложена).. у меня работало..

может различие в версиях? какую вы версию используйте?

[remember_me]

skrudjmakdak, 4.0.7

[skrudjmakdak]

попробуйте скачать последнюю версию 4.2.1, т.к. я на ней тестил. старые версии могут глючить. наблюдал клюки в 3 версии (про вашу не знаю)..

[remember_me]

skrudjmakdak, опа, скачал версию 4.2.1 .... все работает спасибо большое!!!!