Results 1 to 2 of 2

Thread: Reset Field in Fieldset

  1. #1
    Sencha User
    Join Date
    Oct 2015
    Posts
    1

    Default Answered: Reset Field in Fieldset

    how to reset field in Travel Details fieldset ?

    this is my form
    fieldset reset.PNG

    And this one my code
    Code:
    /**
     * Author : Tony. Fajaryansyah
     * Email : [email protected]
     */
    Ext.define('Request.view.CreateRequestPanel',{
        extend: 'Ext.form.Panel',
        alias: 'widget.CreateRequestPanel',
        requires: [
                   'Ext.form.FieldContainer',
                   'Ext.form.FieldSet',
               ],
        initComponent:function(){
            Ext.apply(this, 
            {
                bodyPadding: 10,
                id:'CreateRequestPanel',
                items: [{
                    xtype: 'fieldset',
                    title: "Employee's Particular",
                    items:[{
                        defaults: {
                            width: '100%',
                            readOnly:true,
                            xtype: 'textfield',
                            flex: 1,
                            labelAlign: 'top',
                        },
                        xtype: 'form',
                        layout: 'hbox',
                        style: 'margin-bottom: 10px',
                        items: [{
                            fieldLabel: 'Name', 
                            name: 'name',
                            id: 'name',
                        },{
                            style: 'margin-left: 10px',
                            fieldLabel: 'NIK',  
                            name: 'nik',
                            id: 'nik',
                        }]
                    },{
                        defaults: {
                            width: '100%',
                            readOnly:true,
                            xtype: 'textfield',
                            flex: 1,
                            labelAlign: 'top',
                        },
                        xtype: 'form',
                        layout: 'hbox',
                        style: 'margin-bottom: 10px',
                        items: [{
                            fieldLabel: 'Position',  
                            name: 'joblabel',
                            id: 'joblabel',
                        },{
                            style: 'margin-left: 10px',
                            fieldLabel: 'Department',  
                            name: 'department',
                            id: 'department',
                        }]
                    }]
                },{
                    xtype: 'fieldset',
                    title: "Travel Details",
                    id:'fieldsetTravelDetails',
                    defaults: {
                        width: '100%',
                        flex: 1,
                        labelAlign: 'top',
                        allowBlank : false
                    },
                    items:[{
                        defaults: {
                            width: '100%',
                            xtype: 'datefield',
                            flex: 1,
                            labelAlign: 'top',
                            allowBlank : false,
                        },
                        xtype: 'form',
                        layout: 'hbox',
                        style: 'margin-bottom: 10px',
                        items: [{
                            fieldLabel: 'Depature Date', 
                            name: 'depature_date',
                            emptyText:'Select a Date...',
                        },{
                            style: 'margin-left: 10px',
                            fieldLabel: 'Return Date',  
                            name: 'return_date',
                            emptyText:'Select a Date...',
                        }]
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Destination',  
                        name: 'destination',
                        emptyText:'Input Your Destination...',
                    },{
                        xtype:'combobox',
                        multiSelect: true,
                        fieldLabel: 'Category',  
                        name: 'category',
                        store: 'Request.store.CategoryStore',
                        valueField: 'id',
                        displayField: 'description',
                        queryMode: 'local',
                        emptyText:'Select a Category...',
                    },{
                        xtype: 'fieldset',
                        title: "Cost Code",
                        border: false,
                        defaults: {
                            width: '100%',
                            flex: 1,
                            labelAlign: 'top',
                            allowBlank : false
                        },
                        items:[{
                            defaults: {
                                width: '100%',
                                xtype: 'textfield',
                                flex: 1,
                                labelAlign: 'top',
                                allowBlank : false
                            },
                            xtype: 'form',
                            layout: 'hbox',
                            //style: 'margin-bottom: 10px',
                            items: [{
                                xtype:'combobox',
                                store: 'Request.store.ProjectStore',
                                valueField: 'id',
                                displayField: 'description',
                                queryMode: 'local',
                                emptyText:'Project',
                                name: 'cc_1',
                            },{
                                fieldLabel: '', 
                                style: 'margin-left: 10px',
                                name: 'cc_2',
                                id: 'cc_2',
                                listeners:{
                                    change: function(field, newValue, oldValue){
                                        field.setValue(newValue.toUpperCase());
                                    }
                                 }
                            },{
                                style: 'margin-left: 10px',
                                fieldLabel: '', 
                                name: 'cc_3',
                                id: 'cc_3',
                                listeners:{
                                    change: function(field, newValue, oldValue){
                                        field.setValue(newValue.toUpperCase());
                                    }
                                 }
                            },{
                                style: 'margin-left: 10px',
                                fieldLabel: '',  
                                name: 'cc_4',
                                id: 'cc_4',
                                value:'7002',
                                readOnly:true,
                            }]
                        }]
                    },{
                        xtype:'textarea',
                        fieldLabel: 'Description',
                        emptyText:'Describe Your Travel...',
                        name: 'description',
                        allowBlank : false
                    }]
                }],
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    ui: 'footer',
                    items: [{
                            xtype: 'button',
                            itemId: 'btnCreateCancel',
                            text: 'Cancel',
                        },'->',{
                            xtype: 'button',
                            itemId: 'btnCreateSave',
                            text: 'Save',
                        }]
                    }],
            }),
            
            this.callParent(arguments);
            var RequesterDataStore = Ext.getStore('Request.store.RequesterDataStore');
            RequesterDataStore.each(function(rec){
                Ext.getCmp('name').setValue(rec.data.name);
                Ext.getCmp('nik').setValue(rec.data.nik);
                Ext.getCmp('joblabel').setValue(rec.data.joblabel);
                Ext.getCmp('department').setValue(rec.data.label);
                //console.log(rec.data.name);
            });
            
        },
        
        listeners: {
            rowcontextmenu: function(tree, record, tr, index, event){
                console.log('here');
                event.stopEvent(); 
                // this == gridpanel
                var menu = this.myContextMenu ? 
                    this.myContextMenu :
                    Ext.create('Ext.menu.Menu', {
                            items: [{
                            text: 'Show True',
                            scope: this,
                            handler: function() {
                                Ext.Msg.alert('Status', 'Changes saved successfully.');
                            }
                        }]
                    });
                this.myContextMenu = menu;
                menu.showAt(event.getXY());
            }
        },
    });
    Thanks for the advance

  2. Can you use the form reset() method or are you looking to just reset the fields in the fieldset?

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Can you use the form reset() method or are you looking to just reset the fields in the fieldset?

Similar Threads

  1. Replies: 4
    Last Post: 7 Jun 2013, 5:47 AM
  2. Fieldset reset / Form reset
    By Michi_72 in forum Ext: Discussion
    Replies: 3
    Last Post: 6 Nov 2012, 7:04 AM
  3. Replies: 0
    Last Post: 15 Apr 2011, 6:13 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
  •