// <#-- Group Form <User Grid Left> -->
Ext.define("App.view.UserGridLeft", {
    extend: "Ext.ux.LiveSearchGridPanel",
    xtype: "userGridLeft",
    title: App.localeRes("User"),
    id: "userGridLeft",
    layout: "fit",
    height: "100%",
    features: [{ ftype: "grouping" }],

    reloadStore: function() {
        this.getStore().reload();
    },

    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            store: Ext.create("App.store.UserComboStore", {}),
            columns: [
                {
                    xtype: "actioncolumn",
                    flex: 1,
                    width: 70,
                    align: "center",
                    items: [
                        {
                            iconCls: "x-fa fa-plus-circle",
                            handler: function(
                                view,
                                rowIndex,
                                colIndex,
                                item,
                                e,
                                record
                            ) {
                                var leftStore = me.getStore();
                                var rightStore = me
                                    .up("container")
                                    .down("userGridRight")
                                    .getStore();
                                record.data.v = true;
                                record.dirty = true;
                                record.phantom = false;
                                rightStore.add(record);
                            },
                            scope: me
                        }
                    ]
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "username",
                    text: App.localeRes("User Name"),
                    flex: 7
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "fullname",
                    text: App.localeRes("Full Name"),
                    flex: 7
                }
            ],
            buttons: [
                {
                    text: "Add New User",
                    handler: function(button, event) {
                        App.loadModuleWin("userWindow", "Add New User", {
                            callbackOnClose: function() {
                                me.reloadStore();
                            }
                        });
                    }
                }
            ],
            listeners: {
                added: function(panel, parent, pos, opts) {
                    me.getStore().load({
                        callback: function(records, operation, success) {}
                    });
                }
            }
        });

        me.callParent(arguments);
    }
});

// <#-- Group Form <user grid right> -->
Ext.define("App.view.UserGridRight", {
    extend: "Ext.grid.Panel",
    xtype: "userGridRight",
    alias: "widget.userGridRight",
    title: App.localeRes("Selected User"),
    id: "userGridRight",
    height: "100%",
    // plugins: ["gridfilters"],
    params: {},

    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            store: Ext.create("App.store.GroupUserStore", {}),
            selModel: "cellmodel",
            columns: [
                {
                    xtype: "actioncolumn",
                    flex: 1,
                    width: 70,
                    align: "center",
                    items: [
                        {
                            iconCls: "x-fa fa-minus-circle",
                            handler: function(
                                view,
                                rowIndex,
                                colIndex,
                                item,
                                e,
                                record
                            ) {
                                var leftSto = me
                                    .up("container")
                                    .down("userGridLeft")
                                    .getStore();
                                var leftStoV = leftSto.findRecord(
                                    "id",
                                    record.data.id
                                );
                                leftStoV.data.v = false;
                                leftStoV.dirty = true;
                                leftStoV.phantom = false;

                                var rightSto = me.getStore();
                                rightSto.remove(record);
                            },
                            scope: me
                        }
                    ]
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "username",
                    text: App.localeRes("User Name"),
                    flex: 7
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "fullname",
                    text: App.localeRes("Full Name"),
                    flex: 7
                },
                {
                    xtype: "gridcolumn",
                    dataIndex: "v",
                    text: "selected",
                    flex: 7,
                    hidden: true,
                    // filter: {
                    //     type: "boolean",
                    //     value: true
                    // }
                }
            ],
            listeners: {
                added: function(panel, parent, pos, opts) {
                    if (me.params.record) {
                        me.getStore().load({
                            params: {id: me.params.record.data.id},
                            callback: function(records, operation, success) {}
                        });
                    }
                }
            }
        });

        me.callParent(arguments);
    }
});
