submit textfield + grid in ExtJS

[potkin]

Имеется на одной форме:
1) текстовые поля (textfield), чекбоксы, ...
2) Ext.grid.Panel
3) Ну и кнопочка "submit", её код:

buttons: [
 {
  text: "Save",
  handler:
  function () {
   PanelData.submit({
    waitMsg: lanLoading,
    url: "Handlers/...",
    success: function (form, action) { ... },
    failure: function (form, action) { ... }
   });
  }
 }
]

Задача: отправить все данные одним потоком на сервак и с текстовых полей и с Грида.
На сервере получаю данные только с тектовых полей, а вот данные Грида не приходят ...
Прошу Вашей помощи!

[Ex_Soft]

На сервере получаю данные только с тектовых полей, а вот данные Грида не приходят ...

А с какой-такой тихой радости они должны приходить? Грид просто тупо визуализирует то, что хранится в Store. В Вашем варианте перед submit'ом формы получайте Ext.data.Store.getNewRecords()/Ext.data.Store.getUpdatedRecords()/Ext.data.Store.getRemovedRecords() и отправляйте полученное. Ессесно с последующим анализом выхлопа серванта. По сути - Вам необходимо залисапетить Ext.data.Store.sync(). Дабы избежать всего этого гемора, я бы "вывернул" передачу данных: по кнопоцке "Саве" дергал бы Ext.data.Store.sync(), а в beforesync запихивал бы в extraParams данные с формы.

[potkin]

Первый Вариант (похожий на него) практически реализовал ...
Но вот второй - мне больше по душе ... )))

А, разве, нет более легкого решения, что бы одной кнопочкой 2-х или более зайцев ... ???

[Ex_Soft]

Но вот второй - мне больше по душе ... )))

/me вспоминает грузинский дорожный знак "Не тарапися!" В случае одновременного insert/update/delete sync() сделает три запроса, а Вы же хотите один...

А, разве, нет более легкого решения, что бы одной кнопочкой 2-х или более зайцев ...

Ну сами подумайте: что делает submit? Отправляет данные из input'ов form'ы. А что такое грид? Средство визуализации/отображения (специально для застройщиков/дельфинов ). И откель форма знает что с ним делать? Хотя... Кто ж мешает ее научить этому? Вот этим Вы и займетесь, реализуя первый вариант ...

[potkin]

Подскажите, пожалуйста, уважаемый Ex_Soft !!!
Возможно ли сохраненить данных грида и получить ответ от сервера, типа такого:

store.sync({
 success: function (form, action) {
  //...
 },
 failure: function (form, action) {
  //...
 }
});

Возможно лди такое ???
Тут пишут, что НЕТ:
http://www.sencha.com/forum/archive/...t-149887.html?
Может за пол года что-то поменялось ???

[Ex_Soft]

Может за пол года что-то поменялось ???

/me вспоминает:

лучшая литература для хакера - распечатка программы

Все ж доступно: Ext.data.AbstractStore.sync()

if (needsSync && me.fireEvent('beforesync', operations) !== false) {
            options = options || {};

            *!* me.proxy.batch */!* (Ext.apply(options, {
                operations: operations,
                listeners: me.getBatchListeners()
            }));
        }

Ext.data.proxy.Proxy.batch() "...i так далi..." Посмотрев по диагонали, соглашусь с

unfortunately the functionality does not exist yet

[potkin]

Ex_Soft,
ext-4.1 уже умеет принимать ответ с сервера.

store.sync({
 success: function () {
  Ext.Msg.alert("Сообщение", "Сохранено !!!");
 },
 failure: function () {
  Ext.Msg.alert("Сообщение", "Ошибка !!!");
 }
});

Вот только записи передаются при одном условии - если были какие-то изменения, да и в придачу асинхронно:
1) Новые
2) Удалённые
3) Изменённые
В отличии от 4.0.7 - там всё передавал одним запросом и пофигу, были изменения или нет.

Одно добавили а 10 убрали ...

[Ex_Soft]

ext-4.1 уже умеет принимать ответ с сервера

Угу... Только, вот, Ext.data.proxy.Proxy.onBatchComplete

