1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    87
    Vote Rating
    0
    Abisha is on a distinguished road

      0  

    Default hide and show grid

    hide and show grid


    I am trying to show a grid when i click a purticular row of another one grid. I am setting hidden:true initially. But it is not showing after the click also. I tryed in several ways. But not works please help me to do this. My code is below
    PHP Code:
    var Type=[
              [
    'Employee'], ['Contractor'], ['Contact'], ['Requester']
              ];
    //var Employee={};
    //var con_type='';
    var grid_type={
                
    width:120,
                
    id:'add_type',
                
    xtype'grid',
                
    layout'fit',
                
    store: new Ext.data.SimpleStore({
                
    fields: [{name'type'}]
            }),
            
    columns: [
                {
    id:'type',header"Type"sortabletruedataIndex'type'width:100}
            ],
            
    stripeRowstrue,
                 
            
    listeners: {
                
    rowclick :function(gridrow){
            var 
    record this.getSelectionModel().getSelected();
              var 
    con_type=record.get('type');
             if(
    con_type=='Employee' || con_type=='Contractor')
             {
             
    Employee.show();
             } 
             else
             {
    alert('no');}
            
        },
                
    render: function(){
                    
    this.store.loadData(Type);
                }
            }
       };
                                           
    var 
    con_grid={
    xtype'grid',
    height:250,
    autoScroll:true,
    layout'fit',
    store: new Ext.data.SimpleStore({
    fields: [{name'name'},{name'contact_id'},{name'job_title'},{name'active'}]
    }),
    columns: [
    {
    id:'name',header"Name"sortabletruedataIndex'name'width:300},
    {
    id:'contact_id',header"Contact Id"sortabletruedataIndex'contact_id'width:200},
    {
    id:'job_title',header"Job title"sortabletruedataIndex'job_title'width:200},
    {
    id:'active',header"Active"sortabletruedataIndex'active'width:100}
    ],
    stripeRowstrue,
    listeners: {
    render: function(){ this.store.loadData(myData); }
                 }
    };

    var 
    Employee={
    hidden:true,
    id:'employee',
    title:'Craft',
    xtype'grid',
    height:150,
    width:120,
    autoScroll:true,
    layout'fit',
    store: new Ext.data.SimpleStore({
    fields: [{name'name'}]
    }),
    columns: [
    {
    id:'name1',header"Name"sortabletruedataIndex'name'width:100}
    ],
    stripeRowstrue,
    listeners: {
    render: function(){ this.store.loadData(myData); }
                 }
    };

    var 
    fn_contact=function(){
                   
    win = new Ext.Window({
                    
    title:title_contact,
                    
    layout      'form',
                    
    width       930,
                    
    height      500,
                    
    closeAction :'hide',
                    
    plain       true,
                    
    items: [{
                    
    xtype:'form',
                    
    frame:true,
                                
    //labelAlign:'top',
                                
    layout:'table',
                                
    layoutConfig : { columns 4  },
                                
                                
    items:[{
                                    
    width:260,
                                     
    layout:'form',
                                     
    labelStyle'font-family:arial; font-size:11px; color:#416AA3',
                                     
    labelWidth:80,
                                    
    //labelAlign:'top',
                                    
                                    
    items:[{
                                           
                                            
    xtype:'combo',
                                            
    width:150,
                                            
    height:20,
                                            
    allowBlankfalse,
                                            
    labelStyle'font-family:arial; font-size:11px; color:#416AA3',
                                            
    id:'rep_cen',
                                            
    name:'rep_cen',    
                                            
    displayField:'language',
                                            
    valueField:'language',
                                            
                                            
    store: new Ext.data.SimpleStore({
                                                 
    fields: ['lang_id''language'],
                                                 
    data Ext.exampledata.lang 
                                            
    }),
                                            
    fieldLabel:repair_center,
                                            
    mode:'local',
                                            
    triggerAction:'all',
                                            
    editablefalse,
                                            
    emptyText:'Select a Repair Center...'
                                            
    }]
                                    },{
                                    
    width:260,
                                     
    layout:'form',
                                     
    labelStyle'font-family:arial; font-size:11px; color:#416AA3',
                                     
    labelWidth:80,
                                    
    //labelAlign:'top',
                                    
                                    
    items:[{
                                           
                                            
    xtype:'combo',
                                            
    width:150,
                                            
    height:20,
                                            
    allowBlankfalse,
                                            
    labelStyle'font-family:arial; font-size:11px; color:#416AA3',
                                            
    id:'contact_search',
                                            
    name:'contact_search',    
                                            
    displayField:'language',
                                            
    valueField:'language',
                                            
                                            
    store: new Ext.data.SimpleStore({
                                                 
    fields: ['lang_id''language'],
                                                 
    data Ext.exampledata.lang 
                                            
    }),
                                            
    fieldLabel:search_by,
                                            
    mode:'local',
                                            
    triggerAction:'all',
                                            
    editablefalse,
                                            
    emptyText:'Name...'
                                            
    }]
                                    },{
                                     
                                     
    layout:'form',
                                    
    //labelAlign:'top',
                                    
    width:250,
                                     
    labelWidth:80,
                                    
    items:[{
                                            
    xtype:'textfield',
                                            
    fieldLabelsearch_value,
                                            
    labelStyle'font-family:arial; font-size:11px; color:#416AA3',
                                            
    //allowBlank: false,
                                            
    height:20,
                                            
    width:150,
                                            
    name'search_value'
                                            
                                           
    }]
                                    },{
                                    
    xtype'component',
                                    
    id:'search',
                                    
    autoEl: {tag'img'src'images/search_icon.gif'width:20height:20}
                                    }]
                    
                    
                    },{
                                    
                                    
    layout:'table',
                                    
    layoutConfig:{columns:2},
                                    
    items:[{                                
                                    
    xtype:'form',
                                    
    frame:true,
                                    
    cellCls:'td-east',
                                    
    items:[grid_type,Employee]
                                    },{
                                    
    cellCls:'td-east',
                                     
    xtype:'tabpanel',
                                     
    activeTab:0,
                                     
    items:[{
                                            
    title:'All'
                                            
    },{
                                            
    title:'A'
                                            
    },{
                                            
    title:'B'
                                            
    },{
                                            
    title:'C'
                                            
    },{
                                            
    title:'D'
                                            
    },{
                                            
    title:'E'
                                            
    },{
                                            
    title:'F'
                                            
    },{
                                            
    title:'G'
                                            
    },{
                                            
    title:'H'
                                            
    },{
                                            
    title:'I'
                                            
    },{
                                            
    title:'J'
                                            
    },{
                                            
    title:'K'
                                            
    },{
                                            
    title:'L'
                                            
    },{
                                            
    title:'M'
                                            
    },{
                                            
    title:'N'
                                            
    },{
                                            
    title:'O'
                                            
    },{
                                            
    title:'P'
                                            
    },{
                                            
    title:'Q'
                                            
    },{
                                            
    title:'R'
                                            
    },{
                                            
    title:'S'
                                            
    },{
                                            
    title:'T'
                                            
    },{
                                            
    title:'U'
                                            
    },{
                                            
    title:'V'
                                            
    },{
                                            
    title:'W'
                                            
    },{
                                            
    title:'X'
                                            
    },{
                                            
    title:'Y'
                                            
    },{
                                            
    title:'Z'
                                            
    }],
                                     
    tbar:[con_grid]
                                     }]
                                    },{
                                     
    xtype'grid',
                                     
    title:title_grid_myselection,
                                           
    height:120,
                                           
    autoScroll:true,
                                    
    layout'fit',
                                    
    store: new Ext.data.SimpleStore({
                                    
    fields: [{name'name'},{name'contact_id'},{name'job_title'},{name'active'}]
                                        }),
                                        
    columns: [
                               {
    id:'name',header"Name"sortabletruedataIndex'name'width:200},
                                {
    id:'job_title',header"Job title"sortabletruedataIndex'job_title'width:150},
                                {
    id:'work_phone',header"Work Phone"sortabletruedataIndex'job_title'width:150},
                                {
    id:'mobile_phone',header"Mobile Phone"sortabletruedataIndex'job_title'width:150},
                                {
    id:'repair_center',header"Repair Center"sortabletruedataIndex'job_title'width:150},
                                {
    id:'primary',header"Primary"sortabletruedataIndex'active'width:100}
                                    ],
                                    
    stripeRowstrue,
                                 
                                    
    listeners: {
                                
    render: function(){
                                    
    this.store.loadData(myData);
                                }
                            }
                                    }],
                    
    buttons:[{
                             
    text:'New',
                             
    id:'add_new'
                             
    },{
                             
    text:'Apply',
                             
    id:'add_apply'
                             
    },{
                            
    text:'Cancel',
                            
    id:'add_cancel'
                            
    }]
                });

    win.show();
    }; 

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Employee.show()? Employee is a config object, not a component!

    Either make Employee a new Ext.grid.GridPanel or locate the component using Ext.getCmp('employee').

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    87
    Vote Rating
    0
    Abisha is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Employee.show()? Employee is a config object, not a component!

    Either make Employee a new Ext.grid.GridPanel or locate the component using Ext.getCmp('employee').
    Thanks for your quick reply Condor!!!!

    But i tried with Ext.getCmp('employee').hidden=false;

    It does not work.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Did you check the API docs? 'hidden' is a read-only property and shouldn't be changed.

    Use:
    Code:
    Ext.getCmp('employee').setVisible(true);

  5. #5
    Ext User
    Join Date
    Mar 2009
    Posts
    87
    Vote Rating
    0
    Abisha is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Did you check the API docs? 'hidden' is a read-only property and shouldn't be changed.

    Use:
    Code:
    Ext.getCmp('employee').setVisible(true);
    Thanks a lotttt!!!!

    It works.....

    I am new to extjs...

    Thanks again..

Thread Participants: 1