Ext.define("IceCap2.ux.form.panel.Panel4Area", {

	xtype: "iceCapPanel4Area",

	extend: "Ext.panel.Panel",

	layout: "form",

	border: false,

	bodyPadding: 5,

	defaultType: 'textfield',

	requires: [
		"IceCap2.ux.form.panel.fusionChart",
		"IceCap2.ux.form.field.COMBOBOX",
		"IceCap2.ux.form.field.sqlComboBox",
		"IceCap2.ux.form.field.sqlSearchBox",
		"IceCap2.ux.form.field.LINKFIELD"
	],

	listeners: {
		activate: {
			fn: function(i_panel) {

				var a_fields = i_panel.query("field[focusable]");

				if (a_fields.length > 0) {
					var i_field = a_fields[0];
					i_field.focus(true, 10);
				}
			}
		}
	},

	initComponent: function () {

		var i_self = this;

		var a_items = Ext.Array.slice(i_self.items, 0);

		Ext.Array.each(a_items, function(o_field) {

			 o_field.value = o_field.value || o_field.dta;
			 o_field.fieldLabel = o_field.fieldLabel || o_field.label;

			o_field.readOnly = o_field.type === "output";

			var o_meta = o_field.metaData || {
				xtype: "textfield"
			};

			delete o_field.metaData;

			Ext.apply(o_field, o_meta)

		});

		i_self.items = a_items;

		i_self.callParent();

		i_self.enableBubble("onAddWebContainer");
	}
});
