PDA

View Full Version : ExtJs Tab containing a grid an a form



bigofo
16 Jul 2012, 8:51 AM
Hi,

I am new in ExtJs and I have a problem with tabs. Before posting my code I will explain what I want to do.

I want to have in the same tab a grid which is a list of applications and a form that enable user to upload an application to the server.
Currently I manage to display both but I am not able to add actions to the grid (edit or delete).
The problem seems to come when I want to use initComponent of the grid.
The others tabs are well displayed but when I click on the applications tab I get this error :
Uncaught TypeError: Cannot read property 'items' of undefined
and nothing is displayed.


Ext.define('superAdminApp.view.appsListTab' ,{

extend: 'Ext.panel.Panel',
alias : 'widget.appsListTab',


items : [
{
xtype : 'grid',
id : 'gridPanel',
store : 'apps',
selType: 'rowmodel',
rowEditor: Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
}),
columns : [{
header: 'Id',
sortable : true,
hideable : false,
menuDisabled : false,
draggable : false,
groupable : false,
dataIndex: 'id',
editor: {
xtype: 'textfield',
allowBlank: false
},
flex: 1
}, {
header: 'Name',
sortable : true,
hideable : false,
menuDisabled : false,
draggable : false,
groupable : false,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
},
flex: 1
}, {
header: 'Description',
sortable : false,
hideable : false,
menuDisabled : false,
draggable : false,
groupable : false,
dataIndex: 'description',
editor: {
xtype: 'textfield',
allowBlank: false
},
flex: 1
}, {
header: 'API',
sortable : true,
hideable : false,
menuDisabled : false,
draggable : false,
groupable : false,
dataIndex: 'api',
editor: {
xtype: 'textfield',
allowBlank: false
},
flex: 1
}
],
initComponent: function () {
this.callParent(arguments);
}
},
{


xtype : 'form',
items : [
{
xtype: 'combobox',
name : 'appId',
store: 'apps',
queryMode: 'local',
displayField: 'id',
valueField: 'id',
renderTo: Ext.getBody()
}, {
xtype : 'fileuploadfield',
name : 'uploadedFile',
title: 'Upload an Application',
bodyPadding: 10,
frame: true,
items: [{
xtype: 'filefield',
name: 'file',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select File'
}]
}],


buttons: [{
text: 'Upload',
handler: function() {
console.log(this);
console.log(this.getComponent('gridPanel'));
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: '/admin/upload',
waitMsg: 'Uploading your app ...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your app has been successfully uploaded to the server');
},
failure: function(fp, o) {
Ext.Msg.alert('Error', 'Your app was not uploaded : '+o.result.error);
}
});
}
}
}]
}
],


initComponent: function () {
console.log(this);
console.log(this.getId());
console.log(Ext.getCmp('gridPanel'));
//var gridPanel = this.getComponent('gridPanel').getId();
this.callParent(arguments);
}


});

If someone see what is wrong with my code
Thanks

friend
16 Jul 2012, 9:04 AM
I don't know if this is related to your problem, but I think only a single grid column is allowed to use flex: 1. This setting is typically used to make the last column of a grid stretch to fill the max width of the grid's parent container.

bigofo
16 Jul 2012, 9:28 AM
Thanks friend I didn't know that : I now have only 1 column with flex to 1 but it didn't fix my problem

friend
16 Jul 2012, 11:40 AM
The main problem is that you have an initComponent block buried at the end of your grid definition. I don't think you're supposed to embed initComponent like this; it's generally only used once when declaring a new Class.

The initComponent at the end of your class isn't doing anything either, so I recommend removing it as well. After ripping out these two items, I was able to add an instance of your Class to a test app and it functioned as expected (noting that I had to fake out the 'apps' data store).

bigofo
16 Jul 2012, 11:52 AM
After some tests I noticed the problem came from the initComponent of the grid.
For the initComponents of the panel you're right I can remove it since it does nothing. I used it to make some debug.
The thing is that I need to declare 2 events (edit and delete) at the initialization of my class and I don't know how to do it without the initComponents because I have to call the addEvents methods.
I also need to declare local variables to fire these evens.
How could I do it without the initComponent ?