#javascript #asp.net-ajax #extjs
Вопрос:
Как вы сохраняете данные из формы ExtJS? Загрузить данные с бизнес-уровня в форму или сетку?
Ответ №1:
Для меня я использовал страницу ASHX для прямого ввода XML — а затем использовал средство чтения данных ExtJS для чтения.. затем, скажем, с помощью формы и т. Д., Я отправляю данные формы обратно на другую страницу ASHX для запроса/отправки в БД.. черт возьми, если я знаю лучший способ — но он мне подходит и кажется очень быстрым и стабильным, и, самое главное, его легче отслеживать/отлаживать.
Вот пример кода, если это поможет… надеюсь, не помешает!
ПОЛУЧЕНИЕ ДАННЫХ
Как вы увидите, URL-адрес для получения данных-это простая страница ASHX (универсальный обработчик) .NET, которая возвращает прямой XML…
// Define the core service page to get the data (we use this when reloading)
var url = '/pagedata/getbizzbox.ashx?duration=today';
var store = new Ext.data.GroupingStore(
{
// Define the source for the bizzbox grid (see above url def). We can pass (via the slider)
// the days param as necessary to reload the grid
url: url,
// Define an XML reader to read /pagedata/getbizzbox.ashx XML results
reader: new Ext.data.XmlReader(
{
// Define the RECORD node (i.e. in the XML <record> is the main row definition), and we also
// need to define what field is the ID (row index), and what node returns the total records count
record: 'record',
id: 'inboxID',
totalRecords: 'totalrecords'
},
// Setup mapping of the fields
['inboxID', 'messageCreated', 'subject', 'message', 'messageOpened', 'messageFrom', 'messageFromID', 'groupedMessageDate']),
// Set the default sort scenario, and which column will be grouped
sortInfo: { field: 'groupedMessageDate', direction: "DESC" },
groupField: 'groupedMessageDate'
}); // end of Ext.data.store
ДАННЫЕ В СЕТКУ EXTJS
Хорошо, у меня здесь есть дополнительный код, который создает панель инструментов в верхней части сетки, которую вы можете игнорировать…
var grid = new Ext.grid.GridPanel(
{
// Define the store we are going to use - i.e. from above definition
store: store,
// Define column structs
// { header: "Received", width: 180, dataIndex: 'messageCreated', sortable: true, renderer: Ext.util.Format.dateRenderer('d-M-Y'), dataIndex: 'messageCreated' },
columns: [
{ header: "ID", width: 120, dataIndex: 'inboxID', hidden: true },
{ header: "Received", width: 180, dataIndex: 'messageCreated', sortable: true },
{ header: "Subject", width: 115, dataIndex: 'subject', sortable: false },
{ header: "Opened", width: 100, dataIndex: 'messageOpened', hidden: true, renderer: checkOpened },
{ header: "From", width: 100, dataIndex: 'messageFrom', sortable: true },
{ header: "FromID", width: 100, dataIndex: 'messageFromID', hidden: true },
{ header: "Received", width: 100, dataIndex: 'groupedMessageDate', hidden: true }
],
// Set the row selection model to use
gridRowModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
// Set the grouping configuration
view: new Ext.grid.GroupingView(
{
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Messages" : "Message"]})'
}),
// Render the grid with sizing/title etc
frame: true,
collapsible: false,
title: 'BizzBox',
iconCls: 'icon-grid',
renderTo: 'bizzbox',
width: 660,
height: 500,
stripeRows: true,
// Setup the top bar within the message grid - this hosts the various buttons we need to create a new
// message, delete etc
tbar: [
// New button pressed - show the NEW WINDOW to allow a new message be created
{
text: 'New',
handler: function()
{
// We need to load the contacts, howver we only load the contacts ONCE to save
// bandwidth - if new contacts are added, this page would have been destroyed anyway.
if(contactsLoaded==false)
{
contactStore.load();
contactsLoaded=true;
}
winNew.show();
}
},
// Delete button pressed
// We need to confirm deletion, then get the ID of the message to physically delete from DB and grid
{
text: 'Delete', handler: function()
{
Ext.MessageBox.confirm('Delete message', 'are you sure you wish to delete this message?', function(btn) {
// If selected YES, get a handle to the row, and delete
if (btn == 'yes')
{
// Get the selected row
var rec = grid.getSelectionModel().getSelected();
if(rec==null)
{
Ext.Msg.show(
{
title:'No message selected',
msg: 'please ensure you select a message by clicking once on the required message before selecting delete',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.QUESTION
});
}
// Proceed to delete the selected message
else
{
var mesID = rec.get('inboxID');
// AJAX call to delete the message
Ext.Ajax.request(
{
url: '/postdata/bizzbox_message_delete.ashx',
params: { inboxID: mesID },
// Check any call failures
failure: function()
{
Ext.Msg.show(
{
title: 'An error has occured',
msg: 'Having a problem deleting.. please try again later',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}, // end of failure check
// Success check
success: function()
{
// Need to remove the row from the datastore (which doesn't imapct
// a reload of the data)
store.remove(rec);
}
}); // end if delete ajax call
} // end of ELSE for record selected or not
} // end of YES button click
})
} // end of delete button pressed
}] // end of tbar (toolbar def)
}); // end of grid def
ОТПРАВКА ДАННЫХ ИЗ ФОРМЫ В СЕРВЕРНУЮ ЧАСТЬ
Опять же, обратите внимание на URL-адрес в первой части определения.. собираюсь отправить отправленные данные формы обратно на другую страницу ASHX, чтобы затем отправить их в базу данных…
// ---------------------------------------------------------------------------------------------
// DEFINE THE REPLY FORM
// This is used to show the existing message details, and allows the user to respond
// ---------------------------------------------------------------------------------------------
var frmReply = new Ext.form.FormPanel(
{
baseCls: 'x-plain',
labelWidth: 55,
method: 'POST',
url: '/postdata/bizzbox_message_reply.ashx',
items: [
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'From',
name: 'messageFrom',
value: selectedRow.get('messageFrom'),
anchor: '100%' // anchor width by percentage
},
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'Sent',
name: 'messageCreated',
value: selectedRow.get('messageCreated'),
anchor: '100%' // anchor width by percentage
},
{
xtype: 'textarea',
selectOnFocus: false,
hideLabel: true,
name: 'msg',
value: replyMessage,
anchor: '100% -53' // anchor width by percentage and height by raw adjustment
},
// The next couple of fields are hidden, but provide FROM ID etc which we need to post a new/reply
// message to
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'subject',
name: 'subject',
hidden: true,
hideLabel: true,
value: selectedRow.get('subject')
},
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'FromID',
name: 'messageFromID',
hidden: true,
hideLabel: true,
value: selectedRow.get('messageFromID')
},
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'InboxID',
name: 'inboxID',
hidden: true,
hideLabel: true,
value: selectedRow.get('inboxID')
}]
}); // end of frmReply
ПОСЛЕДНИЙ БИТ, КОТОРЫЙ ФАКТИЧЕСКИ СУММИРУЕТ ПРИВЕДЕННУЮ ВЫШЕ ФОРМУ В БЭКЭНД…
В этом окне используется приведенное выше определение формы для фактической отправки данных. на странице ASHX данные просто передаются в виде опубликованной формы, т. Е. вы можете получить доступ через обычный запрос.объект формы.. Я знаю, что есть способ по существу опубликовать данные формы на странице ASHX в формате XML, хотя для моей цели это не требовалось — довольно простая форма.
// ---------------------------------------------------------------------------------------------
// REPLY WINDOW - uses the frmReply as defined previously on stargate atlantis
// ---------------------------------------------------------------------------------------------
var win = new Ext.Window(
{
title: selectedRow.get("subject"),
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: false,
bodyStyle: 'padding:5px;',
buttonAlign: 'right',
items: frmReply,
// Add the action buttons for the message form
buttons: [
{
// When the user replies, we send the form results to the posting ashx which updates
// the DB etc, and returns the result
text: 'reply',
handler: function()
{
frmReply.getForm().submit({ waitMsg: 'Sending your message now...' });
}
},
{
text: 'close',
handler: function()
{
// We need to close the message window
win.close();
}
}]
});
// Show the message detail window
win.show();
Опять же, надеюсь, это немного поможет — мне потребовалось несколько недель, чтобы добраться до этого!! возможно, становлюсь слишком старым для кодирования!
Ответ №2:
Мы с большим успехом использовали комбинацию ExtJS и WCF. Мы использовали обычные Asp.net страница для обеспечения тематизации, аутентификации и базового пользовательского интерфейса страницы, затем ExtJS включился на стороне клиента, выдав доступ к службам WCF, которые вернули чистый простой формат JSON (без свойства «d»). Сработало действительно здорово. Службы WCF также были частью одного и того же веб-приложения, поэтому во всем нем использовалась аутентификация/авторизация пользователей.
Единственные проблемы, с которыми мы столкнулись, были со страницами, возвращающими файлы и страницы, которые использовали комбинацию обоих: Ajax и обычный Asp.net отклики. Мы должны были позаботиться о постоянстве контроля ExtJS на этих обходах. Но мы все равно сделали это.
ExtJS WCF отлично сработали, и я бы рекомендовал его всем, кто создает веб-приложение, которое должно быть больше похоже на оконное приложение. Просто не усложняйте свой проект обычными asp.net функциональность страницы и комбинация Ajax. Или также панели обновления.
Ответ №3:
Я использовал ExtJS в сочетании с ASP.NET только через веб-сервисы. Это прекрасно работает, если вы готовы работать без «Страницы» и всего такого.
Комментарии:
1. Не могли бы вы привести несколько примеров?
2. Не могли бы вы уточнить, что именно вам нужно?
Ответ №4:
Ответ №5:
Скорее всего, я нашел лучшее решение http://developmentalmadness.blogspot.com/2008/07/using-extjs-with-wcf.html
Комментарии:
1. блог переместился, вот новый URL-адрес: developmentalmadness.com/archive/2008/07/17/…
Ответ №6:
Если вы заинтересованы в разработке Extjs с java от gwt, вы можете узнать больше в этом блоге extjs-gwt gxt. Возможно, это поможет вам настроить Ext js-GWT : GXT и пример на Eclipse Ganymede 3.4