file upload - Agregar el botón de búsqueda de carga de CSV a Ext.Action

file-upload extjs

Question

Intento crear una carga de archivo CSV en la aplicación GeoExt Map. Necesito ubicar la función de carga dentro de Ext.Action, para poder agregarla a la barra de herramientas del panel de GeoExt. Estoy tratando de implementar este ejemplo . Aquí está mi código,

    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 me sigue dando este error,

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

¿Estoy declarando la función incorrectamente dentro de Ext.Action?

Answer 1

No puede insertar directamente la action en una toolbar ya que Ext.Action no es un tipo de Ext.Component . Una Ext.Action es básicamente un medio para crear una capa de abstracción que puede reutilizarse varias veces. Aquí debes hacer lo siguiente:

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

De la documentación :

Las acciones le permiten compartir controladores, opciones de configuración y actualizaciones de UI en cualquier componente que admita la interfaz de Acción (principalmente componentes Ext.toolbar.Toolbar, Ext.button.Button y Ext.menu.Menu)