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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."