javascript - ExtJs 4:Ext.ux.upload प्लग इन के साथ घटक MVC शैली में फिर से लिखने के बाद काम करना बंद कर दिया है




file-upload plugins extjs4 (2)

प्लगइन के डिज़ाइन के तरीके के कारण, आपको upload ऑब्जेक्ट at the instance level कॉन्फ़िगर करना चाहिए और घटक परिभाषा पर नहीं।

  • नोट: यदि आप एक बार से अधिक बार इन्स्तांत करते हैं, तो आपको अपनी क्लास की परिभाषा में एक स्थैतिक आईडी सेट नहीं करना चाहिए क्योंकि आप समस्याओं में चल सकते हैं

यह सिर्फ ठीक काम करना चाहिए:

Ext.define('MyApp.button.UploadButton',{
    extend: 'Ext.ux.upload.Button',
    requires : [
        'Ext.ux.upload.plugin.Window'
    ],
    alias : 'widget.cutomuploadbutton',
    text : 'Select files',
    SelectedObjectId     : 0,
    plugins: [{
        ptype   : 'ux.upload.window',
        pluginId: 'pid',
    }],
    listeners: {
        filesadded: function(uploader, files) {
            console.log('filesadded');
            return true;
        },
        scope: this
    }
});

Ext.application({
    name : 'MyApp',

    launch : function() {

        Ext.create('Ext.Panel', {
            title: 'Test pUpload',
            width: 500,
            height: 500,
            items       : [{
                xtype : 'cutomuploadbutton',
                id: 'ObjectPhotosUploadBtn',
                uploader: {
                    url             : 'Foo' + 'getimages.php?Object=',
                    uploadpath      : '/Root/files',
                    autoStart       : true,
                    max_file_size   : '2020mb',
                    statusQueuedText: 'Ready to upload'
                }
            }],
            renderTo : document.body
        });
    }
});

अधिक संदर्भ के लिए, इस बेला की जांच करें: https://fiddle.sencha.com/#fiddle/sm7

अपलोड प्लगइन के साथ मेरे पास काम बटन है। जब मेरे आवेदन में वृद्धि हुई है, मैंने इस बटन को एमवीसी तरीके से फिर से लिखा है (बस निकाला निकाला गया, निकालें और जोड़ दिया गया Ext.define) और यह काम करना बंद कर दिया। बटन दिखाया गया है लेकिन कोई प्लगिन क्रिया नहीं है (ओएस विंडो फाइल चयन, आदि के साथ)। क्या आप मुझे कुछ सलाह दे सकते हैं?

यहां कोड का एक हिस्सा "एक फ़ाइल" शैली में काम कर रहा है:

 ObjectPhotosTab = Ext.create('Ext.Panel', {
        id          : 'ObjectPhotosTab',
        items       : [
              Ext.create('Ext.ux.upload.Button', {
                    text        : 'Select files',
                    id          : 'ObjectPhotosUploadBtn',
                    SelectedObjectId     : 0,
                    autoRender  : true,
                    hidden      : true,
                    plugins: [{
                        ptype   : 'ux.upload.window',
                        pluginId: 'pid',
                        ...
                    }],
                    uploader: {
                        url             : MainSiteUrl + 'getimages.php?a=a&Object=',
                        uploadpath      : '/Root/files',
                        autoStart       : true,
                        max_file_size   : '2020mb',
                        statusQueuedText: 'Ready to upload',
                        .....
                    },
                    listeners: {
                            filesadded: function(uploader, files) {
                                console.log('filesadded');
                                return true;
                            },
                            ....
                            scope: this
                        }
             }),
             .....

यहां नया बटन दिखाया गया है, लेकिन कुछ भी नहीं है:

Ext.define('crm.view.ObjectPhotosUploadBtn',{
    extend: 'Ext.ux.upload.Button',
    text        : 'Select files',
    id          : 'ObjectPhotosUploadBtn',
    alias       : 'widget.ObjectPhotosUploadBtn',
    SelectedObjectId     : 0,
    autoRender  : true,
    hidden      : false,
    plugins: [{
        ptype   : 'ux.upload.window',
        pluginId: 'pid',
        .....
    }],
    uploader: {
        url             : MainSiteUrl + 'getimages.php?Object=',
        uploadpath      : '/Root/files',
        autoStart       : true,
        max_file_size   : '2020mb',
        statusQueuedText: 'Ready to upload',
        .....
    },
    listeners: {
        filesadded: function(uploader, files) {
            console.log('filesadded');
            return true;
        },
        .....
        scope: this
    }
})

बटन Ext.widget ('ObjectPhotosUploadBtn') कॉल के साथ पैनल में डाला जाता है।

यहां अधिक कोड के साथ मुझे एक और अनुत्तरित सवाल है


जब नए प्रोप या राज्य प्राप्त होते हैं (जैसे आप यहां setState कॉल setState हैं), प्रतिक्रिया कुछ फ़ंक्शंस को setState , setState कहा जाता है

अपने मामले में, बस इस. this.drawGrid() को कॉल करने के लिए एक componentDidUpdate this.drawGrid() फ़ंक्शन जोड़ें

जेएस बिन में कोड काम कर रहा है

जैसा कि मैंने उल्लेख किया है, कोड में, componentDidUpdate this.setState(...) बाद लागू किया जाएगा this.setState(...)

तो componentDidUpdate this.drawGrid() अंदर जा रहा है यह. this.drawGrid()

संदर्भ में घटक लाइफसाइक्ल के बारे में और पढ़ें https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate





javascript extjs file-upload plugins extjs4