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:
PHP Code:
requires: [
...
'MyDesktop.FormServerDetails',
'MyDesktop.GridServerListe',
...
],
...
getModules : function(){
return [
...
new MyDesktop.FormServerDetails(),
new MyDesktop.GridServerListe(),
...
];
},
modules/desktop/GridServerListe.js:
PHP Code:
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
PHP Code:
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
Reply With Quote
