Korzystanie ExtJS 4.2Zrozumienie modele przechowywane są odniesione/loade/instancja w ExtJS 4.2 MVC wzór
Czytałem wiele docs, google, fora próbując zrozumieć jak składniki obciążenia i gdzie je umieścić, takich jak sklepy, modeli , ect, ale nadal zdezorientowany.
To jest przykład staram się dostać pracę
Opis Zastosowanie
menu główne z kontaktami, Projekty, ludzie itp itd App pierwsze ładunki aby wyświetlić statyczne niż oparte na danych, a następnie za pomocą kliknięcia w Kontaktach, który wyświetla siatkę z listą kontaktów. Następnie użytkownik klika wiersz kontaktowy i wyświetla się widok edycji wyskakujących.
W contacteditview kontakt jest ładowany do formularza, dodatkowo formularz ma pole wyboru, które ładuje zapis danych ContactTypes. Typ ContactType należy ustawić na wartość contacttype dla tego rekordu kontaktu.
Jaki jest najczęstszy sposób, aby to zrobić, biorąc pod uwagę, że jest to duża aplikacja i chcę załadować dane tylko wtedy, gdy jest to potrzebne, np. Widok jest wyświetlany.
Oto niektóre z moich nieporozumień
1) Można zdefiniować wszystkie z was Sterowniki, sklepy, modele, widoki w aplikacji konfiguracji, ale potem wszystko jest ładowany bez względu na to, jaka strona patrzysz. Ponadto, jeśli masz autoLoad: true w swoich sklepach, to wywołuje, że wszystkie sklepy są wprowadzane do bazy danych, nawet jeśli nie patrzysz na ten widok.
2) Kiedy określasz sklep lub model we właściwościach sklepów lub modeli w kontrolerze, co dokładnie to robi? Czy to tylko pozwala ci łatwo odwoływać się do sklepu, ale tak naprawdę go nie tworzysz, czy tworzy go, czy tylko ustawia funkcje getter i setter dla wygody. Przykład, jeśli określę magazyn w właściwości sklepu mojego kontrolera i będę mieć automatyczne ładowanie, wszystkie dane zostaną załadowane bez potrzeby robienia niczego innego. Ale naprawdę chcę, aby ten sklep ładował się tylko wtedy, gdy kliknę Kontakt i wyświetli się widok listy. Więc ustawiłem autoLoad: false i na mojej funkcji listy ręcznie przechodzę do sklepu używając this.getStore('Contacts'). Działa to dobrze, ale jaki jest cel używania właściwości tablic i modeli macierzy kontrolera. W debuggerze widzę, że jeśli nie używam właściwości store/model, dla tych plików js tworzone jest żądanie pobierania.
Przykro mi, ale wiem, że to dużo, ale jest to bardzo mylące i przez jakiś czas borykałem się z tym problemem.
3) Na koniec, ładowanie siatki kontaktów jest możliwe tylko po kliknięciu przycisku Kontakty przez ustawienie opcji Autouzładowywanie: fałsz i ręczne ładowanie. Teraz, gdy użytkownik kliknie przycisk edytuj, ładowanie rekordu jest prawidłowe, ale w jaki sposób można załadować pakiet combobox, a następnie wybrać poprawną wartość. Myślę, że częścią mojego problemu jest zrozumienie, jak modele sklepów są ładowane i tworzone. W mojej właściwości sklepu combobox określiłem ContactType jako sklep, ale otrzymuję komunikat o błędzie undefined, więc albo plik js nie jest załadowany, albo magazyn nie jest instancjonowany.
Oto mój kod do tej pory.
Code App
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': "lib/extux",
'Wakanda': "lib/extux/wakanda"
}
});
Ext.application({
name: 'SimplyFundraising',
autoCreateViewport: true,
requires: ['Ext.ux.Router', // Require the UX
'Wakanda.model'],
controllers: ['Contacts'],
});
Kontakt Kontroler
Ext.define('SimplyFundraising.controller.Contacts', {
extend: 'Ext.app.Controller',
views: ['contacts.List', 'contacts.Edit'],
init: function() {
this.control({
'contactslist': {
itemdblclick: this.editContact,
removeitem: this.removeContact
},
'contactslist > toolbar > button[action=create]': {
click: this.onCreateContact
},
// 'contactsadd button[action=save]': {
// click: this.doCreateContact
// },
'contactsedit button[action=save]': {
click: this.updateContact
}
});
},
list: function() {
var mystore = this.getStore('Contacts')
mystore.load();
// mystore.proxy.extraParams = { $expand: 'ContactType'};
// var User = this.getContactModel();
// User.load(258, {
// success: function (user) {
// console.log("Loaded user 258: " + user.get('lastName'));
// }
// });
},
editContact: function (grid, record) {
var view = Ext.widget('contactsedit');
view.down('form').loadRecord(record);
this.addnew = false
},
removeContact: function (Contact) {
Ext.Msg.confirm('Remove Contact ' + Contact.data.lastName, 'Are you sure?', function (button) {
if (button == 'yes') {
this.getContactsStore().remove(Contact);
}
}, this);
},
onCreateContact: function() {
var view = Ext.widget('contactsedit');
this.addnew = true
},
// doCreateContact: function (button) {
// var win = button.up('window'),
// form = win.down('form'),
// values = form.getValues(),
// store = this.getContactsStore();
// if (form.getForm().isValid()) {
// store.add(values);
// win.close();
// }
// },
updateContact: function (button) {
var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(), store = this.getContactsStore();
if (form.getForm().isValid()) {
if (this.addnew == true) {
store.add(values);
} else {
record.set(values);
}
win.close();
}
}
});
Widok kontaktów lista
Ext.define('SimplyFundraising.view.contacts.List', {
extend : 'Ext.grid.Panel',
xtype : 'contactslist',
title : 'All Contacts',
store : 'Contacts',
autoHeight: true,
autoScroll : true,
viewConfig : {
loadMask : true
},
initComponent : function() {
this.tbar = [{
text : 'Create Contact',
action : 'create'
}];
this.columns = [{
header : 'Id',
dataIndex : '__KEY',
width : 50
}, {
header : 'First Name',
dataIndex : 'firstName',
flex : 1
}, {
header : 'Middle Name',
dataIndex : 'middleName',
flex : 1
}, {
header : 'Last Name',
dataIndex : 'lastName',
flex : 1
},
{
header : 'Type',
dataIndex : 'ContactType.name',
flex : 1
}];
this.addEvents('removeitem');
this.actions = {
removeitem : Ext.create('Ext.Action', {
text : 'Remove Contact',
handler : function() {
this.fireEvent('removeitem', this.getSelected())
},
scope : this
})
};
var contextMenu = Ext.create('Ext.menu.Menu', {
items : [this.actions.removeitem]
});
this.on({
itemcontextmenu : function(view, rec, node, index, e) {
e.stopEvent();
contextMenu.showAt(e.getXY());
return false;
}
});
this.callParent(arguments);
},
getSelected : function() {
var sm = this.getSelectionModel();
var rs = sm.getSelection();
if (rs.length) {
return rs[0];
}
return null;
}
});
Kontakt zobaczyć edit
Ext.define('SimplyFundraising.view.contacts.Edit', {
extend: 'Ext.window.Window',
xtype: 'contactsedit',
title: 'Edit Contacts',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
bodyStyle: {
background: 'none',
padding: '10px',
border: '0'
},
items: [
{
xtype: 'textfield',
name: 'firstName',
allowBlank: false,
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name: 'lastName',
allowBlank: false,
fieldLabel: 'Last Name'
},
{
xtype: 'combobox',
fieldLabel: 'Contact Type',
name: 'contactType',
store: 'ContactTypes',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a type...'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
Dzięki za pomoc
Czy znalazłeś odpowiedź na swoje pytanie? Mam podobne problemy i jestem zdezorientowany, jak zarządzane są Sklepy w paradygmacie MVC Ext.js. –
Nie, niestety nie. Przestałem używać Extjsa z powodu złych dokumentów i niezbyt dobrego wsparcia i teraz używam qooxdoo, to jest podobne do Extjsa i jak dotąd nie mam żadnych problemów, a dokumentacja i przykłady są znacznie lepsze. I jest to całkowicie darmowa licencja LGPL, co oznacza, że można jej używać w komercyjnych produktach. Sprawdź to http://qooxdoo.org/. Wsparcie jest kierowane przez społeczność i jest całkiem niezłe, szczególnie w porównaniu do wsparcia Sencha. I jest aktywnie rozwijany + aktywne aktualizacje bloga. Jedyny problem jaki miałem to początkowa konfiguracja po prostu zrozumienie tworzenia kompilacji/projektu. – dan