ExtJs：如何在MVC架构中定义的组件中使用插件？ [英] ExtJs: How to use plugin within defined component in MVC architecture?
问题描述
由于缺乏经验，我无法找到如何使用MVC架构激活按钮组件中的上传插件。
当我使用很少的文件，这个插件工作完美。
但是当我开始转向MVC方向时，一切都开始崩溃。
Due to the lack of experience, I can't find how to activate an upload plugin in button component using MVC architecture. When I used few files, this plugin works perfect. But when I started to move to MVC direction, everything begin to fall apart.
这是我如何初始化插件：
Here is how I initialize the plugin:
Ext.Loader.setConfig( {
enabled: true,
paths: {
'Ext.ux.upload': 'ext-4.2.1.883/src/ux/upload/'
}
});
Ext.require([
....
'Ext.ux.upload.Button',
'Ext.ux.upload.plugin.Window',
.....
这是旧方式工作完美（按钮位于一个面板，当你点击它，插件上传窗口打开）：
Here is the "old way" which worked perfect (button is situated on a panel, when you click it, the plugin upload window opens):
ObjectPhotosTab = Ext.create('Ext.Panel', {
disabled : true,
id : 'ObjectPhotosTab',
collapsible : true,
frame : true,
title : 'Photos',
items : [
//here goes button with upload plugin
Ext.create('Ext.ux.upload.Button', {
text : 'Select files',
id : 'ObjectPhotosUploadBtn',
SelectedObjectId : 0,
autoRender : true,
hidden : true,
plugins: [{
ptype : 'ux.upload.window',
title : 'Upload',
width : 320,
height : 350,
pluginId: 'pid'
}],
uploader: {
url : MainSiteUrl + 'getimages.php?a=a&Object=',
uploadpath : '/Root/files',
autoStart : true,
max_file_size : '2020mb',
statusQueuedText: 'Ready to upload',
statusUploadingText: 'Uploading ({0}%)',
statusFailedText: '<span style="color: red">Error</span>',
statusDoneText: '<span style="color: green">Complete</span>',
statusInvalidSizeText: 'File too large',
statusInvalidExtensionText: 'Invalid file type'
},
listeners: {
filesadded: function(uploader, files) {
console.log('filesadded');
return true;
},
.......,
scope: this
}
}),
Ext.getCmp('ImagesDataView') // other stuff
]
});
在我的新应用程序中，我已经将一个上传按钮移动到视图目录（肯定通过控制器）并将插件参数放入initComponent，如下所示：
In my new application I have moved an upload button to the "view" directory (surely through controller) and put plugin params to initComponent like 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,
initComponent: function() {
this.plugins = {
ptype : 'ux.upload.window',
title : 'Upload',
width : 320,
height : 350,
pluginId: 'pid'
};
this.uploader ={
// exactly the same stuff
};
this.listeners = {
// exactly the same stuff
};
this.callParent();
}
})
新定义的按钮类从面板中调用，如这个：
New defined button class is called from a panel like this:
ObjectPhotosTab = Ext.create('Ext.Panel', {
disabled : true,
id : 'ObjectPhotosTab',
collapsible : true,
frame : true,
title : 'Photos',
items : [
Ext.widget('ObjectPhotosUploadBtn'), // call button via widget
Ext.getCmp('ImagesDataView') // other stuff
]
});
这是文件/ext-4.2.1.883/src/ux/upload/plugin/的标题Window.js
Here is the header of file /ext-4.2.1.883/src/ux/upload/plugin/Window.js
/**@class Ext.ux.upload.plugin.Window
* @extends Ext.AbstractPlugin
* @author Harald Hanek (c) 2011-2012
* @license http://harrydeluxe.mit-license.org*/
Ext.define('Ext.ux.upload.plugin.Window', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.ux.upload.window',
requires: [ 'Ext.ux.statusbar.StatusBar',
'Ext.ux.statusbar.ValidationStatus' ],
constructor: function(config) {
var me = this;
Ext.apply(me, config);
me.callParent(arguments);
},
init: function(cmp) {
var me = this,
uploader = cmp.uploader;
cmp.on({
filesadded: {
......
这是文件的头文件/ext-4.2.1.883/src/ux/upload/Button.js
Here is the header of file /ext-4.2.1.883/src/ux/upload/Button.js
/**@class Ext.ux.upload.Button
* @extends Ext.button.Button
* @author Harald Hanek (c) 2011-2012
* @license http://harrydeluxe.mit-license.org */
Ext.define('Ext.ux.upload.Button', {
extend: 'Ext.button.Button',
alias: 'widget.uploadbutton',
requires: ['Ext.ux.upload.Basic'],
disabled: true,
constructor: function(config) {
var me = this;
config = config || {};
Ext.applyIf(config.uploader, {
browse_button: config.id || Ext.id(me)
});
me.callParent([config]);
},
initComponent: function() {
var me = this,
e;
me.callParent();
me.uploader = me.createUploader();
......
问题是该按钮创建成功但它不需要插件操作。
The problem is that the button is created successfully but it does not do needed plugin action.
我也看不到ff / chrome控制台中的错误。
I see no errors in ff/chrome console also.
当我通过Illuminations ff插件检查crm.view.ObjectPhotosUploadBtn时，我可以看到这个类的所有必需的插件属性。
When I inspect "crm.view.ObjectPhotosUploadBtn" through the Illuminations ff plugin, I can see all needed plugin properties of this class.
请帮助我解决这个问题。
Please help me to solve this question.
推荐答案
我有太多的代码引用，但问题在于这个代码段： p>
There is too much code for me to quote, but the problem lies in this snippet:
Ext.define('crm.view.ObjectPhotosUploadBtn',{
extend: 'Ext.ux.upload.Button',
...
initComponent: function() {
this.plugins = {
...
};
}
});
当执行 initComponent 时，插件已经在构造函数中构建并初始化，而您的 initComponent 将覆盖所有这些。
By the time initComponent is executed, the plugins have already been constructed and initialized in the constructor, and your initComponent overwrites all that.
是将插件blob移动到类定义中：
What you need instead is to move the plugins blob into the class definition:
Ext.define('crm.view.ObjectPhotosUploadBtn', {
extend: 'Ext.ux.upload.Button',
...
plugins: [{
ptype : 'ux.upload.window',
title : 'Upload',
width : 320,
height : 350,
pluginId: 'pid'
}]
});
同样的， uploader 和听众作业。
这篇关于ExtJs：如何在MVC架构中定义的组件中使用插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
