如何从ExtJS表单保存数据？将业务层中的数据加载到表单或网格中？
答案 0 :(得分：5)
对我来说，我已经使用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
好的，我在这里有一些额外的代码，可以在网格的顶部创建一个工具栏，你可以忽略它......
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页面然后发送到DB ...
// ---------------------------------------------------------------------------------------------
// 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对象访问..我知道有一种方法可以基本上将表单数据作为XML发布到ASHX页面，虽然为了我的目的，它不是必需的 - 非常简单的形式。
// ---------------------------------------------------------------------------------------------
// 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();
再一次，希望这有点帮助 - 花了我几个星期才到达那个!!对于编码来说太老了！
答案 1 :(得分：2)
我们使用ExtJS和WCF的组合取得了巨大成功。我们使用常规的Asp.net页面来提供主题，身份验证和基本页面UI然后ExtJS在客户端启动GET发送给返回纯简单裸格式JSON（没有“d”属性）的WCF服务。工作真的很棒。 WCF服务也是同一Web应用程序的一部分，因此在整个过程中都使用了用户身份验证/授权。
我们遇到的唯一问题是页面返回文件和使用两者结合的页面：Ajax和常规Asp.net回发。我们必须在这些往返过程中处理ExtJS控制持久性。但无论如何我们已经成功了。
ExtJS + WCF运行良好，我建议任何人做一个必须更像窗口应用程序的Web应用程序。只是不要使用常规的asp.net页面功能和Ajax组合使项目过度复杂化。或者UpdatePanels。
答案 2 :(得分：1)
我仅通过Web服务将ExtJs与ASP.NET结合使用。如果你愿意在没有“Page”和所有这些东西的情况下工作，它的工作正常。
答案 3 :(得分：1)
答案 4 :(得分：0)
答案 5 :(得分：0)
如果您有兴趣使用java by gwt开发Extjs，您可以在这个extjs-gwt gxt博客上了解更多信息。它可能会帮助你 How to setup Ext js-GWT : GXT and Example on Eclipse Ganymede 3.4