onBatchComplete: function(batchOptions, batch) {
        var scope = batchOptions.scope || this;

        if (batch.hasException) {
            if (Ext.isFunction(batchOptions.failure)) {
                Ext.callback(batchOptions.failure, scope, [ *!* batch, batchOptions */!* ]);
            }
        } else if (Ext.isFunction(batchOptions.success)) {
            Ext.callback(batchOptions.success, scope, [ *!* batch, batchOptions */!* ]);
        }

        if (Ext.isFunction(batchOptions.callback)) {
            Ext.callback(batchOptions.callback, scope, [ *!* batch, batchOptions */!* ]);
        }
    }

и Ваша хотелка:

store.sync({
 success: function ( *!* form, action */!*) {
  //...
 },
 failure: function ( *!* form, action */!*) {
  //...
 }
});

как-то не стыкуются (ведь, насколько я понял, вы хотите скрестить ужа и ежа, сиречь - Ext.form.Panel и Ext.grid.Panel)...

Вот только записи передаются при одном условии - если были какие-то изменения

Ext.data.AbstractStore.sync()

sync: function(options) {
        var me = this,
            operations = {},
            toCreate = me.getNewRecords(),
            toUpdate = me.getUpdatedRecords(),
            toDestroy = me.getRemovedRecords(),
            needsSync = false;

        if (toCreate.length > 0) {
            operations.create = toCreate;
            needsSync = true;
        }

        if (toUpdate.length > 0) {
            operations.update = toUpdate;
            needsSync = true;
        }

        if (toDestroy.length > 0) {
            operations.destroy = toDestroy;
            needsSync = true;
        }

        if ( *!* needsSync */!* && me.fireEvent('beforesync', operations) !== false) {
            options = options || {};

            me.proxy.batch(Ext.apply(options, {
                operations: operations,
                listeners: me.getBatchListeners()
            }));
        }
        
        return me;
    },

да и в придачу асинхронно:
1) Новые
2) Удалённые
3) Изменённые

Так было всегда. В 3-ке Ext.data.Store.save() передавался xaction, а в 4-ке - REST

В отличии от 4.0.7 - там всё передавал одним запросом и пофигу, были изменения или нет.

