function u3imageRenderer (value,p,r) {
	return String.format("<img src='/images/u/{0}' width='{1}' height='{2}' ext:qtip='<img src=\"/images/u/{3}\" width=\"{4}\" height=\"{5}\">'>", r.data['img1file'], r.data['img1width'],r.data['img1height'], r.data['img2file'], r.data['img2width'],r.data['img2height'] );
}

//u3imgTip = new Ext.Tip({element:'body',html: '<img src="" style="" alt="">', closable: true});

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;
    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td';
        return v ? '<img src="/global/ext/resources/images/default/menu/checked.gif" alt="X">' : '<img src="/global/ext/resources/images/default/menu/unchecked.gif" alt=" ">';
    }
};


// Now we can begin adding members to the Ext.u3 application using the Module Pattern
u3.kafelGrid = Ext.extend(Ext.grid.GridPanel, {
	primaryKey : 'articul',
	id: 'kafel-grid',
	currentNode : null,
	
	load : function(cfg) {
		this.store.load({params: cfg});
	},
	
	float2Renderer : function (data, metadata, record, rowIndex, columnIndex, store) {
		return data ? data.toFixed(2) : '';
	},
	
	fixImages : function (store, records, options) {

		for (var i = 0; i < records.length; i++ ) {
			var s = records[i].get('img1');
			var obj = Ext.util.JSON.decode(s);
			records[i].set('img1file', obj.file);
			records[i].set('img1width', obj.width);
			records[i].set('img1height', obj.height);
			
			s = records[i].get('img2');
			var obj = Ext.util.JSON.decode(s);
			records[i].set('img2file', obj.file);
			records[i].set('img2width', obj.width);
			records[i].set('img2height', obj.height);
		}
	},
	
    initComponent:function() {
    	// create quicktips...
    	
    	//Ext.QuickTips.init();

	// Apply a set of config properties to the singleton
	Ext.apply(Ext.QuickTips.getQuickTip(), {
	    maxWidth: 300,
	    minWidth: 100,
	    showDelay: 50,
	    trackMouse: false
	});
	
	
    	
    	this.kafelRecord = Ext.data.Record.create([
    		{name: '_isnew', type: 'boolean', defaultValue: false},
        	{name: 'articul', type: 'string'},
        	{name: '_key', type: 'string', mapping: 'articul'},
        	{name: 'collection', type: 'string'},
            {name: 'dimensions', type: 'string'},
            {name: 'title', type: 'string', sortDir: 'ASC', sortType: 'asUCString'},  //type = how the data should be displayed
            {name: 'color', type: 'string'},
            {name: 'suitable', type: 'string'},
            {name: 'pricem2', type: 'float'},
            {name: 'price', type: 'float'},
            {name: 'country', type: 'string'},
            {name: 'aspb', type: 'boolean'},
            {name: 'amsk', type: 'boolean'},
            {name: 'aeburg', type: 'boolean'},
            {name: 'anovosib', type: 'boolean'},
            {name: 'asamara', type: 'boolean'},
            {name: 'img1', type: 'string'},
            {name: 'img1width', type: 'string'},
            {name: 'img1height', type: 'string'},
            {name: 'img1file', type: 'string'},
            {name: 'img2', type: 'string'},
            {name: 'img2width', type: 'string'},
            {name: 'img2height', type: 'string'},
            {name: 'img2file', type: 'string'}
        ]);
        
    	var u3reader =  new Ext.data.JsonReader(
    		{ //creates array from JSON response
            	root: 'collections-view', // name of the property that is container for an Array of row objects
            	id: this.primaryKey //the property within each row object that provides an ID for the record (optional)
        	},
        	this.kafelRecord //instead of defining inline just pass a reference to the object 
    	);
        
        
        // Ext.data.HttpProxy has event named loadexception : ( Object this, Object options, Object response, Error e )
    	var u3ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                //where to retrieve data
                url: '/ajax.pl', //url to data object (server side script)
                method: 'POST'
            }),
            reader: u3reader,
            baseParams: { '_function' : 'KafelSearch' },
            sortInfo:{field: 'articul', direction: "ASC"},
            autoLoad: false,
            listeners: {
            	load: function(store, records, opt) {
            		var grid = Ext.getCmp('u3kafelgrid');
            		grid.expand();
            		grid.setTitle( 'Коллекция: <span style="font-weight: bold">' + opt.params.collection + '</span>');
            	}
            }
      	});
      	u3ds.on('load', this.fixImages, this );
      	
		// to handle Save changesrecords...
		// u3ds.on('update', this.onRecordUpdate, this);
    
    	/*this.editColumn = new u3.grid.EditColumn({
                header: "Edit",
                dataIndex: 'edit', 
                width: 9, 
                sortable: false
            });*/
    	this.c1 = new Ext.grid.CheckColumn({
       				header: "Спб",
       				dataIndex: 'aspb',
       				width: 75
    			});
    	this.c2 = new Ext.grid.CheckColumn({
       				header: "Москва",
       				dataIndex: 'amsk',
       				width: 75
    			});			
 		this.c3 = new Ext.grid.CheckColumn({
       				header: "Екатеринбург",
       				dataIndex: 'aeburg',
       				width: 75
    			});
    	this.c4 = new Ext.grid.CheckColumn({
       				header: "Новосибирск",
       				dataIndex: 'anovosib',
       				width: 75
    			});               
  		this.c5 = new Ext.grid.CheckColumn({
       				header: "Самара",
       				dataIndex: 'asamara',
       				width: 75
    			});
    	
    	
		Ext.apply(this,{
		        store: u3ds,       //the DataStore object to use (ds: is shorthand)
            	colModel: this.getColumnModel(u3ds), //gets the ColumnModel object to use (cm: is shorthand)
            	//autoExpandColumn: 'title', //which column to stretch in width to fill up the grid width and not leave blank space
            //Enable a Selection Model.  The Selection Model defines the selection behavior,
            //(single vs. multiple select, row or cell selection, etc.)
            //selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//true to limit row selection to 1 row})
           //footer: true,
            plugins: [this.c1,this.c2,this.c3,this.c4,this.c5],
            stripeRows: false
		});
        // call parent initComponent
        u3.kafelGrid.superclass.initComponent.call(this);
        
        this.loadingMask = new Ext.LoadMask(Ext.getBody(), {msg:"Пожалуйста подождите, идёт загрузка информации...", store: this.store});
    } // end of function initComponent
});
//-> this = window



