将CSV上传浏览按钮添加到Ext.Action [英] Adding CSV upload browse button to Ext.Action

问题描述

我想在GeoExt地图应用程式上建立CSV档案上传。
我需要将上传函数放在Ext.Action中，以便我可以将其添加到GeoExt面板的工具栏。我正尝试实施此示例。这是我的代码，

  action = new Ext.Action（{
 text：Upload Excel，
 control：Ext.create（'Ext.form.Panel'，{
 title：'上传一个CSV文件'，
 width：400，
 bodyPadding：10，
 frame：true，
 renderTo：Ext.getBody（），
 items：[{
 xtype：'filefield'，
 name：'csv'，
 fieldLabel： 'CSV Upload'，
 labelWidth：50，
 msgTarget：'side'，
 allowBlank：false，
 buttonText：'选择CSV文件'
}]，
 
 buttons：[{
 text：'Upload'，
 handler：function（）{
 var form = this.up（'form'）
 .getForm（）; 
 if（form.isValid（））{
 form.submit（{
 url：'file-upload.py'，
 waitMsg：'上传CSV File ...'，
 success：function（fp，o）{
 Ext.Msg.alert（'Success'，'Your csv file''+ o.result.file +'has '）; 
} 
}）; 
} 
} 
}] 
}），
 map：map，
 //按钮选项
 tooltip：Upload CSV File ，
 //检查项目选项
 group：newTool
}）; 
 actions [upCSV] = action; 
 toolbarItems.push（new Ext.button.Button（action））; 
  

Firebug会给我这个错误，

TypeError：b [d.xtype ||我不是一个构造函数

我在Ext.Action中声明的函数不正确吗？

操作推送到工具栏中 c>因为 Ext.Action 不是 Ext.Component 的类型。 Ext.Action 基本上是一种创建可以多次重用的抽象层的方法。这里你需要做以下事情：

  toolbarItems.push（new Ext.button.Button 
  

从文档：

共享处理程序，配置选项和UI更新
跨越任何支持Action接口的组件（主要是
Ext.toolbar.Toolbar，Ext.button.Button和Ext.menu.Menu组件）

I am trying to create a CSV File upload on GeoExt Map App. I need to place the upload function within the Ext.Action, so that I can add it to the toolbar of the GeoExt Panel. I am trying to implement this example. Here is my code,

    action = new Ext.Action({
    text: "Upload Excel",
    control: Ext.create('Ext.form.Panel', {
        title: 'Upload a CSV File',
        width: 400,
        bodyPadding: 10,
        frame: true,
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'filefield',
            name: 'csv',
            fieldLabel: 'CSV Upload',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            buttonText: 'Select CSV File'
        }],

        buttons: [{
            text: 'Upload',
            handler: function () {
                var form = this.up('form')
                    .getForm();
                if (form.isValid()) {
                    form.submit({
                        url: 'file-upload.py',
                        waitMsg: 'Uploading the CSV File...',
                        success: function (fp, o) {
                            Ext.Msg.alert('Success', 'Your csv file "' + o.result.file + '" has been uploaded.');
                        }
                    });
                }
            }
        }]
    }),
    map: map,
    // button options
    tooltip: "Upload CSV File",
    // check item options
    group: "newTool"
});
actions["upCSV"] = action;
toolbarItems.push(new Ext.button.Button(action));

Firebug keeps giving me this error,

TypeError: b[d.xtype || e] is not a constructor

Am I declaring the function incorrectly within the Ext.Action?

解决方案

You can't directly push the action into a toolbar since an Ext.Action is not a type of Ext.Component. An Ext.Action is basically a means of creating an abstraction layer which can be reused multiple times. Here you need to do the following:

toolbarItems.push(new Ext.button.Button(action));

From the documentation:

Actions let you share handlers, configuration options and UI updates across any components that support the Action interface (primarily Ext.toolbar.Toolbar, Ext.button.Button and Ext.menu.Menu components)

这篇关于将CSV上传浏览按钮添加到Ext.Action的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！