Results 1 to 3 of 3

Thread: how to instantiate a formpanel when the form is a docked item in extjs

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    80
    Answers
    1
    Vote Rating
    1
      0  

    Default how to instantiate a formpanel when the form is a docked item in extjs

    Very new to extjs 4.0. So i could be phrasing this incorrectly.

    I have a layout with a series of nested panels. One of these panels is a form panel which i intend to use loadRecord to fill with data. Most examples i've seen using something like the following to load the records.

    testForm.getForm().loadRecord(app.formStore);


    However you will see below that my formpanel is nested. So how do i load the form in order to load record


    title: 'Job Summary',
    items: [
    {
    xtype: 'form',
    id: 'formJobSummary',
    layout: {
    align: 'stretch',
    type: 'hbox'
    },
    bodyPadding: 10,
    title: '',
    url: '/submit.html',
    flex: 1,
    dockedItems: [
    {
    xtype: 'toolbar',
    flex: 1,
    dock: 'bottom',
    items: [
    {
    xtype: 'button',
    text: 'Submit'
    },
    {
    xtype: 'button',
    text: 'Cancel'
    }
    ]
    }
    ],
    items: [
    {
    xtype: 'panel',
    flex: 1,
    items: [
    {
    xtype: 'radiogroup',
    width: 400,
    fieldLabel: 'Job Type',
    items: [
    {
    xtype: 'radiofield',
    boxLabel: 'Fix Price'
    },
    {
    xtype: 'radiofield',
    boxLabel: 'Production'
    }
    ]
    },
    {
    xtype: 'textfield',
    fieldLabel: 'Quoted Price'
    },
    {
    xtype: 'textfield',
    fieldLabel: 'Client PO'
    },
    {
    xtype: 'textfield',
    fieldLabel: 'Job Quatity'
    },
    {
    xtype: 'textfield',
    fieldLabel: 'Files Over'
    },
    {
    xtype: 'textfield',
    fieldLabel: 'Previous JobId'
    },
    {
    xtype: 'textfield',
    fieldLabel: 'Estimate'
    }
    ]
    },
    {
    xtype: 'panel',
    flex: 1
    },
    {
    xtype: 'panel',
    layout: {
    align: 'stretch',
    type: 'hbox'
    },
    flex: 1
    }
    ]
    }
    ]
    },




  2. #2
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    67
    Answers
    6
    Vote Rating
    8
      0  

    Default

    Here is the code showing how to do this:

    Code:
    Ext.onReady(function(){
        
        Ext.tip.QuickTipManager.init();
        
        Ext.define('UserModel', {
            extend: 'Ext.data.Model',
            fields: ['first', 'last']
        });
    
        var user = Ext.create('UserModel', {
            first: 'Ajit',
            last: 'Kumar'
        });
        
        var form = Ext.create('Ext.form.Panel', {
            
            id: 'my-form',
            
            title: 'Simple Form',
            bodyPadding: 5,
            width: 350,
    
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
    
            // The fields
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank: false
            },{
                fieldLabel: 'Last Name',
                name: 'last',
                allowBlank: false
            }],
    
            // Reset and Submit buttons
            buttons: [{
                text: 'Reset',
                tooltip :  'my Button Tooltip Text',
                id : 'my-button ',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Submit',
                formBind: true, 
                disabled: true,
                handler: function() {
                   
                }
            }]
        });
        
        Ext.create('Ext.panel.Panel', {
            title: 'Panel',
            renderTo: Ext.getBody(),
            dockedItems: [form]
        });
        
        //access the form by id and set the value
        //var myform = Ext.getCmp('myform');
        //myform.loadRecord(user);
        //or
        //access the form, directly, and set the value
        form.loadRecord(user);    
        
    });
    regards
    Last edited by findajit; 9 Jan 2012 at 3:42 PM. Reason: added multiple ways to get the form instance and use it to load the values
    Learn all about Sencha Charts - Sencha Charts Essentials Book
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

  3. #3
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    67
    Answers
    6
    Vote Rating
    8
      0  

    Default Steps

    Following are the steps:
    1. Define a model with the fields
    2. Create an instance of the form panel
    3. Create an instance of the model with the specific data
    4. Get the handle to the instance of the form panel (either using Ext.getCmp() or up()/down()) and load the model instance using loadRecord()
    Learn all about Sencha Charts - Sencha Charts Essentials Book
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

Posting Permissions

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