Ext.GridSelector = Ext.extend(Ext.Panel, {
	//additional params here
	gridL : {},
	gridR : {},
	controlPanel : {},
	resultAjaxUrl : {},
	dataIndex : {},
	dsL : {},
	cmL : {},
	dsR : {},
	cmR : {},
	height : 300,
	autoHeight : false,
	width : 650,

	//default params here
	layout : 'border',
	border : false,


	//additional functions here
	setItems : function(dsL, cmL, dsR, cmR) {
		var controlWidth = 49;
		var cmLTemp = new Ext.grid.ColumnModel(cmL);
		var cmRTemp = new Ext.grid.ColumnModel(cmR);  
		gridWidth = (this.width - controlWidth) / 2;
		this.gridL = new Ext.grid.GridPanel(
			{
				ds : CC.help.grid.setGridStore(dsL.urlBase, dsL.cols, dsL.url, dsL.primaryField),
				cm : cmLTemp,
				title : dsL.title,
				region : 'west',
				width : gridWidth,
				height : 300,
				sm : new Ext.grid.RowSelectionModel( {} ),
				autoHeight : false
			}
		);
		this.gridR = new Ext.grid.GridPanel(
			{
				ds : CC.help.grid.setGridStore(dsR.urlBase, dsR.cols, dsR.url, dsR.primaryField),
				cm : cmRTemp,
				title : dsR.title,
				region : 'east',
				width : gridWidth,
				height : 300,
				sm : new Ext.grid.RowSelectionModel( {} ),
				autoHeight : false
			}
		);
		var gridLTmp = this.gridL;
		var gridRTmp = this.gridR;
		var ajaxUrlTmp = this.resultAjaxUrl;
		this.controlPanel = new Ext.Panel(
			{
				title : '',
				region : 'center',
				width : controlWidth,
				border : false,
				bodyStyle : 'padding:4px;border-width:1px 0;',
				items : [
					{
						xtype : 'button',
						text : '>>',
						style : 'margin:22px 0 4px 0;',
						handler : function() {
							var records = gridLTmp.getSelectionModel().getSelections();
							gridRTmp.getStore().add(records);
							var n = records.length;
							for(var i = 0; i < n; i++) {
								gridLTmp.getStore().remove(records[i]);
							}
						}	
					},
					{
						xtype : 'button',
						text : '<<',
						handler : function() {
							var records = gridRTmp.getSelectionModel().getSelections();
							gridLTmp.getStore().add(records);
							var n = records.length;
							for(var i = 0; i < n; i++) {
								gridRTmp.getStore().remove(records[i]);
							}
						}	
					}
				]
			}
		);
	},


	initComponent : function() {
		this.setItems(this.dsL, this.cmL, this.dsR, this.cmR);
		this.gridL.getStore().load();
		this.gridR.getStore().load();
		this.items = [this.controlPanel, this.gridL, this.gridR];
		Ext.GridSelector.superclass.initComponent.apply(this, arguments);
	},


	getValue : function() {
		var ids = [];
		var d = this.gridR.getStore().data;
		for(var i = 0; i < d.length; i++) {
			ids.push(d.items[i].id);
		}
		return ids;
	}
	
} );

Ext.reg('gridselector', Ext.GridSelector);