/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
    Ext.QuickTips.init();

    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };
    // shorthand alias
    var fm = Ext.form;

    // custom column plugin example - checkbox
    

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel([{
                      header: "Asset ID",
           dataIndex: 'portal1_maintenance_record__asset_id_fld',
           width: 67,
           sortable: true,
           editor: new fm.TextField({
               allowBlank: true
           })
        },{
           header: "Date",
           dataIndex: 'portal1_maintenance_record__date_fld',
           width: 68,
           sortable: true,
           editor: new fm.TextField({
               allowBlank: true
           })
        },{
           header: "Maint. ID",
           dataIndex: 'portal1_maintenance_record__maintenance_id_fld',
           width: 67,
           sortable: true,
           editor: new fm.TextField({
               allowBlank: true
           })
        },{
           header: "Notes",
           dataIndex: 'portal1_maintenance_record__notes_fld',
           width: 67,
           sortable: true,
           editor: new fm.TextField({
               allowBlank: true
           })
        }
    ]);

    // by default columns are sortable
    cm.defaultSortable = true;

    // this could be inline, but we want to define the NewRec record
    // type so we can add records dynamically
    var NewRecord = Ext.data.Record.create([
           // user definable data values go here
      ]);

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: 'Portal1.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "RecID" tag
               record: 'RecID'
           }, NewRecord),

           sortInfo:{field:'RecID', direction:'ASC'}
});

    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'Portal1_editor-grid',
        width:287,
        height:167,
        title:'Edit Records',
        frame:true,

        clicksToEdit:1,

        tbar: [{
            text: 'Add Record',
            handler : function(){
                var p = new NewRecord({
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        }]
    });

    // trigger the data store load
    store.load();
});

Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },

    onMouseDown : function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td'; 
        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
    }
};