Compass.ErpApp.Widgets.DynamicGrid = {
    template: new Ext.XTemplate("<%= render_widget :dynamic_grid, :params => {:model_name => '{model_name}',\n",
        "   :grid => {\n",
        "       :title => '{title}',\n",
        "       :width => {width},\n",
        "       :height => {height},\n",
        "       :page => {page_results:this.toBoolean},\n",
        "       :page_size => {pageSize},\n",
        "       :display_msg => '{displayMsg}',\n",
        "       :empty_msg => '{emptyMsg}'\n",
        "   }\n",
        "} %>",
        {
            toBoolean: function (value) {
                var result = 'false';
                if (value == 'y') {
                    result = 'true';
                }
                return result;
            }
        }),

    addWidget: function () {
        Ext.create("Ext.window.Window", {
            title: 'Add Dynamic Grid',
            plain: true,
            buttonAlign: 'center',
            items: Ext.create("Ext.form.Panel", {
                labelWidth: 100,
                frame: false,
                bodyStyle: 'padding:5px 5px 0',
                defaults: {
                    width: 325
                },
                items: [
                    {
                        xtype: 'combo',
                        width:300,
                        value: '',
                        loadingText: 'Retrieving Dynamic Form Models ...',
                        store: Ext.create('Ext.data.Store', {
                            proxy: {
                                type: 'ajax',
                                reader: {
                                    type: 'json',
                                    root: 'dynamic_form_model'
                                },
                                url: '/erp_forms/erp_app/desktop/dynamic_forms/models/index'
                            },
                            fields: [
                                {
                                    name: 'id'
                                },
                                {
                                    name: 'model_name'
                                }
                            ]
                        }),
                        forceSelection: true,
                        editable: true,
                        fieldLabel: 'Model Name',
                        autoSelect: true,
                        mode: 'remote',
                        name: 'model_name',
                        displayField: 'model_name',
                        valueField: 'model_name',
                        triggerAction: 'all',
                        allowBlank: false,
                        plugins: [new helpQtip("Dynamic Form Model Name (Class)")],
                        listeners: {
                            select: function () {
                                this.up('form').down('fieldset').enable();
                            }
                        }
                    },
                    {
                        xtype: 'fieldset',
                        title: 'Grid Options',
                        disabled: true,
                        items: [
                            {
                                xtype: 'textfield',
                                name: 'title',
                                fieldLabel: 'Title'
                            },
                            {
                                xtype: 'textfield',
                                name: 'width',
                                value: 500,
                                fieldLabel: 'Width'
                            },
                            {
                                xtype: 'textfield',
                                name: 'height',
                                value: 500,
                                fieldLabel: 'Height'
                            },
                            {
                                xtype: 'fieldcontainer',
                                defaultType: 'radiofield',
                                width: 200,
                                defaults: {
                                    flex: 1
                                },
                                layout: 'hbox',
                                fieldLabel: 'Page Results',
                                toolTip: 'Page results.',
                                items: [
                                    {
                                        boxLabel: 'Yes',
                                        name: 'page_results',
                                        checked: true,
                                        inputValue: 'y'
                                    },
                                    {
                                        boxLabel: 'No',
                                        name: 'page_results',
                                        inputValue: 'n'
                                    }
                                ]
                            },
                            {
                                xtype: 'textfield',
                                name: 'pageSize',
                                value: 20,
                                fieldLabel: 'Rows per Page'
                            },
                            {
                                xtype: 'textfield',
                                name: 'displayMsg',
                                value: 'Displaying {0} - {1} of {2}',
                                fieldLabel: 'Paging Display Message'
                            },
                            {
                                xtype: 'textfield',
                                name: 'emptyMsg',
                                value: 'Empty',
                                fieldLabel: 'Empty Message'
                            }
                        ]
                    }
                ]
            }),
            buttons: [
                {
                    text:'Submit',
                    listeners:{
                        'click':function (button) {
                            var window = button.findParentByType('window'),
                                formPanel = window.query('form')[0],
                                grid = formPanel.down('grid'),
                                basicForm = formPanel.getForm(),
                                values = basicForm.getValues();

                            //add rendered template to center region editor
                            Ext.getCmp('knitkitCenterRegion').addContentToActiveCodeMirror(Compass.ErpApp.Widgets.DynamicGrid.template.apply(values));
                            button.up('window').close();
                        }
                    }
                },
                {
                    text: 'Close',
                    handler: function (btn) {
                        btn.up('window').close();
                    }
                }
            ]
        }).show();
    }
}

Compass.ErpApp.Widgets.AvailableWidgets.push({
    name: 'Dynamic Grid',
    iconUrl: '/images/icons/grid/grid_48x48.png',
    onClick: Compass.ErpApp.Widgets.DynamicGrid.addWidget,
    about: 'Add grid for dynamic model'
});