Why don't added records appear in grid?

问题:

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();});

回答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! :)

回答2:

Try without

store.load();

on your onchange handler.

Also, check about store. Has it linked to the store successfully?

回答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