PDA

View Full Version : How i can open a tab from a grid



micky1984
9 Jul 2010, 4:40 AM
Hi,
My problem is i have a grid have 3 or 4 rows. I want when i double click on the row the relative function call dynamically. Here is my code:

/* Override the module code here.
* This code will be Loaded on Demand.
*/

Ext.QuickTips.init();
Ext.override(Desktop.ReportsWindow, {
createProxy: {},
createWindow: function () {

var desktop = this.app.getDesktop();
var win = desktop.getWindow(this.moduleId);
var app = this.app;
var url = this.app.connection;
var moduleId = this.moduleId;

var myData = [
['Diagnosis registry', 'Search patients that have a particular diagnosis or ICD9 code.', 'diagnosis'],
['Medication report', 'Search patients that have been prescribed a particular medicine.', 'medication'],
['Chart notes report', 'Search all of your practice\'s chat notes.', 'chart_note'],
['H1N1 candidacy report', 'Search all of your practice\'s patients for H1N1 risk candidates.', 'h1n1'],
['PHR User report', 'See all of the patients in your practice that have access to their PHR.', 'phr']
];

var store = new Ext.data.ArrayStore({
fields: [{
name: 'title'
},
{
name: 'description'
},
{
name: 'report_for'
}]
});

store.loadData(myData);



if (!win) {

var winWidth = desktop.getWinWidth() / 1.1;
var winHeight = desktop.getWinHeight() / 1.2;
win = desktop.createWindow({
id: moduleId,
title: 'Reports',
width: winWidth,
height: winHeight,
maximized: true,
iconCls: 'reports-icon-cls',
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeItem: 0,
id: 'reportsTabPanel',
items: [{
title: 'Reports',
items: [{
xtype: 'grid',
id: 'allReportsGrid',
columnLines: true,
autoHeight: true,
stripeRows: true,
tbar: {
xtype: 'toolbar',
items: ['->',
{
text: 'Run Report',
disabled: true,
id: 'runReportBtn',
handler: this.addNewtab,
scope: this,
}, ' ']
},
viewConfig: {
forceFit: true,
},
selModel: new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function (sel, row, rec) {
Ext.getCmp('runReportBtn').enable();
},
rowdeselect: function (sel, row, rec) {
Ext.getCmp('runReportBtn').disable();
}
}
}),
store: store,

columns: [{
header: 'Title',
dataIndex: 'title',
width: 100
},
{
header: 'Description',
dataIndex: 'description',
width: 200
}, ],
listeners: {
rowdblclick: this.addNewtab,
scope: this
},
}]
}]
}]
})
}
win.show();
},

addNewtab: function () {

var url = this.app.connection;
var moduleId = this.moduleId;

var tabpanel = Ext.getCmp('reportsTabPanel');
var rec = Ext.getCmp('allReportsGrid').getSelectionModel().getSelected();
var title = rec.get('title').replace(/^\s+/, '').replace(/\s+$/, '');
var tabId = title.toLowerCase();
var tabId = tabId.replace(/ /g, '_');


// varaible getting the value which function to call
var reportTab = rec.get('report_for');

if (Ext.getCmp(tabId)) {
tabpanel.setActiveTab(tabId);
return;
}

var tabs = Ext.getCmp('reportsTabPanel').add({
title: title,
id: tabId,
layout: 'fit',
closable: true,

items: reportTab,
//calling the function according to selected record
scope: this,

});
tabpanel.setActiveTab(tabs);
},


