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)