[SOLVED] Upload Panel

[brianj22]

Hey guys. One of the examples you have in Valence 2.2 and 3.2 is called FILE UPLOAD TO IFS. In this example you are creating a panel to do this. I want to do something simular with my project but I need it to be a window not a panel becuase the user is suppose to right click on an item in a grid then select the option to upload an image to the IFS folder whenever we create a new item # and a new image for that item. Unless i am wrong a panel must be shown on a separate standalone "window" where a window will just pop up and still still show the grid underneath it.

Anyway I took your UPLOAD example and put it in my code (with a minor tweek in the name) and I figured Id try putting the upload panel within a window but the errors im getting doensnt make sense.

When the user right clicks on the grid funciton fnUpload is called This function SHOULD show the window DisplayUpload that has the upload panel i borrowed from cnx called UploadPanel

When i run my app I get two messages that says

Uncaught Type Error Cannot read property 'events' of undefined
Uncaught Type Error Cannot call method 'getvaluee' of null

When I use chrome I click on each error in the console it shows me some script thats not my code so I dont know where the error is located. below is my code for the function, window, and panel. Doesnt Type Error mean that I misspelled something but I dont think I did.

// Function to display the Photo image of the Item # depending on the Item # you clicked on in the grid

function fnUpload() {
            currentRecord = Ext.getCmp('mainINR0185Grid').getSelectionModel().getSelected();
            var getItem = currentRecord.get('IT_ITEM');
            var getImage = currentRecord.get('IT_PATH');
            // Ext.getCmp('UploadPanel').show();
            DisplayUpload.show();
    }

// window to display PO detail

var DisplayUpload = new Ext.Window({
        closeAction: 'hide',
        closable: false,
        draggable: true,
        layout: 'fit',
        modal: true,
        title: 'Upload a File',
        items: [UploadPanel],
        height: 500,
        width: 600,
        // x:25,
        // y:25,
        resizable: true
    });


// form panel for selecting file to upload
    var UploadPanel = new Ext.FormPanel({
        id: 'UploadPanel',                                                                                                
        fileUpload: true, // !important: must specify that this form is for a file upload
        // width: 500,
        x: 1,
        y: 1,
        frame: true,
        title: 'File Upload Form',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 35,
        labelAlign: 'right',
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'under'
        },
        // !important: sid, opt and pgm must be inserted into form as hidden fields so that they get passed as variables on form submission
        items: [{
            xtype: 'hidden',
            id: 'sid',
            value: sid
        }, {
            xtype: 'hidden',
            id: 'opt',
            value: opt
        }, {
            xtype: 'hidden',
            id: 'pgm',
            value: 'exupload1' // !important: you must specify the name of your program to call to retrive the file
        }, {
            // !important: this field definition defines the file selection field
            // it must have an id of "file" and it must be specified last in the list of fields on the form
            xtype: 'fileuploadfield',
            id: 'file',
            emptyText: 'Click Browse to select file',
            fieldLabel: 'File',
            buttonCfg: {
                text: 'Browse...',
                iconCls: 'magnifier'
            }
        }],
        buttons: [{
            text: 'Upload',
            iconCls: 'arrow_up',
            handler: function(){
                if(UploadPanel.getForm().isValid()){
                    UploadPanel.getForm().submit({
                        url: 'vvupload.pgm',
                        waitMsg: 'Uploading file...',
                        success: function(UploadPanel, o){
                            Ext.Msg.show({
                                title: 'Success',
                                msg: o.result.msg,
                                buttons: Ext.Msg.OK,
                                icon: Ext.MessageBox.INFO
                            });
                        },
                        failure: function(UploadPanel, o) {
                            Ext.Msg.show({
                                title: 'Failure',
                                msg: o.result.msg,
                                buttons: Ext.Msg.OK,
                                icon: Ext.MessageBox.ERROR
                            });
                        }
                    });
                }
            }
        },{
            text: 'Clear',
            iconCls: 'cancel',
            handler: function(){
                // UploadPanel.getForm().reset();
                DisplayUpload.hide();
            }
        }]
    });

[eweiler]

You either made a typo in your error code or you have too many E in getValuee.

You should define UploadPanel before adding it as an item in the DisplayUpload window.

[sean.lanktree]

Please wrap your code in code tags going forward...I just edited your post and wrapped them.

When i run my app I get two messages that says

Uncaught Type Error Cannot read property 'events' of undefined
Uncaught Type Error Cannot call method 'getvaluee' of null

