1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    9
    Vote Rating
    0
    mikeschthecat is on a distinguished road

      0  

    Question Unanswered: Desktop :: Click on row/cell in grid opens new Window

    Unanswered: Desktop :: Click on row/cell in grid opens new Window


    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,
                            
    scopethis
                    
    };
            },

            
    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({
                            
    borderfalse,
                            
    storestore_serverListe,
                            
    columns: [
                                    new 
    Ext.grid.RowNumberer(),
                                    {
                                            
    text"Server ID",
                                            
    dataIndex:'server_id',
                                            
    hidden:true
                                    
    },{
                                            
    text"Servername",
                                            
    flex1,
                                            
    sortabletrue,
                                            
    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(merecord){
                            
    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: {
                                            
    stripeRowstrue
                                    
    },
                                    
    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,
                            
    scopethis,
                            
    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'
                                    
    },
                                    
    borderfalse,
                                    
    bodyPadding10,

                                    
    fieldDefaults: {
                                            
    labelAlign'top',
                                            
    labelWidth100,
                                            
    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: [{
                                                    
    flex1,
                                                    
    name'serverName',
                                                    
    fieldLabel'First',
                                                    
    allowBlankfalse
                                            
    }]
                            });

                            
    win desktop.createWindow({

                                    
    id'form-serverDetails',
                                    
    title:'Server Details',
                                    
    closeAction'hide',
                                    
    width:740,
                                    
    height:480,
                                    
    animCollapse:false,
                                    
    constrainHeader:true,
                                    
    layout'fit',
                                    
    modaltrue,
                                    
    items: [
                                            
    form
                                    
    ]
                            });
                            
    win.show();
                            return 
    win;
                    }
            }
    }); 
    Can anyone please help me with this issue ?

    Best regards
    Mikesch

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What's the issue? Have you been able to listen for the itemclick event?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    9
    Vote Rating
    0
    mikeschthecat is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    In your click or doubleclick listener, just Ext.create the class and show it:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    9
    Vote Rating
    0
    mikeschthecat is on a distinguished road

      0  

    Default


    Hi Mitchell,

    which id's do you mean ?

    1.)
    PHP Code:
    Ext.define('MyDesktop.GridServerListe', {
    ...
            
    id:'grid-servers',

    ... 
    2.)
    PHP Code:
                    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 ?

    PHP Code:
                    grid_serverListe.on('itemdblclick', function(merecord){
                            
    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

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    9
    Vote Rating
    0
    mikeschthecat is on a distinguished road

      0  

    Default


    Have anyone an idee ??

    Please help

    PHP Code:
    grid_serverListe.on('itemdblclick', function(merecord){
                            
    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

  7. #7
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    jepedregosa is on a distinguished road

      0  

    Default


    I have the same problem. Can anyone give a solution for this? Thank you so much