"Не верю" (c) См. выше + Ext.data.AbstractStore.sync() - там тот же if ( needsSync ...

[potkin]

как-то не стыкуются (ведь, насколько я понял, вы хотите скрестить ужа и ежа, сиречь - Ext.form.Panel и Ext.grid.Panel)...

Сохраняя грид, передаю "за компанию" и параметры:

store.proxy.extraParams.ParamTextField01 = "XXX01";
store.proxy.extraParams.ParamTextField02 = "XXX02";
store.save({
 //Надо обязательно получить ответ: сохранило или же нет.
 });

Параметры - это Шапка: ТекстФилд, ЧексБоксы, КомбоБоксы, ..., их определённое количество (оно не меняется).
Грид - табличная часть, количество меняется.

"Не верю" (c) См. выше + Ext.data.AbstractStore.sync() - там тот же if ( needsSync ...

Зачем мне обманывать?
Могу видео на ЮТуб закинуть ...

Код такой:

<script type="text/javascript" src='http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js'></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css" />

....

// *** *** *** МОДЕЛЬ *** *** *** 
Ext.define('BarCode', { extend: 'Ext.data.Model', fields: ...
// *** *** *** ХРАНИЛИЩЕ *** *** *** 
var storeGridBarCode = Ext.create('Ext.data.JsonStore', {
 restful: true,
 pageSize: 40,
 model: 'BarCode',
 proxy: {
  type: 'rest', //'ajax',
  batchActions: true,
  url: "Handlers/DirGrid.ashx?pID=BarCode",
  reader: { type: "json", successProperty: 'success', root: "BarCode",  messageProperty: 'message' },
  writer: { type: "json", encode: false, root: "BarCode" }
 }
}); storeGridBarCode.load();

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
// *** *** *** П-Е *** *** *** 
var PanelGridBarCode = Ext.create("Ext.grid.Panel", {
 autoScroll: true,
 store: storeGridBarCode,
 columns: [{...} ],
 plugins: [rowEditing],
 bbar: new Ext.PagingToolbar({ store: storeGridBarCode, displayInfo: true, displayMsg: 'Showing  {0} - {1} of {2}'}),
 dockedItems: [ 
  { xtype: 'toolbar', items: [ 
   { text: 'Add', handler: function () { storeGridBarCode.insert(0, new BarCode()); rowEditing.startEdit(0, 0);  }},
  '-',
   { itemId: 'delete', text: 'Delete', disabled: true, handler: function () { var selection = PanelGridBarCode.getView().getSelectionModel().getSelection()[0]; if (selection) { storeGridBarCode.remove(selection); } } }
  ]
 }
 ]
});
PanelGridBarCode.getSelectionModel().on('selectionchange', function (selModel, selections) { PanelGridBarCode.down('#delete').setDisabled(selections.length === 0); });

//Сохранение:
storeGridBarCode.getProxy().url = "Handlers/..."; //Меняем УРЛ
//Параметры Шапки
store.proxy.extraParams.ParamTextField01 = "XXX01";
store.proxy.extraParams.ParamTextField02 = "XXX02";
storeGridBarCode.sync({ ... });

Под 4.0.7 - отсылаются на Сервер все данные сразу, кроме приёма клиентом ответа с сервера (((
Под 4.1.0 - есть приём клиентом ответа с сервера, но отсылаются на Сервер данные по частям (((

4.1.0:

<script type="text/javascript" src='http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all.js'></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css" />

[Ex_Soft]

Сообщение от Ex_Soft

как-то не стыкуются (ведь, насколько я понял, вы хотите скрестить ужа и ежа, сиречь - Ext.form.Panel и Ext.grid.Panel)...

Сохраняя грид, передаю "за компанию" и параметры

Я так подозреваю - имеет место ошибка коммуникации. Подразумевалось, что Ext.form.Panel должна знать о Ext.grid.Panel (или наоборот) и, соответственно, взаимодействовать с ней со всеми вытекающими...

Под 4.0.7 - отсылаются на Сервер все данные сразу

Вот Вам дрозофила

Ext.onReady(function() {
	if(window.console && console.clear)
		console.clear();

	if(window.console && console.log)
		console.log("core: %s, extjs: %s", Ext.versions.core.version, Ext.versions.extjs.version);

	var
		extraParamField = Ext.create("Ext.form.field.Text", {
			value: "extraParamValue"
		}),
		store = Ext.create("Ext.data.Store", {
			fields: [
				{ name: "id", type: "int" },
				"name"
			],
			proxy: {
				type: "ajax",
				url: "handler.ashx"
			},
			listeners: {
				beforesync: function(options, eOpts) {
					this.getProxy().extraParams = {
						extraParamValue: extraParamField.getValue()
					};
				}
			},
			data: [
				{ id: 1, name: "Record# 1" },
				{ id: 2, name: "Record# 2" },
				{ id: 3, name: "Record# 3" },
				{ id: 4, name: "Record# 4" }
			]
		}),
		grid = Ext.create("Ext.grid.Panel", {
			store: store,
			columns: [
				{ dataIndex: "id", header: "id", editor: { xtype: "numberfield" }, flex: 1 },
				{ dataIndex: "name", header: "name", editor: { xtype: "textfield" }, flex: 1 }
			],
			plugins: [
				Ext.create("Ext.grid.plugin.CellEditing", {
					clicksToEdit: 2
				})
			],
			tbar: [{
				text: "Add",
				handler: function(btn, e) {
					store.add(Ext.create(store.getProxy().getModel(), { name: "blah-blah-blah" }));
				}
			}, {
				text: "Del",
				handler: function(btn, e) {
					var
						grid,
						sm,
						sel;

					if(!(grid=btn.up("grid"))
						|| !(sm=grid.getSelectionModel())
						|| !(sel=sm.selected)
						|| !sm.hasSelection())
						return;

					store.remove(sel.items);
				}
			}, {
				text: "Save",
				handler: function(btn, t) {
					store.sync();
				}
			},
				extraParamField
			],
			renderTo: Ext.getBody()
		});
});

Удаляем + редактируем + добавляем, а затем - сохраняем. В Firebug'е видим - 3 (три) запроса. Что я делаю не так?