Как лучше всего использовать ExtJS с Asp.net и WCF в .NET 3.5?
https://stackoverflow.com/questions/186456
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как сохранить данные из формы ExtJS? Загрузить данные из бизнес-уровня в форму или сетку?
Решение 5
Скорее всего, я нашел лучшее решение http://developmentalmadness.blogspot.com/2008/07/ используя-ExtJS-с-wcf.html
Другие советы
Для меня я использовал страницу 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 данные просто передаются в виде опубликованной формы, т.е. вы можете получить доступ через обычный объект Request.form. Я знаю, что есть способ по сути, отправлять данные формы на страницу 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();
Опять же, надеюсь, это немного поможет - мне понадобилось несколько недель, чтобы добраться до этого !! возможно, слишком стар для кодирования!
Мы с большим успехом использовали комбинацию ExtJS и WCF. Мы использовали обычную страницу Asp.net для предоставления тематики, аутентификации и базового пользовательского интерфейса страницы, после чего ExtJS включил на стороне клиента выдачу GET сервисам WCF, которые возвращали чистый простой JSON-формат (без свойства " d "). Работал действительно отлично. Службы WCF также были частью одного и того же веб-приложения, поэтому в нем использовалась аутентификация / авторизация пользователей.
Единственные проблемы, которые у нас были, были со страницами, возвращающими файлы, и страницами, которые использовали комбинацию обоих: Ajax и обычных обратных ссылок Asp.net. Мы должны были позаботиться о сохранении контроля ExtJS на этих обходах. Но мы все равно сделали это.
ExtJS + WCF работал отлично, и я рекомендую его всем, кто делает веб-приложение, которое должно быть больше похоже на оконное приложение. Только не переусердствуйте в своем проекте с обычной функциональностью страницы asp.net и комбинацией Ajax. Или UpdatePanels.
Я использовал ExtJ в сочетании с ASP.NET только через веб-сервисы. Это прекрасно работает, если вы готовы работать без " Page " и все такое прочее.
Если вы заинтересованы в разработке Extjs с java от gwt, вы можете узнать больше в этом extjs-gwt gxt блоге. Может быть, это поможет вам Как настроить Ext js-GWT: GXT и пример для Eclipse Ganymede 3.4
