Results 1 to 4 of 4

Thread: Presetting a field in Ext.form.Panel

  1. #1

    Default Answered: Presetting a field in Ext.form.Panel

    Hi!

    I have a web app that requires login. Once user enters its credentials and they're valid, his details (including user_id) are stored in a store called 'user'. This store has user_id field. This store contains exactly one record once the user logs in. I'd like to use this user_id value to set a value of one field in a form AddTask. Here are my futile attempts:

    Code:
    Ext.define('iTeleskop.view.main.AddTask', {
        extend: 'Ext.form.Panel',
        xtype: 'addtask',
    
        items: [
            {
                name: 'user_id',
                xtype: 'textfield',
                fieldLabel:'U?ytkownik',
                value: Ext.getStore('user').getAt(0).data.user_id, // that doesn't work
                ...
            },
            ...
        ],
    
        listeners: {
            beforerender: function(component, eOpts) {
                //this works
                var user_id = Ext.getStore('user').getAt(0).data.user_id;
    
                // This generates error: component.up(...) is undefined
                // component.up('form').findField('user_id').setValue(user_id);
    
                // This generates error: component.down(...) is null
                // component.down('form').findField('user_id').setValue(user_id);
            }
            
        }
    I have couple questions:
    1. Why Ext.getStore('user').getAt(0).data.user_id; works in beforerender, but doesn't in value: definition? I'm not sure if that's the best way to initialize the field, as initially the 'user' store is empty. It is populated with a single record once the user successfully completes his login procedure.

    2. What's the best listener to set such a value? user_id will never change until the user logs out.

    3. How can I access (and set) a 'user_id' field of the form in beforerender method?

    4. Why does this.up('form') expression works from within the buttons handlers, but component.up('form') or component.down('form') doesn't work from the beforerender callback?

    Complete code (without the changes above) is here. Thanks a lot for any suggestions. I'm still learning the basics of ExtJS.

  2. Quote Originally Posted by thomsongdn View Post
    1. Why Ext.getStore('user').getAt(0).data.user_id; works in beforerender, but doesn't in value: definition? I'm not sure if that's the best way to initialize the field, as initially the 'user' store is empty. It is populated with a single record once the user successfully completes his login procedure.
    You're trying to set the value on the class definition of your form panel. The store is probably not even available at this point. I would avoid setting the value on the class definition anyway.

    Quote Originally Posted by thomsongdn View Post
    2. What's the best listener to set such a value? user_id will never change until the user logs out.
    beforerender should suffice for what you're wanting to do.

    Quote Originally Posted by thomsongdn View Post
    3. How can I access (and set) a 'user_id' field of the form in beforerender method?
    You could get reference to the record in the store and load that record into the form to populate the fields (http://docs.sencha.com/extjs/6.0/6.0...hod-loadRecord)

    Quote Originally Posted by thomsongdn View Post
    4. Why does this.up('form') expression works from within the buttons handlers, but component.up('form') or component.down('form') doesn't work from the beforerender callback?
    The this scope of the button handler is the button itself. The button is a child of the form and therefore going up to get the form works. In your beforerender handler, component (or this) is the form panel instance, so going up or down from that will not find the form because it already is the form.

  3. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Quote Originally Posted by thomsongdn View Post
    1. Why Ext.getStore('user').getAt(0).data.user_id; works in beforerender, but doesn't in value: definition? I'm not sure if that's the best way to initialize the field, as initially the 'user' store is empty. It is populated with a single record once the user successfully completes his login procedure.
    You're trying to set the value on the class definition of your form panel. The store is probably not even available at this point. I would avoid setting the value on the class definition anyway.

    Quote Originally Posted by thomsongdn View Post
    2. What's the best listener to set such a value? user_id will never change until the user logs out.
    beforerender should suffice for what you're wanting to do.

    Quote Originally Posted by thomsongdn View Post
    3. How can I access (and set) a 'user_id' field of the form in beforerender method?
    You could get reference to the record in the store and load that record into the form to populate the fields (http://docs.sencha.com/extjs/6.0/6.0...hod-loadRecord)

    Quote Originally Posted by thomsongdn View Post
    4. Why does this.up('form') expression works from within the buttons handlers, but component.up('form') or component.down('form') doesn't work from the beforerender callback?
    The this scope of the button handler is the button itself. The button is a child of the form and therefore going up to get the form works. In your beforerender handler, component (or this) is the form panel instance, so going up or down from that will not find the form because it already is the form.
    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  4. #3
    Sencha Premium User jvandemerwe's Avatar
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    261
    Answers
    7

    Default

    Why using a store? I am using for this kind of things a singleton. Make a singleton called something like UserSession and once the user is logged in you can set and get the values from this singleton. See: http://www.enovision.net/extjs-singl...heavy-workers/

  5. #4

    Default

    tristanlee, thank you kindly. I was trying to set just a single field, not a whole record, so loadRecord() most likely would also load other fields. But your comments (especially the one about up, down and hierarchy) led me to the right solution. Thanks!

    jvandemerwe, I want to use a store, because I store there just user_id *for now*, but this will soon be extended into user preferences, so there will be many additional fields there. There will be a form where user will be able to adjust his preferences. I don't know maybe defining a store that will ever hold at most a single record is a bit overkill, but I do like how store can be accessed easily.

    Anyway, if anyone looks at this later and would wonder how I solved it, the code is here:
    Code:
    beforerender: function(component, eOpts) {
        var user_id = Ext.getStore('user').getAt(0).data.user_id;
        component.getForm().findField('user_id').setValue(user_id);
    }
    If you're interested, full code change is here.

Similar Threads

  1. [FIXED] Ext.field.Field styles in modern/theme-base/sass/src/form/Panel.scss
    By themightychris in forum Ext JS 6.x Bugs
    Replies: 1
    Last Post: 19 Jul 2015, 8:47 PM
  2. Replies: 1
    Last Post: 28 May 2012, 3:03 AM
  3. Replies: 2
    Last Post: 11 Jan 2012, 2:12 PM
  4. Replies: 0
    Last Post: 7 Apr 2008, 6:04 AM

Tags for this Thread

Posting Permissions

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