PDA

View Full Version : How to Open View when clicking a button?



karldabuco
3 Oct 2012, 7:52 PM
I have a grid panel and a form panel(detail view).

How to open the form panel(detail view) by clicking the buttons (Add New & View Details).

See attached file.

Thanks,

scottmartin
3 Oct 2012, 8:07 PM
Do you want to open a window for view?



var form = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}]
});

var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 100,
width: 300,
layout: 'fit',
items: [ form ]
});

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
win.show();
}
});
?

Or do you want to toggle a panel:



Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var form = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
height: 70,
hidden: true,
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
xtype: 'datefield',
fieldLabel: 'End date'
}]
});

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
flex: 1,
columns : [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change', tdCls : 'x-change-cell' }
]
});

Ext.create('Ext.container.Container', {
layout: {
type: 'vbox',
align: 'stretch'
},
height : 220,
width : 600,
renderTo: Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
items: [ grid, form ]
});

Ext.create('Ext.Button', {
text: 'Click to show',
renderTo: Ext.getBody(),
handler: function() {
form.show();
}
});

Ext.create('Ext.Button', {
text: 'Click to hide',
renderTo: Ext.getBody(),
handler: function() {
form.hide();
}
});


Scott.

karldabuco
3 Oct 2012, 9:42 PM
Thank you very much Scott. This helps..

How about opening a view which is already exist?

Thanks,

Karl

karldabuco
3 Oct 2012, 9:54 PM
I already figured it out with the codes you gave me...

Thanks a lot Scott.

Karl