Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question

1 Answer

up vote 0 down vote accepted

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)

share|improve this answer
And then how do I add functionality to that button? – Sam007 Oct 3 '12 at 16:37
Like I stated in the answer toolbarItems.push(new Ext.button.Button(action)); – Varun Achar Oct 4 '12 at 5:31
I updated the code but the error still persists. It is still giving me the same error. You can see the error in the firebug, 128.196.142.12/geo/test/test_new.html. – Sam007 Oct 4 '12 at 17:34
You can't use new Ext.create(). That's the problem. It should only be Ext.create. – Varun Achar Oct 5 '12 at 6:49
Sorry, it is still not working. I updated the code. It continues to give me the same error. – Sam007 Oct 5 '12 at 18:43
show 5 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.