0

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.

John
  • 836
  • 2
  • 25
  • 39

1 Answers1

2

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);
            }
  //....
sra
  • 23,820
  • 7
  • 55
  • 89
  • interesting construction :) – A1rPun Jan 02 '13 at 10:37
  • @A1rPun Thank you anyway for the upvote. I thought it is the easiest way to start this – sra Jan 02 '13 at 11:01
  • thank you for the reply. This code looks better. The only difference that I can see is that the window that you used to display the data extends the 'Ext.window.Window' class instead of 'Ext.ux.desktop.Module' wherein you can minimize or maximize the window inside the Extjs Desktop. Can I do that with 'Ext.window.Window' class? – John Jan 02 '13 at 12:11
  • @user1349213 I am not that familiar with the desktop example but after a quick glance it seems to me that the `Ext.ux.desktop.Module` is just a wrapper class and on creation all get's wrapped up into a `Ext.window.Window`. So you will just need to add the `leadRecord` there (see my edit which applies all to a module). All other will be more a design matter of how and where you open such a window. – sra Jan 02 '13 at 12:29