When you say run your app...do you mean on startup or when you do something within the app? If so, at what point?

"getvaluee" is not a method that would exist. I think you are trying to call "getValue" rather so I would check that.

[brianj22]

Please wrap your code in code tags going forward...I just edited your post and wrapped them.



When you say run your app...do you mean on startup or when you do something within the app? If so, at what point?

"getvaluee" is not a method that would exist. I think you are trying to call "getValue" rather so I would check that.

Actually it says this

Uncaught TypeError: Cannot read property 'events' of undefined ext-all.js:7
Uncaught TypeError: Cannot call method 'getValue' of null ext-all.js:7

[brianj22]

Please wrap your code in code tags going forward...I just edited your post and wrapped them.



When you say run your app...do you mean on startup or when you do something within the app? If so, at what point?

"getvaluee" is not a method that would exist. I think you are trying to call "getValue" rather so I would check that.

When I say run my app I mean on startup. The app never displays a screen

[brianj22]

Please wrap your code in code tags going forward...I just edited your post and wrapped them.



When you say run your app...do you mean on startup or when you do something within the app? If so, at what point?

"getvaluee" is not a method that would exist. I think you are trying to call "getValue" rather so I would check that.

I checked my code nothing says getvaluee

[sean.lanktree]

Hard to diagnose without all of the source.

[brianj22]

This issue has been resolved. The problem I was having was in my HTML script. What I wanted to do was put a Panel inside a window. I was defining the Panel after I was defining the Window that the panel was going to be in. Once we flipped the code around so the panel was defined before the window everything worked fine.

The only issue I have left is passing the Item # from the grid to the backend program that uploads the file. The reason I need to do this is once the user uploads the JPG image the name of that file needs to go into a field in a database on the ISERIES. The code for the panel is such

// form panel for selecting file to upload
var fp = new Ext.FormPanel({
id: 'fp',
fileUpload: true, // !important: must specify that this form is for a file upload
width: 500,
frame: true,
title: 'File Upload Form',
autoHeight: true,
// bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 35,
labelAlign: 'right',
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'under'
},
// !important: sid, opt and pgm must be inserted into form as hidden fields so that they get passed as variables on form submission
items: [{
xtype: 'hidden',
id: 'sid',
value: sid
}, {
xtype: 'hidden',
id: 'opt',
value: opt
}, {
xtype: 'hidden',
id: 'pgm',
value: 'exupload2' // !important: you must specify the name of your program to call to retrive the file
}, {
// !important: this field definition defines the file selection field
// it must have an id of "file" and it must be specified last in the list of fields on the form
xtype: 'fileuploadfield',
id: 'file',
emptyText: 'Click Browse to select file',
fieldLabel: 'File',
buttonCfg: {
text: 'Browse...',
iconCls: 'magnifier'
}
}],
buttons: [{
text: 'Upload',
iconCls: 'arrow_up',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
url: 'vvupload.pgm',
waitMsg: 'Uploading file...',
success: function(fp, o){
Ext.Msg.show({
title: 'Success',
msg: o.result.msg,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.INFO
});
},
failure: function(fp, o) {
Ext.Msg.show({
title: 'Failure',
msg: o.result.msg,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}
}
},{
text: 'Cancel',
iconCls: 'cancel',
handler: function(){
fp.getForm().reset();
windowUpload.hide();
}
}]
});

Keep in mind this panel is virtually the same as the Upload Example in valence 2.2. If I am reading this correctly the panel calls VVUPLOAD but then that program calls whatever is in the value of PGM which in this case is EXUPLOAD2. This program is a clone of EXUPLOAD1 but I changed what folder in the IFS system the images will be downloaded too.

Anyway, can I pass a variable to the back end the way this panel is calling the backend programs? The function that displays the window with the panel in it is this

// Function to display the Photo image of the Item # depending on the Item # you clicked on in the grid
function fnUpload() {
currentRecord = Ext.getCmp('mainINR0185Grid').getSelectionModel(). getSelected();
var getItem = currentRecord.get('IT_ITEM');
globalItemNumber = currentRecord.get('IT_ITEM');
windowUpload.show();
}

[eweiler]

Upload utilizes basic html form submission techniques, so adding hidden fields (like sid, opt, and pgm in your code) will be the variables that get submitted. You can update those fields if they aren't always the same value.

Make sure to leave the image field as the last on the form.

[eweiler]

I meant to include this informational page about html form submission:

http://www.w3schools.com/html/html_forms.asp