PDA

View Full Version : hide and show grid



Abisha
5 May 2009, 3:45 AM
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
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", sortable: true, dataIndex: 'type', width:100}
],
stripeRows: true,

listeners: {
rowclick :function(grid, row){
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", sortable: true, dataIndex: 'name', width:300},
{id:'contact_id',header: "Contact Id", sortable: true, dataIndex: 'contact_id', width:200},
{id:'job_title',header: "Job title", sortable: true, dataIndex: 'job_title', width:200},
{id:'active',header: "Active", sortable: true, dataIndex: 'active', width:100}
],
stripeRows: true,
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", sortable: true, dataIndex: 'name', width:100}
],
stripeRows: true,
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,
allowBlank: false,
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',
editable: false,
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,
allowBlank: false,
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',
editable: false,
emptyText:'Name...'
}]
},{

layout:'form',
//labelAlign:'top',
width:250,
labelWidth:80,
items:[{
xtype:'textfield',
fieldLabel: search_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:20, height: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", sortable: true, dataIndex: 'name', width:200},
{id:'job_title',header: "Job title", sortable: true, dataIndex: 'job_title', width:150},
{id:'work_phone',header: "Work Phone", sortable: true, dataIndex: 'job_title', width:150},
{id:'mobile_phone',header: "Mobile Phone", sortable: true, dataIndex: 'job_title', width:150},
{id:'repair_center',header: "Repair Center", sortable: true, dataIndex: 'job_title', width:150},
{id:'primary',header: "Primary", sortable: true, dataIndex: 'active', width:100}
],
stripeRows: true,

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();
};

Condor
5 May 2009, 3:52 AM
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').

Abisha
5 May 2009, 4:09 AM
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.

Condor
5 May 2009, 4:10 AM
Did you check the API docs? 'hidden' is a read-only property and shouldn't be changed.

Use:

Ext.getCmp('employee').setVisible(true);

Abisha
5 May 2009, 4:25 AM
Did you check the API docs? 'hidden' is a read-only property and shouldn't be changed.

Use:

Ext.getCmp('employee').setVisible(true);

Thanks a lotttt!!!!

It works.....

I am new to extjs...

Thanks again..