ExtJS フォームからどのようにデータを保存しますか? ビジネス層からフォームまたはグリッドにデータをロードしますか?
10134 次
6 に答える
5
私の場合、ASHXページを使用してXMLを直接プッシュし、ExtJSデータリーダーを使用して読み取ります。次に、フォームなどを使用して、フォームデータを別のASHXページに直接プッシュして、問い合わせ/投稿します。 DB ..私が最善の方法を知っていれば、とんでもないことですが、それは私に適しており、非常に迅速で安定しているように見えます。最も重要なのは、フォロー/デバッグが簡単なことです。
これが役立つ場合のコード例です...うまくいけば邪魔になりません！
データの取得
ご覧のとおり、データを取得するための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ページに送り返し、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();
繰り返しになりますが、これがある程度役立つことを願っています-それに到達するのに数週間かかりました!! おそらくコーディングするには年を取りすぎています！
于 2008-10-12T05:05:57.803 に答える
2
ExtJS と WCF の組み合わせを使用して、大きな成功を収めました。通常の Asp.net ページを使用して、テーマ設定、認証、および基本的なページ UI を提供した後、クライアント側で ExtJS を起動して、WCF サービスに GET を発行し、純粋で単純な形式の JSON ("d" プロパティなし) を返しました。本当にうまくいきました。WCF サービスも同じ Web アプリケーションの一部であったため、全体でユーザー認証/承認が使用されていました。
唯一の問題は、ファイルを返すページと、Ajax と通常の Asp.net ポストバックの両方を組み合わせて使用するページでした。これらのラウンドトリップでの ExtJS コントロールの永続性に注意する必要がありました。しかし、とにかくそれを成し遂げました。
ExtJS+WCF は非常にうまく機能し、ウィンドウ アプリのようにする必要がある Web アプリケーションを実行しているすべての人にお勧めします。通常のasp.netページ機能とAjaxの組み合わせでプロジェクトを過度に複雑にしないでください。または UpdatePanels も。
于 2008-11-27T21:14:01.743 に答える
1
于 2008-10-10T02:21:33.937 に答える
1
ExtJ を ASP.NET と組み合わせて使用したのは、Web サービスのみでした。「ページ」などを使わなくても問題なく動作します。
于 2008-10-09T09:04:23.827 に答える
0
おそらく私は最良の解決策を見つけました http://developmentalmadness.blogspot.com/2008/07/using-extjs-with-wcf.html
于 2008-10-11T17:19:20.070 に答える
0
Extjs を Java by gwt で開発することに興味がある場合は、この extjs-gwt gxt ブログで詳細を学ぶことができます。Ext js-GWT のセットアップ方法: Eclipse Ganymede 3.4 での GXT と例
于 2009-02-08T05:43:58.413 に答える