एक्सटी जेएस 4: किस बिंदु की आवश्यकता है?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि Ext JS 4 में क्या आवश्यक है, और मैं उचित उत्तर के साथ नहीं आ सकता।

app.js

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.Loader.setPath('Ext.ux', 'examples/ux'); 

Ext.application({ 
    name: 'Test', 
    appFolder: 'app', 
    controllers: ['TheController'], 
    requires: ['Test.Utils', 'Test.Utils2'], // I don't think this does anything... couldn't find this option for Ext.application 
    launch: function() { 
    Ext.create('Ext.Viewport', { 
     layout: 'border', 
     items: [{ 
     xtype: 'thegrid', 
     region: 'center', 
     title: 'blah!' 
     }] 
    }); 
    } 
}); 

एप्लिकेशन/नियंत्रक/TheController.js

Ext.define('Test.controller.TheController', { 
    extend: 'Ext.app.Controller', 
    models: ['TheModel'], 
    stores: ['TheStore'], 
    views: ['TheGrid'], 
    init: function() { 
    } 
}); 

एप्लिकेशन/देखें/TheGrid.js

: चलो कहते हैं मैं निम्नलिखित कोड डालें

Ext.define('Test.view.TheGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.thegrid', 
    requires: ['Test.store.TheStore'], 
    store: 'TheStore', 
    columns: [ 
    {header: 'Name', dataIndex: 'name'}, 
    {header: 'Phone', dataIndex: 'phone'}, 
    {header: 'Hello', dataIndex: 'hello'} 
    ] 
}); 

एप्लिकेशन/दुकान/TheStore.js

Ext.define('Test.store.TheStore', { 
    extend: 'Ext.data.Store', 
    requires: ['Test.model.TheModel', 'Test.Utils'], 
    model: 'Test.model.TheModel', 
    data: [ 
    {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()}, 
    {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'}, 
    {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'} 
    ] 
}); 

एप्लिकेशन/मॉडल/TheModel.js

Ext.define('Test.model.TheModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
    {name: 'name', type: 'string'}, 
    {name: 'phone', type: 'string'}, 
    {name: 'hello', type: 'string'} 
    ] 
}); 

एप्लिकेशन/Utils.js

Ext.define('Test.Utils', { 
    singleton: true, 
    requires: ['Test.Utils2'], 
    getText: function() { 
    return Test.Utils2.hello + 'world'; 
    } 
}); 

एप्लिकेशन /Utils2.js

Ext.define('Test.Utils2', { 
    singleton: true, 
    hello: 'hello' 
}); 

मुझे पता है यह एक बहुत लंबा उदाहरण है, लेकिन मुझे यकीन है कि मैं पूरी तरह से चित्रित किया है कि मैं क्या कर रहा था बनाने के लिए की जरूरत है। उपयोग Utils2 पर निर्भर करता है क्योंकि इसे Utils2 के हैलो वैरिएबल को कॉल करने की आवश्यकता होती है। शेष कोड एक ग्रिड स्थापित कर रहा है और TheStore में Utils.getText फ़ंक्शन को कॉल कर रहा है। फायरबग TheStore.js में लाइन 6 पर Test.Utils is undefined फेंकता है, और उस समय उस समय, टेस्ट। स्पष्ट रूप से मौजूद नहीं है, लेकिन Test.Utils2 करता है।

मेरा प्रश्न है ... Utils2 क्यों मौजूद है, लेकिन उपयोग नहीं करता है? मैंने सोचा कि मुझे आवश्यक कक्षाओं में लाया जाना चाहिए, इस प्रकार मुझे उनका उपयोग करने की इजाजत मिलती है, लेकिन मुझे लगता है कि मैं गलत हूं। मैंने सेन्चा दस्तावेज़ और धागे की भीड़ पढ़ी है, लेकिन वास्तव में कुछ भी समझ में नहीं आया है, और यह वास्तव में इस उदाहरण की व्याख्या नहीं करता है। क्या कोई यहां कुछ अंतर्दृष्टि निकाल सकता है? यह सराहनीय है।

** साथ ही, मुझे एहसास है कि मैं यहां कुछ गूढ़ चीजें कर रहा हूं, लेकिन यह केवल एक उदाहरण के लिए है, इसलिए मैं वैश्विक उपयोग को गठबंधन नहीं कर रहा हूं या ग्लोबल्स का उपयोग नहीं कर रहा हूं ... मैं बस आवश्यकता विकल्प को समझने की कोशिश कर रहा है।

