${objDoc}
Ext.define('App.views.${module?matches(r"\s*")?string('', module + '.')}${ModelName}.List', {
    extend: 'Tigon.views.Grid',
    requires: ['Ext.ux.DataTip'],
    title: '${ModelName} List',
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    paging_bar: true,
    store: Store.create({
        pageSize: 99,
        remoteSort: true,
        url: '${url}/list',
        fields: ['id', 
    <#list cols as col>
        <#if col.javaType == 'Date'>
        {
            name: '${col.name}',
            type: 'date',
            dateFormat: 'time'
        }
        <#else>
        '${col.name}'
        </#if>,
    </#list> 
        'dateCreated',
        'dateUpdated'
        ]
    }),
    columns: [{
        xtype: 'rownumberer'
    }, 
    <#list cols as col>
    {
        <#if col.javaType == 'Date'>
        renderer: Utils.date_renderer(),
        width: 128,
        <#else>
        flex: 1,
        </#if>
        dataIndex: '${col.name}',
        text: '${col.Name}'
    },
    </#list>
    {
        renderer: Utils.date_renderer(),
        width: 128,
        dataIndex: 'dateCreated',
        text: 'Date Created'
    }, 
    {
        renderer: Utils.date_renderer(),
        width: 128,
        dataIndex: 'dateUpdated',
        text: 'Date Updated'
    }],
    tbar: [{
    	text: 'Refresh',
        iconCls: 'refresh',
        handler: function () {
            this.up('grid').getStore().loadPage(1);
        }
    }, {
        text: 'New ${ModelName}',
        iconCls: 'add',
        handler: function () {
            this.up('grid').show_dlg('post');
        }
    }, {
        text: 'Edit ${ModelName}',
        iconCls: 'edit',
        handler: function () {
            var g = this.up('grid'),
                rec = g.getSelectionModel().getLastSelected();
            if (rec) {
                g.show_dlg('put', function() {
                    this.down('form').loadRecord(rec);
                });
            }
            else {
                Message.warn('Please Select ${ModelName} To Edit.');
            }
        }
    }, {
    	text: 'Remove',
        iconCls: 'remove',
        handler: function () {
            var g = this.up('grid'),
                rec = g.getSelectionModel().getLastSelected();
            if (rec) {
                Dialog.confirm('Are You Sure To Remove The ${ModelName} Selected?', function() {
                    Ajax.post('${url}/delete', {
                        id: rec.get('id')
                    }, function() {
                        g.getStore().remove(rec);
                        Message.alert('${ModelName} Removed Successfully.');
                    });
                });
            } 
            else {
                Message.warn('Please Select Row To Remove.');
            }
        }
    }],
    show_dlg: function(type, fn) {
        var me = this,
            w, title, icon;
        if (type == 'put') {
            title = 'Edit ${ModelName}';
            icon = 'edit';
        }
        else {
            title = 'New ${ModelName}';
            icon = 'add';
        }
        w = Ext.create('Ext.Window', {
            title: title,
            iconCls: icon,
            closable: true,
            modal: true,
            plain: true,
            layout: 'fit',
            items: {
                xtype: 'form',
                layout: 'form',
                url: '${url}/' + (type == 'put' ? 'update' : 'create'),
                bodyPadding: '12',
                waitMsgTarget: true,
                border: 0,
                width: 350,
                defaultType: 'textfield',
                fieldDefaults: {
                    msgTarget: 'side',
                    labelWidth: 75
                },
                plugins: {
                    ptype: 'datatip'
                },
                items: [
                <#list cols as col>
                {
                <#if col.javaType == 'Date'>
                    xtype: 'datefield',
                    submitFormat: 'Y-m-d H:i:s',
                </#if>
                <#if col.notNull>
                    afterLabelTextTpl: me.required,
                    allowBlank: false,
                </#if>
                    fieldLabel: '${col.Name}',
                    name: '${col.name}'
                },
                </#list>
                {
                    xtype: 'hiddenfield',
                    name: 'id'
                }]
            },
            buttons: [{
                text: 'Save',
                iconCls: 'ok',
                handler: function() {
                    var w = this.up('window');
                    Ajax.post(w.down('form'), function() {
                        Message.alert('${ModelName} Saved Successfully.');
                        w.close();
                        me.getStore().load();
                        me.getSelectionModel().deselectAll();
                    });
                }
            }, {
                text: 'Cancel',
                iconCls: 'cancel',
                handler: function() {
                    this.up('window').close();
                }
            }]
        });
        w.show(null, fn, w);
    }
});
