आप एमवीसी पैटर्न में यूएक्स कक्षा कैसे शामिल करते हैं?

Question

MVC पैटर्न इससे पहले कि मैं बस जे एस के शीर्ष पर इस सहित Ext.onReady पहले से UX वर्गों में शामिल हैं:

Ext.Loader.setConfig({enabled: true}); 
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); 
Ext.require([ 
    'Ext.ux.grid.FiltersFeature' 
]); 

अब मैं MVC पैटर्न के साथ काम कर रहा हूँ और मैं एक gridpanel इस का उपयोग करने की आवश्यकता है है एक ही सुविधा। मैंने शामिल किया है एक इस तरह ध्यान में रखते हुए बयान की आवश्यकता है:

Ext.define('ST.view.StudentLog', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.studentlog', 
    requires: [ 
     'Ext.ux.grid.FiltersFeature' 
    ], 

लेकिन जब वह पहली बार इस के साथ लोड हो रहा है शुरू होता है अनुप्रयोग एक 404 त्रुटि पैदा करता है।

कोई विचार?

संपादित करें:

मैं भी कोई लाभ नहीं हुआ दृश्य के शीर्ष पर कोड के इस एक ही ब्लॉक डाल की कोशिश की है (Ext.Loader.setConfig/.setPath ब्लॉक की चर्चा करते हुए)।

लोडर extjs/src/ux/ से यूएक्स कक्षाओं को लोड करने की कोशिश करता रहता है इससे कोई फर्क नहीं पड़ता कि मैं इसे अन्यथा कैसे बताने की कोशिश करता हूं। this suggestion के अनुसार, मैंने अपने ऐप नियंत्रक में पथ संपत्ति को परिभाषित करने का भी प्रयास किया है, लेकिन ऐसा लगता है कि जो कुछ भी उत्तरदाता ने स्रोत में देखा था, वह 4.1 आरसी 3 में मौजूद नहीं है क्योंकि मुझे यह नहीं मिल रहा है और यह काम नहीं करता है ।

अगर मैं अपने एचटीएमएल में <script> टैग के साथ एक आयातित स्रोत फ़ाइल के रूप में FilterFeature.js जोड़ता हूं तो मेरे ऐप से शुरू होने पर इसकी सभी निर्भरताओं को 404 त्रुटियां मिलती हैं।

सीधे यूएक्स फ़ोल्डर से यूएक्स कक्षाओं को शामिल करने का एक आसान तरीका होना चाहिए ताकि यह अन्य यूएक्स निर्भरताओं से जुड़ सके।

Answer 1

ठीक है, मैंने इसे this post से पाया।

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); 
Ext.application({ 
    name: 'ST', 
    autoCreateViewport: true, 
    ... 

या जहाँ भी आप प्रयोजनों संघनक के लिए, UX वर्गों रखना चाहते हैं, एप्लिकेशन विशिष्ट UX कक्षाएं बाहर निकाला जाना चाहिए:

बस एप्लिकेशन नियंत्रक के शीर्ष पर Ext.Loader.setPath कॉल उपयोग करने के लिए, उदाहरण के लिए की जरूरत है और पोस्ट कवर के रूप में app/ux जैसे अपने फ़ोल्डर में फंस गया।

Answer 2

यह Ext.ux.grid.FiltersFeature फ़ाइल में मौजूद पथ के साथ एक समस्या की तरह लगता है। क्या आप जांच सकते हैं कि 404 में अनुरोध के लिए यूआरएल क्या है? आपको स्वचालित रूप से लोड होने के लिए Ext.ux.grid.FiltersFeature कहां रखना है, इस बारे में आपको एक सुराग देना चाहिए।

यहां निर्देशिका संरचना का एक उदाहरण है जिसका मैं उपयोग कर रहा हूं और जहां ux कक्षाएं हैं।

js 
|---app.js 
| 
|---app 
| |---controller 
| |---model 
| |---store 
| +---view 
| 
+---ux 
    |---form 
    +---layout 

असल में, नामस्थान निर्देशिका संरचना का पालन करेगा।

Answer 3

आप लोडर पैरा को एक साथ जोड़ सकते हैं, जिससे यह ऐप/फ़ाइल संरचना को पढ़ने और समझने में आसान हो जाता है। मेरा मानना ​​है कि क्या हो रहा है, क्या आप पुस्तकालय फाइलों और ऐप फाइलों की परिभाषा खो रहे हैं - सभी app.js. से संबंधित हैं। इस प्रकार जब आप लोड हो रहे हैं, तो ऐप एप्लिकेशन रूट के बजाय प्राथमिक नेमस्पेस पथ (extjs/src) के आधार पर फ़ाइलों का उपयोग करने का प्रयास कर रहा है।

Ext.Loader.setConfig({ 
    enabled : true, 
    paths: { 
     'Ext' : 'extjs/src', // library src folder/files 
     'MyApp' : 'app',  // app namespace folder/files 
     'Ext.ux' : 'ux'   // extension namespace folder/files 
    } 
}); 

एक ही प्रक्रिया स्पर्श के लिए भी काम करती है - बस "स्पर्श" के लिए "extjs" स्वैप करें।

यदि आर्किटेक्ट का उपयोग करते हैं, तो आपको एप्लिकेशन का चयन करने, लोडर (कॉन्फ़िगरेशन पैनल) जोड़ने की आवश्यकता है। यह एक पथ वस्तु के साथ एक लोडर की पेशकश करेगा जिसे संशोधित किया जा सकता है। सक्षम विकल्प एक चेकबॉक्स विकल्प है, जो सत्य को डिफ़ॉल्ट करता है।

संपादित करें: कुछ मैंने स्पष्ट नहीं किया है कि लाइब्रेरी स्रोत और एप्लिकेशन फ़ाइलों को ज्यादातर मामलों में परिभाषित करने की आवश्यकता नहीं है, खासकर फ़ाइलों के डिफ़ॉल्ट लेआउट का उपयोग करना। यह निम्नलिखित स्निपेट अक्सर पर्याप्त है:

Ext.Loader.setConfig({ 
    enabled : true, 
    paths: { 
     'Ext.ux' : 'ux' 
    } 
}); 

Answer 4

मेरे मामले में (ux/DataTip.js का प्रयोग करके) ext-4.2.1.883 और 4.0.2.67 cmd Sencha के साथ, मैं प्रदान की समाधान के साथ Ext.ux वर्गों का उपयोग करने में सक्षम था, का उपयोग करते हुए:

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

लेकिन sencha app refresh शिकायत करता है, के साथ:

[ERR] C2008: आवश्यकता कोई मिलता-जुलता फ़ाइलें (Ext.ux.DataTip)

था extjs/examples/ux से extjs/src/ux को मेरी समस्या का समाधान/लिंक करना। एप्लिकेशन काम करता है और sencha cmd चीजों का ट्रैक रखने में भी सक्षम है। इस प्रतिलिपि/लिंक ऑपरेशन के साथ, Ext.Loader.setPath का उपयोग करने की कोई आवश्यकता नहीं है। बस कक्षा में उपयोग की आवश्यकता है:

Ext.define('Demo.Application', { 
name : 'Demo', 
requires : [ (...), 'Ext.ux.DataTip'], 

Answer 5

एमवीवीसी और सेन्चा सेमीड का उपयोग करते हुए एक्स्टज 6। मैंने ऐप शुरू करने के लिए सेन्चा जेनरेट ऐप का इस्तेमाल किया। मैं बिंदु जहां मैं ItemSelector उपयोग करना चाहता था के लिए कोडित, app.json संशोधित एक ब्लॉक ux में जोड़ा की आवश्यकता होती है:

requires: [ 
    'Ext.ux.form.MultiSelect', 
    'Ext.ux.form.ItemSelector' 
], 

:

"requires": [ 
    "font-awesome", 
    "ux" 
], 

मेरी नियंत्रक कोड में जहां मैं ItemSelector विजेट बनाना चाहता था

और ItemSelector बनाने के लिए उपयुक्त कोड। मेरे पास एक मुद्दा था, कि यह एक मॉडल के साथ एक वास्तविक डेटा स्टोर चाहता है और मैं मॉक अप डेटा का उपयोग नहीं कर सका।

तो मैं एक Sencha एप्लिकेशन