Ext.define("Ext.ux.dmd.columnsexplorer.PropertyGrid", {

	extend: "Ext.grid.property.Grid",
	alias: ["widget.dmdColumnsPropertyGrid"],

	// Property names used for the property grid
	propertyNames: {
		type: "Type",
		uitype: "UI type",
		length: "Length",
		name: "Name",
		title: "Title"
	},

	// Default values used for the property grid
	source: {
		type: "varchar",
		uitype: "textfield",
		length: 20,
		name: "",
		title: ""
	},

	// Custom editor fields for the property grid
	customEditors: {
		type: {
			xtype: "combobox",
			name: "type",
			displayField: "value",
			valueField: "value",
			queryMode: "local",
			typeAhead: true,
			triggerAction: "all",
			selectOnTab: true,
			lazyRender: true,
			listConfig: {
				getInnerTpl: function() {
					return "<div class=\"dmddesigner combobox-head icon {iconCls}\">{value}</div><div class=\"dmddesigner combobox-body\">{help}</div>";
				}
			},
			listeners: {
				"afterrender": function(cmp) {
					var store;

					store = Ext.create("Ext.data.Store", {
						fields: ["key", "value", "help", "iconCls"],
						renderer: function(key) {
							var r = this.store.findRecord("key" , key);
							return (r ? r.data.value : key);
						}
					});

					cmp.bindStore(store);

					cmp.store.loadData(ip2.domainDataTypeArrayNew);
				}
			},
		},
		uitype: {
			xtype: "combobox",
			name: "uitype",
			displayField: "value",
			valueField: "value",
			queryMode: "local",
			typeAhead: true,
			triggerAction: "all",
			selectOnTab: true,
			lazyRender: true,
			listeners: {
				"afterrender": function(cmp) {

					var columns = [],
						store;

					store = Ext.create("Ext.data.Store", {
						fields: ["key", "value", "uitype", "help"]
					});

					cmp.bindStore(store);

					/*
						$.each(ip2.uitypes, function(name, obj) {
							if ( obj && obj.designer ) {
								columns.push({
									key: obj.designer.xtype,
									value: name,
									uitype: obj,
									help: obj.title
								});
							}
						});
					*/

					//cmp.store.loadData(columns);
				}
			}
		}
	},


	// Toolbar docked with create add button
	dockedItems: [
		{
			xtype: "toolbar",
			dock: "top",
			border: false,
			items: [
				{
					xtype: "button",
					iconCls: "pf-add",
					text: "Create column",
					handler: function(button, event) {

						var grid = button.up().up();

						grid.fireEvent("createColumn");
					}
				}
			]
		}
	],

	initComponent: function() {

		this.callParent(arguments);

		var self = this;

	}

});
