Quelle est la meilleure pratique pour utiliser ExtJS avec Asp.net et WCF dans .NET 3.5?
https://stackoverflow.com/questions/186456
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment sauvegardez-vous les données du formulaire ExtJS? Charger des données de la couche de gestion dans un formulaire ou une grille?
La solution 5
J'ai probablement trouvé la meilleure solution http://developmentalmadness.blogspot.com/2008/07/ using-extjs-with-wcf.html
Autres conseils
Pour moi, j’ai utilisé une page ASHX pour pousser du code XML droit, puis utiliser le lecteur de données ExtJS pour lire. Ensuite, en utilisant un formulaire, etc., je repousse les données du formulaire directement vers une autre page ASHX pour interroger / postez à la base de données .. sacrément si je connais le meilleur moyen - mais cela me convenait, et semble très rapide et stable, et surtout il est plus facile de suivre / déboguer.
Voici un exemple de code si cela vous aide ... espérons-le pour ne pas nuire!
OBTENIR DES DONNÉES
Comme vous le verrez, l'URL pour récupérer les données reçoit une simple page .NET ASHX (gestionnaire générique) qui renverra directement du code 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
DONNÉES VERS LA GRILLE D'EXTJS
Ok, j'ai du code supplémentaire ici qui crée une barre d'outils dans la partie supérieure de la grille que vous pouvez ignorer ...
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
PUBLICATION DE DONNÉES D'UN FORMULAIRE AU BACKEND
Encore une fois, notez l'URL dans la première partie de la définition .. va renvoyer les données du formulaire posté vers une autre page ASHX pour les envoyer ensuite à la base de données ...
// ---------------------------------------------------------------------------------------------
// 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
LE DERNIER BIT À RÉALISER ACTUELLEMENT LE FORMULAIRE CI-DESSUS POUR LE FOND ...
Cette fenêtre utilise la définition de formulaire ci-dessus pour soumettre les données. Dans la page ASHX, les données apparaissent simplement sous la forme d'un formulaire posté. Vous pouvez y accéder via un objet Request.form normal .. Je sais qu'il existe un moyen de publiez essentiellement les données de formulaire sur la page ASHX au format XML, bien que cela ne soit pas nécessaire - un formulaire très simple.
// ---------------------------------------------------------------------------------------------
// 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();
Encore une fois, espérons que cela aide quelque peu - cela m’a pris quelques semaines pour y arriver !! devenir trop vieux pour coder peut-être!
Nous avons utilisé la combinaison d'ExtJS et de WCF avec un grand succès. Nous avons utilisé une page Asp.net classique pour fournir une interface utilisateur de thème, d'authentification et de page de base, puis ExtJS a démarré du côté client en émettant des GET aux services WCF qui renvoyaient du JSON pur et simple au format nu (sans la propriété "d"). A travaillé vraiment bien. Les services WCF faisant également partie de la même application Web, l’authentification / autorisation des utilisateurs a été utilisée tout au long de celle-ci.
Les seuls problèmes que nous avons rencontrés concernaient les pages renvoyant des fichiers et les pages combinant les deux: publications postales Aj.net et Asp.net standard. Nous devions nous occuper de la persistance du contrôle ExtJS sur ces allers-retours. Mais nous l’avons fait quand même.
ExtJS + WCF a bien fonctionné et je le recommanderais à quiconque fait une application Web qui doit être plus proche de celle de Windows. Il suffit de ne pas trop compliquer votre projet avec les fonctionnalités de page asp.net habituelles et la combinaison Ajax. Ou UpdatePanels également.
J'ai utilisé ExtJs en conjonction avec ASP.NET uniquement par le biais de services Web. Cela fonctionne parfaitement si vous êtes prêt à travailler sans " Page " et tout ça.
Si vous souhaitez développer Extjs avec java by gwt, vous pouvez en apprendre davantage sur ce blog gxt extjs-gwt. Ça peut vous aider Comment configurer Ext js-GWT: GXT et exemple sur Eclipse Ganymede 3.4
