ExtJs 4：使用Ext.ux.upload插件的组件在MVC样式重写后停止工作 [英] ExtJs 4: Component with Ext.ux.upload plugin has stopped working after rewriting in MVC style
问题描述
这里是简单的一个文件样式的代码的工作部分：
ObjectPhotosTab = Ext.create（'Ext.Panel'，{
id：'ObjectPhotosTab'，
items：[
Ext.create 。$。
文本：'选择文件'，
id：'ObjectPhotosUploadBtn'，
SelectedObjectId：0，
autoRender：true，
隐藏：true，
插件：[{
ptype：'ux.upload.window'，
pluginId：'pid'，
...
}]，
uploader：{
url：MainSiteUrl +'getimages.php？a = a& Object ='，
uploadpath：'/ Root / f iles'，
autoStart：true，
max_file_size：'2020mb'，
statusQueuedText：'准备上传'，
.....
}，
listeners：{
filesadded：function（uploader，files）{
console.log（'filesadded'）;
返回true;
}，
....
范围：此
}
}），
.....
这是新的按钮，显示但不做任何操作：
Ext.define（'crm.view.ObjectPhotosUploadBtn'，{
extends：'Ext.ux.upload.Button'，
text：'选择文件'，
id：'ObjectPhotosUploadBtn'，
alias：'widget.ObjectPhotosUploadBtn'，
SelectedObjectId：0，
autoRender：true，
hidden：false，
plugins：[{
ptype：'ux.upload.window'，
pluginId：'pid'，
.....
}]，
上传者：{
url：MainSiteUrl +'getimages.php？Object ='，
uploadpath：'/ Root / files'，
autoStart：true，
max_file_size：' 2020mb'，
statusQueuedText：'准备上传'，
.....
}，
listeners：{
filesadded：function（uploader，files）{
console.log（'filesadded'）;
返回true;
}，
.....
范围：此
}
}）
按钮被插入到Ext.widget（'ObjectPhotosUploadBtn'）调用的面板中。
由于插件的设计方式，您应该配置 upload
- $ b $ b
- 注意：您不应该在类定义中设置静态ID，因为您可能遇到问题，如果您不止一次实例化。
这应该可以正常工作：
Ext.define（'MyApp.button.UploadButton'，{
扩展：'Ext.ux.upload.Button'，
要求：[
'Ext.ux.upload.plugin.Window'
]，
别名：'widget.cutomuploadbutton'，
文本：'选择文件'，
SelectedObjectId：0 ，
plugins：[{
ptype：'ux.upload.window'，
pluginId：'pid'，
}]，
listeners：{
filesadded：function（uploader，files）{
console.log（'filesadded'）;
返回true;
}，
范围：此
}
}）;
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：'准备上传'
}
}]，
renderTo：document.body
}）;
}
}）;
如需进一步参考，请查看此小提琴： https://fiddle.sencha.com/#fiddle/sm7
I've had working button with upload plugin. When my application has grown, I've rewritten this button in MVC way (just removed Ext.create, renderTo and added Ext.define) and it stopped working. Button is shown but has no plugin action (os window with file selection, etc.). Could you advice me something please?
Here is working part of code in simple "one file" style:
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
}
}),
.....
Here is new button which is shown but do nothing:
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
}
})
Button is inserted into panel with Ext.widget('ObjectPhotosUploadBtn') call.
Here is another same unanswered question of me with more code
Because of the way the plugin was designed, you should configure the upload object at the instance level and not at the component definition.
- Note: You should never set a static id at your class definition as you might run into problems if you instantiate it more than once.
This should work just fine:
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
});
}
});
For further reference, check this fiddle: https://fiddle.sencha.com/#fiddle/sm7
这篇关于ExtJs 4：使用Ext.ux.upload插件的组件在MVC样式重写后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