diagnosis: function () {
var url = this.app.connection;
var moduleId = this.moduleId;
var report_item = [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'form',
region: 'north',
autoHeight: true,
frame: true,
bodyStyle: 'padding : 10px;',
items: [{
xtype: 'fieldset',
border: false,
width: 280,
style: 'padding:0px;margin:0px; float : left',
labelWidth: 55,
items: [{
xtype: 'combo',
style: 'float:left',
fieldLabel: 'Providers',
}]
},
{
xtype: 'button',
text: 'Advance Search',
style: 'float : left',
handler: function () {
//Ext.getCmp('check').show();
}
}]
},
{
xtype: 'grid',
region: 'center',
id: 'center_grid',
viewConfig: {
forceFit: true,
},
store: new Ext.data.Store({}),
columns: [{
header: 'Patient Name',
dataIndex: ''
},
{
header: 'IDC9 Code',
dataIndex: ''
},
{
header: 'Diagnosis',
dataIndex: ''
},
{
header: 'Dx Date',
dataIndex: ''
},
{
header: 'Last Seen',
dataIndex: ''
},
{
header: 'Provider',
dataIndex: ''
}, ]
}]
}];

return report_item;

},
medication: function () {
var url = this.app.connection;
var moduleId = this.moduleId;
var medication_tab = [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'form',
region: 'north',
autoHeight: true,
frame: true,
bodyStyle: 'padding : 10px;',
items: [{
xtype: 'fieldset',
border: false,
width: 280,
style: 'padding:0px;margin:0px; float : left',
labelWidth: 55,
items: [{
xtype: 'combo',
style: 'float:left',
fieldLabel: 'Providers',
}]
},
{
xtype: 'button',
text: 'Advance Search',
style: 'float : left',
handler: function () {

}
}]
},
{
xtype: 'grid',
region: 'center',
id: 'center_grid',
viewConfig: {
forceFit: true,
},
store: new Ext.data.Store({}),
columns: [{
header: 'Patient Name',
dataIndex: ''
},
{
header: 'Medication',
dataIndex: ''
},
{
header: 'Strength',
dataIndex: ''
},
{
header: 'Rx Start Date',
dataIndex: ''
},
{
header: 'Rx Stop Date',
dataIndex: ''
},
{
header: 'Last Seen',
dataIndex: ''
},
{
header: 'Provider',
dataIndex: ''
}, ]
}]
}];

return medication_tab;
},
chart_note: function () {
var url = this.app.connection;
var moduleId = this.moduleId;
var chart_tab = [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'form',
region: 'north',
autoHeight: true,
frame: true,
bodyStyle: 'padding : 10px;',
items: [{
xtype: 'fieldset',
border: false,
width: 280,
style: 'padding:0px;margin:0px; float : left',
labelWidth: 55,
items: [{
xtype: 'combo',
style: 'float:left',
fieldLabel: 'Providers',
}]
},
{
xtype: 'button',
text: 'Advance Search',
style: 'float : left',
handler: function () {
//Ext.getCmp('check').show();
}
}]
},
{
xtype: 'grid',
region: 'center',
id: 'center_grid',
viewConfig: {
forceFit: true,
},
store: new Ext.data.Store({}),
columns: [{
header: 'Patient Name',
dataIndex: ''
},
{
header: 'Chart Note Type',
dataIndex: ''
},
{
header: 'Service Date',
dataIndex: ''
},
{
header: 'Provider',
dataIndex: ''
},
{
header: 'Signed',
dataIndex: ''
},
{
header: 'Signed By',
dataIndex: ''
},
{
header: 'Signed On',
dataIndex: ''
}]
}]
}];

return chart_tab;
},

h1n1: function () {
var url = this.app.connection;
var moduleId = this.moduleId;
var h1n1_tab = [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'form',
region: 'north',
autoHeight: true,
frame: true,
bodyStyle: 'padding : 10px;',
items: [{
xtype: 'fieldset',
border: false,
width: 280,
style: 'padding:0px;margin:0px; float : left',
labelWidth: 55,
items: [{
xtype: 'combo',
style: 'float:left',
fieldLabel: 'Providers',
}]
},
{
xtype: 'button',
text: 'Advance Search',
style: 'float : left',
handler: function () {
//Ext.getCmp('check').show();
}
}]
},
{
xtype: 'grid',
region: 'center',
id: 'center_grid',
viewConfig: {
forceFit: true,
},
store: new Ext.data.Store({}),
columns: [{
header: 'Patient',
dataIndex: ''
},
{
header: 'DOB',
dataIndex: ''
},
{
header: 'Gender',
dataIndex: ''
},
{
header: 'Phone',
dataIndex: ''
},
{
header: 'Email',
dataIndex: ''
},
{
header: 'Address',
dataIndex: ''
},
{
header: 'Candidacy Reason',
dataIndex: ''
}, ]
}]
}];

