PDA

View Full Version : Desktop :: Click on row/cell in grid opens new Window



mikeschthecat
21 Dec 2011, 8:32 AM
I need help with following Problem:

i would open a new Window on click or doubleclick in a grid row.

The Grid works fine, all entrys are visible after loading.

In the modules/desktop/App.js are all modules defined:

modules/desktop/App.js:


requires: [
...
'MyDesktop.FormServerDetails',
'MyDesktop.GridServerListe',
...
],

...

getModules : function(){
return [
...
new MyDesktop.FormServerDetails(),
new MyDesktop.GridServerListe(),
...
];
},



modules/desktop/GridServerListe.js:


Ext.define('MyDesktop.GridServerListe', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.data.*',
'Ext.util.Format',
'Ext.grid.*'
],

id:'grid-servers',

init : function(){
this.launcher = {
text: 'Server Liste',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
};
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-servers');

Ext.define('ServerListe', {
extend: 'Ext.data.Model',
fields: [
'server_id',
'servername',
'memory',
'os',
'service_tag',
'support_id',
'support'
]
});

var store_serverListe = new Ext.data.Store({
model: 'ServerListe',
proxy: {
type: 'ajax',
url: '/remote/get_server_liste.php',
reader: {
type: 'json',
root: 'servers'
}
}
});

var grid_serverListe = new Ext.grid.Panel({
border: false,
store: store_serverListe,
columns: [
new Ext.grid.RowNumberer(),
{
text: "Server ID",
dataIndex:'server_id',
hidden:true
},{
text: "Servername",
flex: 1,
sortable: true,
dataIndex: 'servername'
},{
text: "Memory",
dataIndex: 'memory',
width:130
},{
text: "OS",
dataIndex:'os',
width:200
},{
text: "Service TAG",
dataIndex:'service_tag',
width:80
},{
text: "Support ID",
dataIndex:'support_id',
hidden:true
},{
text: "Support",
dataIndex:'support'
}
]
});

grid_serverListe.on('itemclick', function(me, record){
console.log('itemclick :: server_id: '+record.data.server_id);
console.log('itemclick :: servername: '+record.data.servername);
console.log('itemclick :: memory: '+record.data.memory);
console.log('itemclick :: os: '+record.data.os);
console.log('itemclick :: service_tag: '+record.data.service_tag);
console.log('itemclick :: support_id: '+record.data.support_id);
console.log('itemclick :: support: '+record.data.support);

/*
// doesn't work :(
// Errormessage: win_contactDetails is undefined
var win_serverDetails=Ext.getCmp('form-serverDetails');
win_serverDetails.show();
*/
});



if(!win){
win = desktop.createWindow({
listeners:{
afterrender: function(){
store_serverListe.load();
},
itemclick : function() {
var data = win.getSelectionModel().selected.items[0].data;
alert(data);
}
},

id: 'grid-servers',
title:'Server Liste',
viewConfig: {
stripeRows: true
},
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: [
grid_serverListe
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
win.show();
return win;
},
});


modules/desktop/FormServerDetails.js


Ext.define('MyDesktop.FormServerDetails', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.form.*'
],

id:'form-serverDetails',

init : function(){
this.launcher = {
text: 'Server Details',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this,
windowId: 'form-serverDetails'
};
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('form-serverDetails');

if(!win){

var form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,

fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
margins: '0 0 10 0'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Servername',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',

fieldDefaults: {
labelAlign: 'top'
},

items: [{
flex: 1,
name: 'serverName',
fieldLabel: 'First',
allowBlank: false
}]
});

win = desktop.createWindow({

id: 'form-serverDetails',
title:'Server Details',
closeAction: 'hide',
width:740,
height:480,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
modal: true,
items: [
form
]
});
win.show();
return win;
}
}
});


Can anyone please help me with this issue ?

Best regards
Mikesch

mitchellsimoens
21 Dec 2011, 8:45 AM
What's the issue? Have you been able to listen for the itemclick event?

mikeschthecat
21 Dec 2011, 8:58 AM
Hi Mitchell,

thanks for your very fast response.

Yes, i see in the console when i click/doubleclick the entrys from the selected Row,
but i dont know how i can show the MyDesktop.FormServerDetails, if i doubleclick on the row.

My target is, wenn i doubleclick on any row, a new Detail Window (PopUp) will open and shows additional Server Informations.

regards
Mikesch

mitchellsimoens
21 Dec 2011, 9:05 AM
In your click or doubleclick listener, just Ext.create the class and show it:


Ext.create('MyDesktop.FormServerDetails').show();

I will warn you that it looks like you are using id on that class and you will have collisions. I would suggest not using id at all. It should only be used for debugging.

mikeschthecat
21 Dec 2011, 9:29 AM
Hi Mitchell,

which id's do you mean ?

1.)


Ext.define('MyDesktop.GridServerListe', {
...
id:'grid-servers',

...


2.)


if(!win){
win = desktop.createWindow({
...
id: 'grid-servers',



i have added Ext.create('MyDesktop.FormServerDetails').show(); to grid_serverListe.on
but i become a errormessage when i doubleclick on any row :(

Where is my fault ?



grid_serverListe.on('itemdblclick', function(me, record){
console.log('itemdblclick :: server_id: '+record.data.server_id);
console.log('itemdblclick :: servername: '+record.data.servername);
console.log('itemdblclick :: memory: '+record.data.memory);
console.log('itemdblclick :: os: '+record.data.os);
console.log('itemdblclick :: service_tag: '+record.data.service_tag);
console.log('itemdblclick :: support_id: '+record.data.support_id);
console.log('itemdblclick :: support: '+record.data.support);
Ext.create('MyDesktop.FormServerDetails').show();
});


Ext.create("MyDesktop.FormServerDetails").show is not a function

:(

regards
Mikesch

mikeschthecat
22 Dec 2011, 11:36 AM
Have anyone an idee ??

Please help 8-|



grid_serverListe.on('itemdblclick', function(me, record){
console.log('itemdblclick :: server_id: '+record.data.server_id);
console.log('itemdblclick :: servername: '+record.data.servername);
console.log('itemdblclick :: memory: '+record.data.memory);
console.log('itemdblclick :: os: '+record.data.os);
console.log('itemdblclick :: service_tag: '+record.data.service_tag);
console.log('itemdblclick :: support_id: '+record.data.support_id);
console.log('itemdblclick :: support: '+record.data.support);
Ext.create('MyDesktop.FormServerDetails').show();
});


Ext.create("MyDesktop.FormServerDetails").show is not a function :(

I use the Desktop module from example.

I would open a new window if anyone doubleclick on the grid (cell/row),
but nothing works :(

regards
Mikesch

jepedregosa
2 Jan 2013, 2:09 AM
I have the same problem. Can anyone give a solution for this? Thank you so much