1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    31
    Vote Rating
    0
    priyapratheep is on a distinguished road

      0  

    Default show hide Ext.FormPanel items

    show hide Ext.FormPanel items


    Hi I want to dynamically show and hide item of Ext.FormPanel

    Code:
    var form = new Ext.FormPanel({
          labelWidth: 200, // label settings here cascade unless overridden
        bodyStyle:'padding:5px 5px 0',
        width: 650,
        defaults: {width: 320},
        items:
        [
         projectComboBox,
         { {                     
            xtype: 'combo',
            id:'reporttypecombobox',
            fieldLabel: 'Report Type',
                    name: 'reporttype',
                    store:reporttypestore,
                    width: 320,
                    displayField:'reporttype',
                    valueField:'reportabbr',
                    typeAhead: true,
            mode: 'local',
            allowBlank: false,
            triggerAction: 'all',
             emptyText:'Select a report type...',
             selectOnFocus:true,
            listClass: 'x-combo-list-small',
            listeners:{
                'change': function(){                        
                    report_type=this.getValue();    
                    if(report_type=='ACTUAL1'){
                             Ext.getCmp('labourHour').hide();
                    }else if(report_type=='ACTUAL2'){
                               Ext.getCmp('labourHour').show();
                           }
                },{
            xtype:'numberfield',
            id: 'labourHour',
            name: 'labourHour',
                trackLabels:true,
            fieldLabel: 'Budget (Labour Hour)',
            emptyText:'0'
        }
    I searched and found a lot but failed to find the solution
    In the above piece of code i want to show and hide the field labourHour, but i can only hide the text area not the label.

    http://www.sencha.com/forum/showthre...den-Text-Field and not working for me. I am using extjs 3.x

    Also i tried trackLabels:true and Ext.layout.FormLayout.prototype.trackLabels = true;


    Ext.getCmp("props_answer").getEl().show(); give problem with getEl
    Last two days i am trying to find a solution. Is there any problem with my code ?

    Anybody please give me your valuable suggestions
    thanks and advance

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Code:
    Ext.getCmp('labourHour').hide();

  3. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi Priyapratheep,

    See this sample code for hide/show of form component.
    http://jsfiddle.net/maneeshgo/zLzWz/1/
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    31
    Vote Rating
    0
    priyapratheep is on a distinguished road

      0  

    Default


    willigogs
    I already tried that , but only text area is hiding label can't

    sword-it
    Thanks a lot for answering but,
    when I try your code I am getting error of "TypeError: Ext.create is not a function".The portion in my code

    Code:
    var form = new Ext.FormPanel({
                    labelWidth: 200, // label settings here cascade unless overridden
                    bodyStyle:'padding:5px 5px 0',
                    width: 650,
                    defaults: {width: 320},
                     items:
                                 [
    is differ from your
    Code:
    Ext.create('Ext.FormPanel', {
        width: 500,
        title: 'Parent Panel',
    In our project we are using var form = new Ext.FormPanel like this to create formpanel.

    My whole portion of code is
    Code:
    var form = new Ext.FormPanel({
          labelWidth: 200, // label settings here cascade unless overridden
        bodyStyle:'padding:5px 5px 0',
        width: 650,
        defaults: {width: 320},
        items:
        [
         projectComboBox,
         {                     
            xtype: 'combo',
            id:'periodcombobox',
            fieldLabel: 'Period (Current Financial Year)',
            name: 'periodcode',
            store: periodStore,
            width: 320,
            displayField:'displayValue',
            valueField:'id',
            typeAhead: true,
            mode: 'local',
            allowBlank: false,
            triggerAction: 'all',
             emptyText:'Select a period...',
             selectOnFocus:true,
            listClass: 'x-combo-list-small',
            listeners:{
                'change': function(){                        
                    period=this.getValue();    
                }
            }                        
        },{
                    xtype: 'combo',
                    id: 'reporttypecombobox',
                    fieldLabel: 'Report Type',
                    name: 'reporttype',
                    store: ['test1', 'test2'],
                    listeners: {
                        'change': function () {
                            report_type = this.getValue();
                            if (report_type == 'test1') {
                                Ext.getCmp('labourHour').hide();
                            } else if (report_type == 'test2') {
                                Ext.getCmp('labourHour').show();
                            }
                        }
                    }
                },{                     
            xtype: 'combo',
            id:'viewtypecombobox',
            fieldLabel: 'View Type',
            name: 'viewtype',
            store:viewtypestore,
            width: 320,
            displayField:'viewtype',
            valueField:'viewabbr',
            typeAhead: true,
            mode: 'local',
            allowBlank: false,
            triggerAction: 'all',
             emptyText:'Select a view type...',
             selectOnFocus:true,
            listClass: 'x-combo-list-small',                         
            listeners:{
                'change': function(){    
                    view_type=this.getValue();                    
                }
            }              
        }, {
          xtype: 'textfield',
            id: 'labourHour',
            name: 'labourHour',
            trackLabels: true,
            fieldLabel: 'Budget (Labour Hour)',
            emptyText: '0'
        },{
            xtype:'numberfield',
            id: 'labourCost',
            name: 'labourCost',
            fieldLabel: 'Budget (Labour Cost)',
            emptyText:'0'
        },{
            xtype:'numberfield',
            id: 'icoCost',
            name: 'icoCost',
            fieldLabel: 'Budget (Inter-co purchase)',
            emptyText:'0'
        },{
            xtype:'numberfield',
            id: 'subconCost',
            name: 'subconCost',
            fieldLabel: 'Budget (Other sub-contract)',
            emptyText:'0'
        },{
            xtype:'numberfield',
            id: 'othPur',
            name: 'othPur',
            fieldLabel: 'Budget (Other Purchases)',
            emptyText:'0'
        },{
            xtype:'numberfield',
            id: 'sales',
            name: 'sales',
            fieldLabel: 'Budget (Sales)',
            emptyText:'0'
        }
        ],
        buttons:[{
            text: 'Generate Report',
            id : 'btnGenerateReport',
            //cls:'x-btn-text-icon',       
            handler :function(){
            var url;
            
            if(project_id.length==0 || project_id =='Select a project...')
                   Ext.MessageBox.alert('Error','Please select a project.');
                       
            else if(period.length==0 || period=='Select a period...')
                Ext.MessageBox.alert('Error','Please select a period.');
            
            else if(report_type.length==0 || report_type=='Select a report type...')
                Ext.MessageBox.alert('Error','Please select a report type.');
            
            else if(view_type.length==0 ||view_type=='Select a view type...'){
                Ext.MessageBox.alert('Error','Please select a view type.');}
            else{
                 var messageBox = Ext.MessageBox.show({
                    msg: 'Please wait. Checking Project in Access Dimension...',
                    progressText: 'Checking Project in Access Dimension...',
                    width:300,
                    wait:true,
                    waitConfig: {interval:200}
                });
                
                Ext.Ajax.request({
                url : checkADProjectPath,
                params:{projectcode:project_code_display},
                method: 'POST',
                success: function ( result, request ){
                    messageBox.hide();
                        
                    var msgArr=(result.responseText).split('|');
                    if(msgArr[0]=="Successful"){
                        Ext.Msg.confirm('Confirm?', msgArr[1] + "The selected project is valid in Access Dimension.<br> Are you sure to generate the report?",function(btn, text){
                            if (btn == 'yes'){    
                                      
                                if(report_type=='ACTUAL1'){
                                    url =  generateProjectReportPath;
                                         url +="?project_id=" + project_id;
                                     url +="&period="+period;
                                     url +="&report_type="+report_type;                   
                                      url +="&view_type="+view_type;
                                       url +="&login_id="+login_id;
                                    document.location = url;
                                }else if(report_type=='ACTUAL2'){                                   
                                    url =  generateProjectReportPath;
                                         url +="?project_id=" + project_id;
                                     url +="&period="+period;
                                     url +="&report_type="+report_type;                   
                                         url +="&view_type="+view_type;
                                         url +="&budget_labour_hour="+document.getElementById('labourHour').value;
                                         url +="&budget_labour_cost="+document.getElementById('labourCost').value;
                                         url +="&budget_ico_cost="+document.getElementById('icoCost').value;
                                         url +="&budget_subcon_cost="+document.getElementById('subconCost').value;
                                         url +="&budget_oth_purchase_cost="+document.getElementById('othPur').value;
                                         url +="&budget_sale="+document.getElementById('sales').value;
                                         url +="&login_id="+login_id;
                                    document.location = url;
                                }
                              }
                          })    
                    }
                    else{
                        Ext.Msg.alert(msgBoxTitle,'The selected project is not created or closed in Access Dimension.<br> It cannot be proceed to generate the report.'); 
                    }
                },
                failure: function ( result, request){
                    Ext.Msg.alert(msgBoxTitle,'Unable to check outstanding Timesheet. Please contact Administrator if problem persists.'); 
                }
            });            
            } 
            
            }//HANDALER FUCNTION
                
           }] 
       
    });  
    
    
    ////// MAIN PANEL /////
    var projectReportMainPanel = new Ext.Panel({
        id: 'projectReportMainPanel',
        frame: true,
        border: true,
        title: 'Project Report',
        layout:'column',
        defaults: { bodyStyle:'font-size:11px; padding: 2px;' },
        width: 700,
        items:[{
            items: [form],
            columnWidth: 1.0
        }]
    });
    
    
    ////////////////////////////////////////////////////////////////////////


    Can you please suggest me what to do with var form = new Ext.FormPanel how can i hide both label and test.Now I can able to hide text area not label...

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    31
    Vote Rating
    0
    priyapratheep is on a distinguished road

      0  

    Default


    Finally I got...

    I use
    Code:
    Ext.override(Ext.layout.FormLayout, {    renderItem : function(c, position, target){        if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){            var args = [                   c.id, c.fieldLabel,                   c.labelStyle||this.labelStyle||'',                   this.elementStyle||'',                   typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,                   (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),                   c.clearCls || 'x-form-clear-left'             ];            if(typeof position == 'number'){                position = target.dom.childNodes[position] || null;            }            if(position){                c.formItem = this.fieldTpl.insertBefore(position, args, true);            }else{                c.formItem = this.fieldTpl.append(target, args, true);            }            c.actionMode = 'formItem';            c.render('x-form-el-'+c.id);            c.container = c.formItem;            c.actionMode = 'container';        }else {            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);        }    }});
    and use Ext.getCmp('labourHour').hide(); and Ext.getCmp('labourHour').show(); to show and hide

    now can able to hide both label and text field..

Thread Participants: 2

Tags for this Thread