Why don't added records appear in grid? - extjs

Question

I created a custom field for multiple file uploading, the problem is in the first step i couldn't even add selected file to grid, can you tell me what is the problem of my code? I looked at firebug and there is no java-script error.
Ext.define('VDOA.form.fields.Attachment', {
extend: 'Ext.form.FieldContainer',
mixins: {field: 'Ext.form.field.Field'},
requires: ['Ext.form.field.Base'],
alias: 'widget.attachment',
layout: 'fit',
constructor: function()
{
var me = this;
me.items = [
{
itemId: 'grid',
anchor: '100%',
width: 300,
height: 100,
xtype: 'gridpanel',
layout: 'fit',
autoRender: true,
autoShow: true,
tbar: [
{
itemId: 'add',
hideLabel: true,
buttonOnly: true,
buttonText: 'Browse a file',
xtype: 'fileuploadfield'
}
],
columns: [
{
dataIndex: 'Id',
xtype: 'gridcolumn',
text: 'File Id'
},
{
dataIndex: 'Title',
xtype: 'gridcolumn',
text: 'File Name'
}
]
}
];
me.callParent(arguments);
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'Id', type: 'int'},
{name: 'Title', type: 'string'},
{name: 'IsUploading', type: 'bool'}
],
data: []
});
me.down('#grid').store = store;
me.down('#add').on('change', function(o, e){
store.add({Id: Ext.id(), Title: o.value, IsUploading: true});
store.load();
});
},
getErrors: function() {
return [];
},
validate: function() {
return true;
}}); Ext.onReady(function() {
Ext.QuickTips.init();
var win = new Ext.Window({
width:500
,id:'winid'
,height:300
,layout:'fit'
,border:false
,closable:false
,title:'File Upload'
,items:[{
xtype:'form'
,frame:true
,labelWidth:100
,items:[{
name: 'Title',
xtype: 'textfield',
fieldLabel: 'Title',
allowBlank: false,
anchor: '100%'
},
{
name: 'Attachment',
xtype: 'attachment',
fieldLabel: 'Attached Files'
}]
}]
,buttons:[{
text:'Submit'
,handler:function() {
Ext.getCmp('form').getForm().submit();
}
}]
});
win.show();});

Answer 1

Ext.define('VDOA.form.fields.Attachment', {
extend:'Ext.form.FieldContainer',
mixins:{field:'Ext.form.field.Field'},
requires:['Ext.form.field.Base'],
alias:'widget.attachment',
layout:'fit',
constructor:function () {
var me = this,
store = Ext.create('Ext.data.ArrayStore', {
fields:[
{name:'Id', type:'int'},
{name:'Title', type:'string'},
{name:'IsUploading', type:'bool'}
],
data:[]
});
me.items = [
{
itemId:'grid',
anchor:'100%',
width:300,
height:100,
store: store, // link store there...
xtype:'gridpanel',
layout:'fit',
height:400,
autoRender:true,
autoShow:true,
tbar:[
{
itemId:'add',
hideLabel:true,
buttonOnly:true,
buttonText:'Browse a file',
xtype:'filefield'
}
],
columns:[
{
dataIndex:'Id',
xtype:'gridcolumn',
text:'File Id'
},
{
dataIndex:'Title',
xtype:'gridcolumn',
text:'File Name'
}
]
}
];
me.callParent(arguments);
//me.down('#grid').store = store;
me.down('#add').on('change', function (o, e) {
me.down('#grid').store.add({Id:Ext.id(), Title:o.value, IsUploading:true});
// store.load(); // remove it - it set data = [] as it was initialized before
});
},
getErrors:function () {
return [];
},
validate:function () {
return true;
}});
Ext.onReady(function () {
Ext.QuickTips.init();
var win = new Ext.Window({
width:500, id:'winid', height:300, layout:'fit', border:false, closable:false, title:'File Upload', items:[
{
xtype:'form', frame:true, labelWidth:100, items:[
{
name:'Title',
xtype:'textfield',
fieldLabel:'Title',
allowBlank:false,
anchor:'100%'
},
{
name:'Attachment',
xtype:'attachment',
fieldLabel:'Attached Files'
}
]
}
], buttons:[
{
text:'Submit', handler:function () {
Ext.getCmp('form').getForm().submit();
}
}
]
});
win.show();
});
Loot at this snippet.
As I said before store was not linked with its grid successfully. And store reloaded default data = [] when onchange event was appearing.
Enjoy! :)

Answer 2

Try without
store.load();
on your onchange handler.
Also, check about store. Has it linked to the store successfully?

Answer 3

Also.. Good practice is implementing nested components and widget on
initComponent
method
Something like
initComponent: function() {
var me = this;
/* ------ */ me.callParent(arguments); }
And use
Ext.apply
y or
Ext.applyIf
for component initialization