ExtJS 4.2के तरीके को समझना भंडार मॉडल संदर्भित/loade/ExtJS 4.2 में instantiated MVC पैटर्न
का उपयोग करते हुए मैं कई डॉक्स पढ़ा है, गूगल, कोशिश कर मंचों को समझने के लिए घटकों लोड और जहां इस तरह के स्टोर, मॉडल के रूप में उन्हें जगह , ect लेकिन अभी भी उलझन में।
यह एक उदाहरण मैं संपर्क के साथ काम करने
आवेदन विवरण
मुख्य मेनू, परियोजनाओं, लोग आदि आदि, एप्लिकेशन पहली बार लोड एक स्थिर गैर क्लिक डेटा पर ही आधारित है, तो का उपयोग प्रदर्शित करने के लिए प्राप्त करने के लिए कोशिश कर रहा हूँ है संपर्कों पर जो संपर्कों की सूची के साथ एक ग्रिड प्रदर्शित करता है। उपयोगकर्ता तब संपर्क पंक्ति पर क्लिक करता है और पॉपअप संपादन दृश्य प्रदर्शित होता है।
संपर्क में संपर्क में संपर्क के रूप में लोड किया गया है इसके अतिरिक्त फॉर्म में एक combobox है जो ContactTypes स्टोर लोड करता है। संपर्क प्रकार को उस संपर्क रिकॉर्ड के लिए संपर्क प्रकार पर सेट किया जाना चाहिए।
यह करने का एक आम तरीका यह है कि यह एक बड़ा एप्लीकेशन है और मैं केवल डेटा लोड करना चाहता हूं जब दृश्य की आवश्यकता हो यानी दृश्य प्रदर्शित होता है।
यहाँ मेरी भ्रम के कुछ
1) आप परिभाषित कर सकते हैं आप सभी नियंत्रकों, स्टोर, मॉडल, अनुप्रयोग config में विचार कर रहे हैं, लेकिन फिर सब कुछ कोई बात नहीं क्या पृष्ठ आप देख रहे हैं भरी हुई है। इसके अतिरिक्त यदि आपके पास ऑटोलोड है: आपके स्टोर पर सच है तो सभी स्टोरों को कॉल करने के लिए कॉल किया जाता है भले ही आप उस विशेष दृश्य को नहीं देख रहे हों।
2) जब आप अपने नियंत्रक में स्टोर या मॉडल संपत्ति में स्टोर या मॉडल निर्दिष्ट करते हैं, तो वह वास्तव में क्या करता है? क्या यह आपको बस स्टोर को आसानी से संदर्भित करने देता है लेकिन वास्तव में इसे नहीं बना रहा है या इसे बनाता है या यह सुविधा के लिए गेटर और सेटर फ़ंक्शन सेट कर रहा है। उदाहरण अगर मैं अपने नियंत्रक की स्टोर प्रॉपर्टी में एक स्टोर निर्दिष्ट करता हूं और ऑटोलोड लोड करता हूं तो सभी डेटा लोड किए जाते हैं और कुछ और करने की आवश्यकता नहीं होती है। लेकिन जब मैं संपर्क पर क्लिक करता हूं और सूची दृश्य प्रदर्शित होता है तो उस स्टोर के लिए मैं वास्तव में लोड करना चाहता हूं। तो मैंने ऑटोलोड सेट किया: झूठी और मेरी सूची फ़ंक्शन में मैं मैन्युअल रूप से this.getStore('Contacts') का उपयोग करके स्टोर प्राप्त करता हूं। यह ठीक काम करता है, लेकिन नियंत्रक के स्टोर और मॉडल सरणी संपत्ति का उपयोग करने का उद्देश्य क्या है। मैं डीबगर में देखता हूं कि अगर मैं स्टोर/मॉडल गुणों का उपयोग नहीं करता हूं तो उन जेएस फाइलों के लिए अनुरोध प्राप्त किया जाता है।
क्षमा करें मुझे पता है कि यह बहुत है लेकिन यह मेरे लिए बहुत भ्रमित है और थोड़ी देर के लिए इसके साथ संघर्ष कर रहा है।
3) आखिरकार, मेरे पास संपर्क ग्रिड लोडिंग केवल तभी होती है जब आप ऑटोलोड को सेट करके संपर्क बटन पर क्लिक करते हैं: झूठी और मैन्युअल रूप से लोड हो रहा है। अब जब कोई उपयोगकर्ता रिकॉर्ड लोड को संपादित करता है तो ठीक है लेकिन मैं combobox को लोड करने के लिए कैसे प्राप्त करूं और फिर सही मान का चयन करूं। मुझे लगता है कि मेरी समस्या का हिस्सा यह समझ रहा है कि मॉडलों को कैसे लोड किया जाता है और तुरंत चालू किया जाता है। मेरे कम्बोबॉक्स स्टोर प्रॉपर्टी में मैंने स्टोर के रूप में ContactType निर्दिष्ट किया है, लेकिन मुझे त्रुटि स्टोर अपरिभाषित है, इसलिए जेएस फ़ाइल लोड नहीं है या स्टोर तत्काल नहीं है।
यहां मेरा कोड अभी तक है।
अनुप्रयोग कोड
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'],
});
संपर्क नियंत्रक
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();
}
}
});
संपर्क देखने सूची
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;
}
});
संपर्क देखने संपादित
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);
}
});
किसी भी मदद के लिए धन्यवाद
क्या आपको अपने प्रश्न का कोई जवाब मिला? मुझे इसी तरह की समस्याओं का सामना करना पड़ रहा है और मैं इस बारे में उलझन में हूं कि Ext.js एमवीसी प्रतिमान में स्टोर कैसे प्रबंधित किए जाते हैं। –
दुर्भाग्य से नहीं। मैंने खराब दस्तावेज़ों के कारण Extjs का उपयोग करना बंद कर दिया है और अच्छा समर्थन नहीं है और अब मैं qooxdoo का उपयोग कर रहा हूं, यह Extjs के समान है और अब तक मुझे कोई समस्या नहीं है और दस्तावेज़ और उदाहरण बहुत बेहतर हैं। और यह पूरी तरह से मुफ्त एलजीपीएल लाइसेंस है जिसका अर्थ है कि आप इसे वाणिज्यिक उत्पादों में उपयोग कर सकते हैं। इसे जांचें http://qooxdoo.org/। समर्थन समुदाय संचालित है और विशेष रूप से जब सेन्चा समर्थन की तुलना में बहुत अच्छा है। और यह सक्रिय रूप से विकसित किया जा रहा है + सक्रिय ब्लॉग अपडेट। केवल समस्या मैं निर्माण/परियोजना निर्माण को समझने के लिए प्रारंभिक सेटअप था। – dan