PDA

View Full Version : Linked grid data with form in the webdesktop example



vuilled
5 Jan 2013, 11:38 AM
Hi,

I'm new in ExtJS and interested by developing something similar to the web desktop example.

For the beginning a want to try to load a custom module with a grid including my users. I done that using the code below and it work good.


/**
* @author vuill_000
*/

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

requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],

id:'UserManagement-grid',

init : function(){
this.launcher = {
text: 'My User',
iconCls:'icon-grid'
};
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('UserManagement-grid');
if(!win){
win = desktop.createWindow({
id: 'UserManagement-grid',
title:'User Management',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: [
{
border: false,
xtype: 'grid',
store: new Ext.data.Store({
autoLoad:true,
fields: [
{ name: 'name',type:'string' },
{ name: 'firstname', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'lastAttempt', type: 'string' }
],
proxy: {
type: 'ajax',
url : base_path +'index.php/user/getUsers' ,
reader: {
type: 'json'

}
}

}),
columns: [
new Ext.grid.RowNumberer(),
{
text: "Name",
sortable: true,
flex:1,
dataIndex: 'name'
},
{
text: "Firstname",
sortable: true,
flex:1,

dataIndex: 'firstname'
},
{
text: "Email",
sortable: true,
flex:1,

dataIndex: 'email'
},
{
text: "Last Attempt",
width: 70,
flex:1,

dataIndex: 'lastAttempt'
}
]
}
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add',
handler: function(){Ext.create('MyDesktop.UserForm').createWindow();}
//myDesktopApp.modules[9].createWindow()
//myDesktopApp.getModule('UserManagement-form').createWindow();
}, '-', {
text:'Options',
tooltip:'Modify options',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
return win;
},



});



Then I want to attach to the "Add Something" button of the toolbar of my grid the ability to open another windows with a form inside.

First I wrote the code for the form window in the same way as any other module.


/**
* @author vuill_000
*/

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

requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],

id:'UserManagement-form',

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

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('UserManagement-form');
if(!win){
win = desktop.createWindow({
id: 'UserManagement-form',
id: 'UserManagement-form',
title:'User Form',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items:{
xtype:'form',
Title:'User Form',
layout:'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}]

}
});
}
return win;
},
});

If I bind this module with a desktop shortcut, the windows appear without any error.

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

requires: [
'Ext.window.MessageBox',

'Ext.ux.desktop.ShortcutModel',

'MyDesktop.SystemStatus',
'MyDesktop.VideoWindow',
'MyDesktop.GridWindow',
'MyDesktop.TabWindow',
'MyDesktop.AccordionWindow',
'MyDesktop.Notepad',
'MyDesktop.BogusMenuModule',
'MyDesktop.BogusModule',
'MyDesktop.UserGrid',
'MyDesktop.UserForm',

//'MyDesktop.Blockalanche',
'MyDesktop.Settings'
],

init: function() {
// custom logic before getXYZ methods get called...

this.callParent();

// now ready...
},

getModules : function(){
return [
new MyDesktop.VideoWindow(),
//new MyDesktop.Blockalanche(),
new MyDesktop.SystemStatus(),
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.Notepad(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule(),
new MyDesktop.UserGrid(),
new MyDesktop.UserForm()
];
},

getDesktopConfig: function () {
var me = this, ret = me.callParent();

return Ext.apply(ret, {
//cls: 'ux-desktop-black',

contextMenuItems: [
{ text: 'Change Settings', handler: me.onSettings, scope: me }
],

shortcuts: Ext.create('Ext.data.Store', {
model: 'Ext.ux.desktop.ShortcutModel',
data: [
{ name: 'Grid Window', iconCls: 'grid-shortcut', module: 'grid-win' },
{ name: 'Accordion Window', iconCls: 'accordion-shortcut', module: 'acc-win' },
{ name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },
{ name: 'System Status', iconCls: 'cpu-shortcut', module: 'systemstatus'},
{ name: 'User Management', iconCls: 'accordion-shortcut', module: 'UserManagement-grid'},
{ name: 'User Form', iconCls: 'accordion-shortcut', module:'UserManagement-form'}

]
}),



So now I want to bind my form window with the add something. I see some solutions in other forum post and I tried them but none of them work.

First a try doing this :

handler: function(){Ext.create('MyDesktop.UserForm').createWindow();}
TypeError: this.app is undefined, var desktop = this.app.getDesktop();
I guess it is a problem of scope but I confessed that I have not a deep understanding of the ExtJS scope issue for the moment.

Then I try this :

handler: myDesktopApp.modules[9].createWindow()
TypeError: handler.call is not a function, handler.call(me.scope || me, me, e);

Finally I try this

handler: myDesktopApp.getModule('UserManagement-form').createWindow()
TypeError: handler.call is not a function, handler.call(me.scope || me, me, e);


So if anyone can explain me what i'm doing false it would be very helpfull.

Thanks in advance for your help.

Regards

mitchellsimoens
7 Jan 2013, 11:04 AM
The createWindow method call needs to be within a function like your first snippet otherwise it will fire right away when the code is eval'd by the browser not when you click on the button.

It's looking for an app property on the component which it doesn't look like you are setting when you create the component.

vuilled
8 Jan 2013, 11:58 PM
Thank you for your answer

But How can I set this app property when I create the class ?

Thank your

Regards

David

vuilled
15 Jan 2013, 7:59 AM
Ok I was a pretty stupid question.

I just have to pass the app object as a parameter.

Thanks for your help