u3.kafelGrid.prototype.getColumnModel = function (store) {

          return new Ext.grid.ColumnModel([
                {
                    header:"Вид",
                    width: 50, 
                    sortable: false,
                    dataIndex: 'img1',
					renderer: u3imageRenderer
                },
                {
                    header: "Наименование", 
                    width: 200, 
                    sortable: true,
                    dataIndex: 'title'
                },{
                    header: "Размер, см", 
                    width: 70, 
                    sortable: false,
                    dataIndex: 'dimensions'
                },
                {
                    header: "Цвет", 
                    width: 80, 
                    sortable: true,
                    dataIndex: 'color'
                },
                 {
                    header: "Применение", 
                    width: 90, 
                    sortable: true,
                    dataIndex: 'suitable'
                },
                {
                    header: "Цена кв.м/руб.", 
                    width: 70, 
                    sortable: true,
                    dataIndex: 'pricem2',
                    align: 'right',
                    renderer: this.float2Renderer
                },
                {
                    header: "Цена шт/руб.", 
                    width: 70, 
                    sortable: true,
                    dataIndex: 'price',
                    align: 'right',
                    renderer: this.float2Renderer
                },
                {
                    header: "Страна", 
                    width: 80, 
                    sortable: true,
                    dataIndex: 'country'
                },
				this.c1,
				this.c2,
				this.c3,
				this.c4,
				this.c5
            ]);//end colModel
}

 
/*
        function refreshGrid() {
            ds.reload();//
        }; // end refresh 
*/

// register xtype
Ext.reg('u3kafelgrid', u3.kafelGrid);