Issues in ExtJS Formpanel with Spring MVC-Urgent Please

[Arunprasath]

Iam using Extjs FormPanel with Spring Framework.I need to prepopulate value in a textbox of the FormPanel in formView Page.While I populate the command Object in the formbacking method of spring.It is not binding as a result I could not see the textbox value in the formView page.

But the value which I enter in the textbox during the form submission binds with the command Object.So does ExtJS support Spring MVC.So is there a attribute provided on FormPanel of Extjs to mention the commandobject name.

My FormPanel Code and Controller code are as below:

FormPanel:

Ext.onReady(function() {
    var doSubmit = function() {
        simple.form.submit({
            success: function() {
                window.location = "testForm.htm";
            }
        });
    };
    Ext.QuickTips.init(); // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();
    var store = new Ext.data.SimpleStore({
        fields: ['abbr', 'state', 'nick'],
        data: [['AL', 'Alabama', 'The Heart of Dixie'], ['AK', 'Alaska', 'The Land of the Midnight Sun'], ['AZ', 'Arizona', 'The Grand Canyon State'], ['AR', 'Arkansas', 'The Natural State']]
    });
    function showImage() {
        var element = Ext.get('file');
        var element1 = Ext.get('imagebox');
        element1.dom.src = element.dom.value;
    }
    /*
* ================ Form 2 =======================
*/
    bd.createChild({
        tag: 'h2',
        html: 'Form 2 - Adding fieldsets'
    });
    var simple = new Ext.FormPanel({
        labelWidth: 75,
        // label settings here cascade unless overridden
        url: 'testForm.htm',
        enctype: 'multipart/form-data',
        frame: true,
        fileUpload: true,
        title: 'Simple Form with FieldSets',
        bodyStyle: 'padding:8px 8px 5',
        width: 450,
        items: [{
            xtype: 'fieldset',
            collapsible: true,
            title: 'Personal Information',
            autoHeight: true,
            defaults: {
                width: 210
            },
            defaultType: 'textfield',
            collapsed: false,
            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                id: 'first',
                allowBlank: false
            },
            {
                fieldLabel: 'Last Name',
                name: 'last'
            },
            {
                fieldLabel: 'Company',
                name: 'company'
            },
            {
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email'
            },
            {
                fieldLabel: 'PhotoUpload',
                name: 'file',
                id: 'file',
                inputType: 'file'
            },
            {
                fieldLabel: 'Select State',
                name: 'state',
                xtype: 'combo',
                store: store,
                displayField: 'state',
                typeAhead: true,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                emptyText: 'Select a state...',
                selectOnFocus: true
            },
            new Ext.form.DateField({
                fieldLabel: 'Date',
                name: 'dob'
            })]
        },
        {
            xtype: 'box',
            name: 'imagebox',
            id: 'imagebox',
            width: 160,
            height: 160,
            region: 'east',
            autoEl: {
                tag: 'img',
                src: '',
                width: 87,
                height: 124
            }
        },
        {
            xtype: 'fileuploadfield',
            id: 'fileUpload',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'fileUpload',
            buttonCfg: {
                text: '',
                iconCls: 'upload-icon'
            }
        },
        {
            xtype: 'button',
            text: 'Show Photo',
            name: 'Show Photo',
            handlerhowImage
        },
        {
            xtype: 'fieldset',
            title: 'Phone Number',
            collapsible: true,
            autoHeight: true,
            defaults: {
                width: 210
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Home',
                name: 'home',
                value: '(888) 555-1212'
            },
            {
                fieldLabel: 'Business',
                name: 'business'
            },
            {
                fieldLabel: 'Mobile',
                name: 'mobile'
            },
            {
                fieldLabel: 'Fax',
                name: 'fax'
            }]
        }],
        buttons: [{
            text: 'Save',
            type: 'submit',
            id: 'btnSubmit',
            handler: doSubmit
        },
        {
            text: 'Cancel'
        }]
    });
    simple.render(document.body);
});

My Controller code:

package org.appfuse.web;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.validation.BindException;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.support.ByteArrayMultipartFileEditor;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.SimpleFormController;

public class TestFormController extends SimpleFormController {

public TestFormController() {
super();
setCommandClass(FileUpload.class);
}

protected Object formBackingObject(HttpServletRequest request)
throws Exception {
FileUpload fp=new FileUpload();
fp.setFirst("Balu");
fp.setCompany("cap");--> see here I set the firstname and company.but why it is not auto populating.Please explain me with samples...please
return fp;
}


protected void initBinder(HttpServletRequest request,
ServletRequestDataBinder binder)
throws ServletException {
binder.registerCustomEditor(byte[].class,
new ByteArrayMultipartFileEditor());
}



protected ModelAndView onSubmit(HttpServletRequest request,HttpServletResponse response, Object command, BindException errors)
throws Exception {

FileUpload fp=(FileUpload)command;
System.out.println(fp.getFirst());
MultipartHttpServletRequest multipartRequest =
(MultipartHttpServletRequest) request;
CommonsMultipartFile file =
(CommonsMultipartFile) multipartRequest.getFile("file");
return new ModelAndView(getSuccessView(),"fp",fp);
}


}


Is ExtJs provide support for SpringMVC.If So how to declare our commandobject in FormPanel of Extjs

Your Quick answers or clarification will be appreciated.

Animal,
I think I have posted my question right this time.

Thanks
Arun

[conorarmstrong]

Please repost with formatted code - see:

http://extjs.com/learn/Ext_Forum_Hel..._code_properly

[Arunprasath]

Waiting for clue for the issue

Thanks in Advance
Arun

[Arunprasath]

Please help me to solve the above issue.I have posted my problem clearly above.
I would appreciate people helping me.

Thanks
Arunprasath

[conorarmstrong]

I don't know much about Spring MVC but from the js code you've provided it doesn't look like you're ever calling the load method on your form.

Your need a line like:

simple.load();

possibly with a config object to specify url, parameters etc.

[jiajiafucs]

xtype:'fileuploadfield',
buttonText:' 浏  览  ',
fieldLabel:'文件位置',
height:20,
name:'file',
anchor:'100%'}]