MultiSelect in extjs Combobox

Question

I'm trying to multiselect in combobox of the Extjs, After I select the Items , the tpl index is rendered , want to render the value that's the displayfield selected when away out from the cell, how can I be able to Achieve this.

here's the code

function run() {

    var myStore=Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        pageSize:2,
        proxy: {
           type: 'memory',
          enablePaging: true
    },
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 'AC Volvo',

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 'Seater',

        },{
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 'Sleeper',

        },{
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 'AC Volvo',

        },]
    });

    Ext.create('Ext.grid.Panel', {
        xtype :'gridpanel',
        itemId:'busTimegrid',
        pageSize:1,
        title: 'BUS DEATILS',
        mapperId:'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
                dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
                listeners: {
                beforeselect: function(timefield, record) {
                var grid = timefield.up('grid');
                if(grid.store.find('time', record.data.disp) != -1) {
                Ext.Msg.alert("Bus time already exist.");
                return false;
    }
  }
}
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable:true,
            renderer: function (value) {
                if (Ext.isNumber(value)) {
                    var store = this.getEditor().getStore();
                    return store.findRecord('id', value).get('name');
                }
                return value;
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable:true,
                forceSelection:true,
                multiSelect: true,
                    displayTpl: '<tpl for=".">' +
                    '{name}' +
                    '<tpl if="xindex < xcount">, </tpl>' +
                    '</tpl>',
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [{
                        id: 1,
                        name: 'AC Volvo'
                    }, {
                        id: 2,
                        name: 'Seater'
                    }, {
                        id: 3,
                        name: 'Sleeper'
                    }]
                })

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
        },
        listners: [{
            fn: 'onUsernamefieldBlur',
            event: 'blur',
            delegate: 'busname'
        }],
        onUsernamefieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Busname can't be empty");
            textfield.setFocus(true);
        }
    },
        height: 200,
        width: 400,
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: myStore,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()

    });
    var gridRow = myStore.getModifiedRecords();
 Ext.each(gridRows, function (gridRow) {
     var dirtyInd = myStore.indexOf(gridRow);
     var newTime = new Date(store.getAt(dirtyInd).data.time);
   },
   myStore.each(function (record, idx) {
   var newT = new Date(record.get('time'));
   if (Ext.Date.diff(newTime, newT,Ext.Date.SECOND)=== 0)
   {
   samebustime = true;
   }
   })); 
   if(samebustime){
       Ext.Msg.alert('Warning','Same time occured')
   }
}

Fiddle

Answer 1

I have done some modification to your original source code. You might like it or not. But in this code you get what you have asked for. I am not sure if that is exactly what you want.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        run();
        window.show();
    }
});


function run() {

    var myStore = Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['busname', 'time', 'typebus',],
        pageSize: 2,
        proxy: {
            type: 'memory',
            enablePaging: true
        },
        data: [{
            busname: 'ABCD',
            time: '15:30:00',
            typebus: 'AC Volvo',

        }, {
            busname: 'aaa',
            time: '13:30:00',
            typebus: 'Seater',

        }, {
            busname: 'AAAA',
            time: '18:30:00',
            typebus: 'Sleeper',

        }, {
            busname: 'ABCD',
            time: '19:30:00',
            typebus: 'AC Volvo',

        },]
    });

    var typebusStore = Ext.create('Ext.data.Store', {
        storeId: 'typeBusStore',
        fields: ['id', 'name'],
        data: [{
            id: 1,
            name: 'AC Volvo'
        }, {
            id: 2,
            name: 'Seater'
        }, {
            id: 3,
            name: 'Sleeper'
        }]
    })

    Ext.create('Ext.grid.Panel', {
        xtype: 'gridpanel',
        itemId: 'busTimegrid',
        pageSize: 1,
        title: 'BUS DEATILS',
        mapperId: 'getBusTime',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            header: 'Bus Name',
            dataIndex: 'busname',
            editor: 'textfield'
        }, {
            text: 'Bus Time',
            dataIndex: 'time',
            xtype: 'gridcolumn',
            renderer: function (value) {
                if (value instanceof Date)
                    return Ext.util.Format.date(value, 'H:i:s');
                else
                    return value;
            },
            flex: 1,
            editor: {
                xtype: 'timefield',
                format: 'H:i:s',
                allowBlank: true,
                maskRe: /[0-9,:]/,
                listeners: {
                    beforeselect: function (timefield, record) {
                        var grid = timefield.up('grid');
                        if (grid.store.find('time', record.data.disp) != -1) {
                            Ext.Msg.alert("Bus time already exist.");
                            return false;
                        }
                    }
                }
            }
        }, {
            header: 'Bus TYpe',
            dataIndex: 'typebus',
            editable: true,
            renderer: function (value, md, record) {
                var retValue = Array();
                if (Ext.isArray(value)) {
                    Ext.each(value, function(id) {
                        retValue.push(Ext.data.StoreManager.lookup('typeBusStore').findRecord('id', id).get('name'));
                    });
                }

                if (retValue.length > 0) {
                    return retValue.join(", ");
                }
                return value;
            },
            editor: {
                xtype: 'combo',
                displayField: 'name',
                valueField: 'id',
                editable: true,
                forceSelection: true,
                multiSelect: true,
                displayTpl: '<tpl for=".">' +
                '{name}' +
                '<tpl if="xindex < xcount">, </tpl>' +
                '</tpl>',
                store: typebusStore

            }
        }],
        selModel: 'cellmodel',
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1,
        },
        listners: [{
            fn: 'onUsernamefieldBlur',
            event: 'blur',
            delegate: 'busname'
        }],
        onUsernamefieldBlur: function (textfield, e, eOpts) {

            if (textfield.getValue() === '') {
                Ext.Msg.alert("Busname can't be empty");
                textfield.setFocus(true);
            }
        },
        height: 200,
        width: 400,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: myStore,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()

    });
    var gridRows = myStore.getModifiedRecords();
    console.log(gridRows)
    var samebustime = false;
    Ext.each(gridRows, function (gridRow) {
        var dirtyInd = myStore.indexOf(gridRow);
        var newTime = new Date(store.getAt(dirtyInd).data.time);

        myStore.each(function (record, idx) {
            var newT = new Date(record.get('time'));
            if (Ext.Date.diff(newTime, newT, Ext.Date.SECOND) === 0) {
                samebustime = true;
            }
        })
    });
    if (samebustime) {
        Ext.Msg.alert('Warning', 'Same time occured')
    }
}

Fiddle