return h1n1_tab;
},

phr: function () {
var url = this.app.connection;
var moduleId = this.moduleId;
var phr_tab = [{
xtype: 'panel',
layout: 'border',
items: [{
xtype: 'form',
region: 'north',
autoHeight: true,
frame: true,
bodyStyle: 'padding : 10px;',
items: [{
xtype: 'fieldset',
border: false,
width: 280,
style: 'padding:0px;margin:0px; float : left',
labelWidth: 55,
items: [{
xtype: 'combo',
style: 'float:left',
fieldLabel: 'Providers',
}]
},
{
xtype: 'button',
text: 'Advance Search',
style: 'float : left',
handler: function () {
//Ext.getCmp('check').show();
}
}]
},
{
xtype: 'grid',
region: 'center',
id: 'center_grid',
viewConfig: {
forceFit: true,
},
store: new Ext.data.Store({}),
columns: [{
header: 'Patient',
dataIndex: ''
},
{
header: 'DOB',
dataIndex: ''
},
{
header: 'Temporary PIN',
dataIndex: ''
},
{
header: 'Gender',
dataIndex: ''
},
{
header: 'Status',
dataIndex: ''
},
{
header: 'Enabled On',
dataIndex: ''
},
{
header: 'Disabled On',
dataIndex: ''
}, ]
}]
}];

return phr_tab;
}
})

I am storing the function name in reportTab variable. and put this in the "items: reportTab" like this, but this is not working. This is generating an error :
item is undefined
[Break on this error] if(item.ownerCt){

Thanks in advance.
Micky

Condor
9 Jul 2010, 11:55 PM
What exactly does the report_for field contain?

micky1984
12 Jul 2010, 12:11 AM
hi condor,
Thanks for reply. Well, report_for fields contain the name of the functions i fixed that in my myData as you can see above. So i want it to be call a function whatever the function name in the report_for variable. I hope this is enough detail?

Thanks! waiting for your reply.

Condor
12 Jul 2010, 1:15 AM
But you are using:

items: reportTab
where

var reportTab = rec.get('report_for');
So you are assigning a string to the items config option!

micky1984
12 Jul 2010, 1:39 AM
Now this variable

var reportTab = rec.get('report_for');
reportTab contains the name like sometimes its diagnosis, and medication and what ever the var name in the grid. Actually i made the function with diagnosis,medication,chart_note,h1n1 and phr, now i want to call these function according to the row double click here:

items: reportTab via reportTab var. as this variable contains the name of the function like diagnosis,medication,chart_note,h1n1 and phr.
But that is only work if i put the name like:

items: diagnosis,scope:this
If you have any question plz ask me, if this will not to you.

Condor
12 Jul 2010, 2:07 AM
So you actually want:

items: this[reportTab]()

micky1984
12 Jul 2010, 2:39 AM
Yes, exactly.
Thanks Condor.

:) Thanks a lot

i used this:

var tabs = Ext.getCmp('reportsTabPanel').add({
title : title,
id : tabId,
layout : 'fit',
closable : true,

items : this[reportTab](),//reportTab, //calling the function according to selected record
scope : this,

});
tabpanel.setActiveTab(tabs);

Condor
12 Jul 2010, 3:36 AM
What's "scope:this" for? (which by the way has a trailing comma that will break IE)

micky1984
30 Nov 2010, 2:39 AM
remove the comma. there is no requirement of comma.
well scope : this is for tell the function for the scope. i am using this in the desktop example. so, in everride.js file i have to use like this.

micky1984
30 Nov 2010, 3:17 AM
Hi Condor,
can you please ans this
http://www.sencha.com/forum/showthread.php?117234-How-can-i-use-feed-viewer-example-in-desktop-example

thanks in advance.