extjs

//Membuat form grid
var formGroup = Ext.create('Ext.form.Panel', {
    title : 'Form',
    layout : 'form',
    bodyStyle : 'padding: 7px',
    margins:'0px 0px 5px 0px',
    items: [
        {
            xtype : 'hidden',
            name  : 'group_id',
            value : 0
        },
        {
            xtype : 'textfield',
            name  : 'group_name',
            allowBlank : false,
            fieldLabel : 'Nama Group'
        }
    ],
    bbar    : [
        {
            text    : 'Save',
            iconCls : 'icon-disk',
            handler : function (btn) {
                var form = formGroup.getForm();
                var record = form.getRecord();
                var values = form.getValues();
                //alert(values);
                if (form.isValid()) {
                    storeGroup.add(form.getValues());
                    //reload storegroup
                    storeGroup.reload();
                    //reload storekontak
                    comboGroup.reload();
                    form.reset();
                } else {
                    Ext.MessageBox.show({
                        title           : 'Error',
                        msg             : 'Form tidak valid',
                        icon            : Ext.MessageBox.ERROR,
                        buttons         : Ext.MessageBox.OK
                    });
                }
            }
        },
        {
            text    : 'Delete',
            iconCls : 'icon-delete',
            disabled: true,
            id      : 'delGroup',
            handler : function (btn) {
                var form = formGroup.getForm();
                if (form.isValid()) {
                    storeGroup.remove(gridGroup.getView().getSelectionModel().getSelection()[0]);
                    form.reset();
                    var button = Ext.getCmp('delGroup');
                    button.setDisabled(true);
                } else {
                    Ext.MessageBox.show({
                        title           : 'Error',
                        msg             : 'Form tidak valid',
                        icon            : Ext.MessageBox.ERROR,
                        buttons         : Ext.MessageBox.OK
                    });
                }
            }
        },
        {
            text    : 'Reset',
            iconCls : 'icon-error',
            handler : function (btn) {
                formGroup.getForm().reset();
                var button = Ext.getCmp('delGroup');
                button.setDisabled(true);
            }
        }
    ]
});

//Membuat store untuk grid
var storeGroup = Ext.create('Ext.data.Store', {
    autoSync : true,
    autoLoad : true,
    pageSize : 20,
    idProperty: 'group_id',
    idParam :'group_id',
    fields : [
        {
            name : 'group_id',
            type : 'number'
        },
        {
            name : 'group_name',
            type : 'string'
        }
    ],
    proxy : {
        type : 'ajax',
        api : {
            create : BASE_URL + 'index.php/coba1/group/save',
            read : BASE_URL + 'index.php/coba1/group/get',
            update : BASE_URL + 'index.php/coba1/group/update',
            destroy : BASE_URL + 'index.php/coba1/group/delete'
        },
        actionMethods : {
            read   : 'POST',
            create : 'POST',
            update : 'POST',
            destroy: 'POST'
        },
        writer  : {
            writeAllFields  : true,
            type  : 'json',
            root  : 'data',
            encode: true
        },
        reader  : {
            type: 'json',
            root: 'data',
            totalProperty   : 'total',
            successProperty : 'success'
        }
    }
});

//Membuat grid group
var gridGroup = Ext.create('Ext.grid.Panel', {
    store : storeGroup,
    title : 'Grid',
    columns : [
        {
            text        : 'ID',
            dataIndex   : 'group_id',
            width       : '17%'
        },
        {
            text        : 'Nama',
            dataIndex   : 'group_name',
            width       : '82.9%'
        }
    ],
    listeners : {
        'itemclick' : function (me, record, item, index, e, eOpts) {//mendengarkan event itemclick pada grid
            var form = formGroup.getForm();
            form.setValues(record.data);
            var button = Ext.getCmp('delGroup');
            button.setDisabled(false);
        }
    },
    bbar: Ext.create('Ext.PagingToolbar', {
        store: storeGroup,
        displayInfo : false
    })
});

//Membuat panel dan menambahkan form dan grid group
var group = Ext.create('Ext.panel.Panel', {
    title : 'Group',
    layout: {
        type   :'vbox',
        padding:'5',
        align  :'stretch'
    },
    defaults : {
        flex : 1
    },
    items : [formGroup, gridGroup]
});