अद्यतन

नीचे Izhaki के जवाब के लिए धन्यवाद, मैं कुछ पता लगा। यदि मैं कक्षा में एक आवश्यक कक्षा का उपयोग करना चाहता हूं, तो मैं परिभाषित कर रहा हूं, मुझे ऑब्जेक्ट को बनने के लिए इंतजार करना होगा (आईई, इनिट कॉम्पोनेंट का उपयोग करें), इसलिए मेरा स्टोर और ग्रिड कोड बदलता है:

ऐप/दुकान/TheStore.js

Ext.define('Test.store.TheStore', { 
    extend: 'Ext.data.Store', 
    requires: ['Test.model.TheModel'], 
    model: 'Test.model.TheModel' 
}); 

एप्लिकेशन/देखें/TheGrid.js

Ext.define('Test.view.TheGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.thegrid', 
    requires: ['Test.store.TheStore'], 
    store: 'TheStore', 
    columns: [ 
    {header: 'Name', dataIndex: 'name'}, 
    {header: 'Phone', dataIndex: 'phone'}, 
    {header: 'Hello', dataIndex: 'hello'} 
    ], 
    // This is the change that works 
    initComponent: function() { 
    this.callParent(); 
    this.store.loadData([ 
     {name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()}, 
     {name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'}, 
     {name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'} 
    ]); 
    } 
}); 

यह काम करता है, लेकिन मेरा आखिरी सवाल यह है कि ...क्या मुझे TheStore में TheModel की आवश्यकता है, और/या TheGore में TheStore की आवश्यकता है? ऐसा लगता है जैसे TheController उन सभी की देखभाल कर रहा है क्योंकि मैं टेस्ट का उपयोग कर सकता हूं। TheGrid में उपयोग करता है, लेकिन TheGrid विशेष रूप से यह नहीं बताता है कि इसे टेस्ट की आवश्यकता है।

इसके अलावा, सेन्चा डॉक्स से this example मुझे और अधिक भ्रमित कर देता है क्योंकि मैं स्पष्ट रूप से टेस्ट का उपयोग नहीं कर रहा हूं। जब तक किस्टोर बनाया नहीं जाता है, लेकिन यह उदाहरण ऐसा लगता है कि यह प्रारंभ करने के लिए प्रतीक्षा किए बिना चाइल्ड क्लास का उपयोग कर सकता है (initComponent का उपयोग कर)।

Answer 1

यह वास्तव में एक बेवकूफ सवाल नहीं है।

"जब आप इस वर्ग की एक वस्तु का निर्माण, गतिशील रूप से पहले आवश्यक स्क्रिप्ट लोड करना सुनिश्चित करें":

आप देख सकते हैं एक तरह से ExtJS बताने के लिए के रूप में की आवश्यकता है।

आप इस लाइन के बारे में सही कर रहे हैं:

requires: ['Test.Utils', 'Test.Utils2'], 

app.js में की जरूरत नहीं जा रहा है, कारण किया जा रहा है कि आवेदन पहले से ही है:

controllers: ['TheController'], 

जो एक ही है यह कहते हुए आप js की आवश्यकता होती है स्क्रिप्ट जिसमें TheController रहता है (किसी भी मॉडल/दृश्य/नियंत्रक/स्टोर परिभाषा का भी अर्थ है कि संबंधित स्क्रिप्ट आवश्यक हैं, यानी गतिशील रूप से लोड हो जाएंगे)।

TheController है:

requires: ['Test.model.TheModel', 'Test.Utils'], 

जो इन गतिशील रूप से लोड होगा - यही कारण है कि एक ही requires यह app.js की जरूरत नहीं है;

कारण आप Firebug फेंकने Test.Utils अपरिभाषित है मिलता है कि आप एक वस्तु है कि अभी तक गतिशील लोड नहीं के लिए एक संदर्भ के साथ एक config (hello) देना है - वहाँ दायरे में नहीं Test.UtilsTheStore तक का निर्माण किया है।

Answer 2

1. HasMany रिश्तों बस काम नहीं के बिना यह

2. यह मदद करता है JSBuilder जानते हैं कि कौन शामिल करने के लिए फ़ाइलें है। उदाहरण के लिए, यदि आपका व्यूपोर्ट सीमा लेआउट का उपयोग करता है, तो इसे गलत तरीके से शामिल नहीं किया जाएगा, और आपको उपयोगों का उपयोग करना होगा या इसे शामिल करने की आवश्यकता होगी।