Search code examples
javascriptextjsjava-ee-6extjs4.1

Open a ExtJS Desktop Window on ExtJS grid item double click


I am new to ExtJS and I encountered a similar problem from Sencha forum which was left unsolved.

This is the link to the problem

Basically, What I want to do is open a desktop window module app displaying the data selected on the grid. I already created the same window displayed on the link. We have quite the same code so I think there's no sense on posting my code here. Any help will be appreciated. Thank you.


Solution

  • I don't think you are right about the code thing... But anyway, the code of this guy is a mess and mitchel already answered how it should be done. So forget about the code of the guy for a second, cause it is really simple to archive this.

    Here's a working snipped how you can do this:

    Ext.define('Ext.ux.DemoWin', {
        extend: 'Ext.window.Window',
        alias: 'widget.demowin',
        width: 200,
        height: 200,
        title: 'demo',
        initComponent: function() {
            this.callParent(arguments);
        },
        loadRecord: function(rec) {
            // simplified - just update the html. May be replaced with a dataview
            this.update(rec.data.name + ' - ' + rec.data.email);
        }
    });
    
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        listeners: {
            // the registration should be done with the control() method of the responsible controller
            itemclick: function(grid,record) {
                var win = Ext.widget('demowin').show().loadRecord(record);
            }
        }
    });
    

    And here's a JSFiddle

    Edit which applies to Ext.ux.desktop.Module

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win');
        if(!win){
            win = desktop.createWindow({
                // ...
                loadRecord: function(rec) {
                     this.update(rec.data.name + ' - ' + rec.data.email);
                }
      //....