Results 1 to 7 of 7

Thread: Error Messages Quicktips

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2007
    Location
    Z
    Posts
    119

    Question Error Messages Quicktips

    Hello everybody

    My question is how to show Error Messages with Quicktips for a Textfield
    in a Formpanel?

    In the submit action I've a handler with a request for the save. On success it should save and on failure, it should
    display the Error Messages witch are in the jsonresponse.

    The manual I've read is http://extjs.com/learn/Manual:Forms:Result_Format

    What I'm doing wrong? Could somebody help me please ?

    The Javascriptcode is:

    function loadUserDialog()
    {
    var panel = $('userpanel');
    //Check ob wir schon ein userpanel haben
    if(!panel){
    //datas = {"values":[{"first":"hop","last":"nom2"}]};

    var cstore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
    url: '/index/countries'
    }),
    reader: new Ext.data.JsonReader(
    { root: 'results'},
    [{name:'sname', mapping: 'sname'},
    {name:'name', mapping:'name'}]
    ),
    sortInfo:{field: 'name', direction: "ASC"}
    });


    var tstore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
    url: '/index/timezone'
    }),
    reader: new Ext.data.JsonReader(
    { root: 'results'},
    [{name:'gmt', mapping: 'gmt'},
    {name:'timezone', mapping:'timezone'}]
    ),
    sortInfo:{field: 'timezone', direction: "ASC"}
    });


    Ext.QuickTips.init();
    Ext.QuickTips.enable();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var userpanel = new Ext.FormPanel({
    labelWidth: 75, // label settings here cascade unless overridden
    url:'/index/countries',
    id: 'userpanel',
    renderTo:'content',
    frame:true,
    title: 'User Information: <?php echo $this->escape($this->username);?>',
    bodyStyle:'padding:5px 5px 0',
    width: 400,
    defaults: {width: 230},
    defaultType: 'textfield',
    items: [{
    fieldLabel: 'First Name',
    name: 'first',
    allowBlank:false,
    valueField:'name',
    id:'firstn'
    },{
    fieldLabel: 'Last Name',
    name: 'last',
    id:'lastn'
    },
    {
    fieldLabel: 'Company',
    name: 'company'
    },{
    fieldLabel: 'Street',
    name: 'street'
    },{
    fieldLabel: 'Zip Code',
    name: 'plz'
    },{
    fieldLabel: 'City',
    name: 'city'
    }, combobox = new Ext.form.ComboBox({
    store:cstore,
    fieldLabel: 'Country',
    id:'countrycombo',
    width:55,
    maxHeight:90,
    editable:false,
    name: 'country',
    displayField: 'name',
    valueField: 'sname',
    forceSelection:true,
    cls: 'formpanel',
    mode:'local',
    triggerAction:'all',
    listClass: 'x-combo-list-small'
    }),{
    fieldLabel: 'Phone',
    name: 'phone'
    },{
    fieldLabel: 'Fax',
    name: 'fax'
    }, {
    fieldLabel: 'Email',
    name: 'email',
    vtype:'email'
    }, cbotimezone = new Ext.form.ComboBox({
    store:tstore,
    fieldLabel: 'Timezone',
    id:'timezone',
    width:500,
    listwidth:500,
    maxHeight:90,
    editable:false,
    name: 'tzone',
    displayField: 'timezone',
    valueField: 'gmt',
    forceSelection:true,
    cls: 'formpanel',
    mode:'local',
    triggerAction:'all',
    listClass: 'x-combo-list-small'
    })
    ],

    buttons: [{
    text: 'Save',
    handler: function(){
    userpanel.getForm().waitMsgTarget= Ext.get('center_fit');
    userpanel.load({
    url: 'index/saveUserdialog', waitMsg: 'Saving Data...',
    success: function(env){
    alert ('success');
    Ext.MessageBox.alert('Success', 'Data successfully entered.');
    },
    failure: function(form, action){

    }
    });
    }
    },{
    text: 'Cancel',
    handler: function (){
    var upanel = $('userpanel');
    upanel.remove();
    }
    }]
    });
    cstore.load();
    tstore.load();
    userpanel.getForm().load({url:'/index/valuesUserdialog', waitMsg:'Loading ....'});
    userpanel.render();
    combobox.setValue($('sname'),true);
    cbotimezone.setValue($('gmt'),true);
    }
    };



    Jsonresponse:

    {"success": false, "errors": [ { "id": "firstn", "msg": "Field 1 Error Message" },{ "id": "lastn", "msg": "Field 2 Error Message" }]}

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    The errors section in your JSON response is wrong. See docs for an example.

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    135

    Default

    Hi Condor,

    Thanks for you reply, you mean like this:

    {
    success: false,
    errors: {
    clientCode: "Client not found",
    portOfLoading: "This field must not be null"
    }
    }

    this also not work, or we missunderstand, we have now the response from json in this format:

    { success: false, errors: { clientCode: "Client not found", timezone: "This field must not be null" }}

    am i right, that the text "This field must not be null" should be displayed in my form by the combobox timezone?

    thanks for you reply!!

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    No, the error keys should be the names of the fields and not the ids.

    ps. You probably want to set hiddenName instead of name for the ComboBox.

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    135

    Default

    Hi condor,

    Thanks again for your quick reply, but it looks like we don't see the way. Now the json response is this:
    { success: false, errors: {first: "Client not found", last: "This field must not be null" }}

    first and last are field names in the formpanel, but nothing is displayed why?

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    OK, I was wrong. You can also specify your errors as you originally did and you can also specify ids instead of names for fields.

    The actual problem (sorry I didn't see this earlier) is that you are using load instead of submit.

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2007
    Location
    Z
    Posts
    119

    Thumbs up Thanks

    Thanks a lot it works now

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •