<%= content_for :head do %>

<%= stylesheet_link_tag "http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css" %>
<%= javascript_include_tag "http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js" %>
<%= ext_direct_provider %>

<% end %>

<%= javascript_tag do %>
Ext.require([ 'Ext.direct.*', 'Ext.form.*', 'Ext.tip.QuickTipManager', 'Ext.layout.container.Accordion' ]);

Ext.onReady(function() {
	/*
	 * Notice that Direct requests will batch together if they occur within the
	 * enableBuffer delay period (in milliseconds). Slow the buffering down from
	 * the default of 10ms to 100ms
	 */
	//Ext.app.REMOTING_API.enableBuffer = 100;
	//Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);

	Ext.tip.QuickTipManager.init();

	var basicInfo = Ext.create('Ext.form.Panel', {
		baseParams: {
      <%= request_forgery_protection_token %>: '<%= form_authenticity_token %>'
    },
		// configs for FormPanel
		title: 'Basic Information',
		border: false,
		bodyPadding: 10,
		// configs for BasicForm
		api: {
			// The server-side method to call for load() requests
			load: Rails.Profil.getBasicInfo,
			// The server-side must mark the submit handler as a 'formHandler'
			submit: Rails.Profil.updateBasicInfo
		},
		paramsAsHash: true,
		dockedItems: [ {
			dock: 'bottom',
			xtype: 'toolbar',
			ui: 'footer',
			style: 'margin: 0 5px 5px 0;',
			items: [ '->', {
				text: 'Submit',
				handler: function() {
					basicInfo.getForm().submit({
						params: {
							foo: 'bar',
							uid: 34
						}
					});
				}
			} ]
		} ],
		defaultType: 'textfield',
		defaults: {
			anchor: '100%'
		},
		items: [ {
			fieldLabel: 'Name',
			name: 'name'
		}, {
			fieldLabel: 'Email',
			msgTarget: 'side',
			name: 'email'
		}, {
			fieldLabel: 'Company',
			name: 'company'
		} ]
	});

	var phoneInfo = Ext.create('Ext.form.Panel', {
		title: 'Phone Numbers',
		border: false,
		api: {
			load: Rails.Profil.getPhoneInfo
		},
		bodyPadding: 10,
		paramsAsHash: true,
		defaultType: 'textfield',
		defaults: {
			anchor: '100%'
		},
		items: [ {
			fieldLabel: 'Office',
			name: 'office'
		}, {
			fieldLabel: 'Cell',
			name: 'cell'
		}, {
			fieldLabel: 'Home',
			name: 'home'
		} ]
	});

	var locationInfo = Ext.create('Ext.form.Panel', {
		title: 'Location Information',
		border: false,
		bodyPadding: 10,
		api: {
			load: Rails.Profil.getLocationInfo
		},
		paramsAsHash: true,
		defaultType: 'textfield',
		defaults: {
			anchor: '100%'
		},
		items: [ {
			fieldLabel: 'Street',
			name: 'street'
		}, {
			fieldLabel: 'City',
			name: 'city'
		}, {
			fieldLabel: 'State',
			name: 'state'
		}, {
			fieldLabel: 'Zip',
			name: 'zip'
		} ]
	});

	Ext.create('Ext.panel.Panel', {
		layout: 'accordion',
		renderTo: Ext.getBody(),
		title: 'My Profile',
		width: 300,
		height: 240,
		items: [ basicInfo, phoneInfo, locationInfo ]
	});

	// load the forms (notice the load requests will get batched together)
	basicInfo.getForm().load({
		// pass 2 arguments to server side getBasicInfo method (len=2)
		params: {
			foo: 'bar',
			uid: 34
		}
	});

	phoneInfo.getForm().load({
		params: {
			uid: 5
		}
	});

	// defer this request just to simulate the request not getting batched
	// since it exceeds to configured buffer
	Ext.Function.defer(function() {
		locationInfo.getForm().load({
			params: {
				uid: 5
			}
		});
	}, 200);

});


Ext.require([ 'Ext.direct.*', 'Ext.form.*', 'Ext.tip.QuickTipManager', 'Ext.layout.container.Accordion' ]);

Ext.onReady(function() {

	//Ext.app.REMOTING_API.enableBuffer = 0;
	//Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);

	Ext.tip.QuickTipManager.init();

	Ext.direct.Manager.on('exception', function(e) {
		Ext.Msg.alert('Failure', 'Something went wrong');
	});

	Ext.create('Ext.form.Panel', {
		renderTo: Ext.getBody(),
		frame: true,
		fileUpload: true,
		baseParams: {
      <%= request_forgery_protection_token %>: '<%= form_authenticity_token %>'
    },
		width: 500,
		height: 400,
		defaults: {
			width: 400
		},
		defaultType: 'textfield',
		items: [ {
			xtype: 'filefield',
			buttonOnly: false,
			fieldLabel: 'File1',
			name: 'fileUpload1',
			buttonText: 'Select a File...'
		}, {
			xtype: 'filefield',
			buttonOnly: false,
			fieldLabel: 'File2',
			name: 'fileUpload2',
			buttonText: 'Select a Textfile...'
		}, textArea1 = new Ext.form.TextArea({
			name: 'textArea',
			fieldLabel: "File contents",
			height: 300,
			anchor: '100%'
		}) ],
		api: {
			submit: Rails.ApplicationController.action3
		},
		buttons: [ {
			text: "Upload",
			handler: function() {

				var form = this.up('form').getForm();
				if (form.isValid()) {
					form.submit({
						waitMsg: 'Uploading your files...',
						success: function(form, action) {
							textArea1.setValue(action.result.fileContents);
						}
					});
				}

			}
		}, {
			text: "Reset",
			handler: function() {
				this.up('form').getForm().reset();
			}
		} ]
	});

});

<% end %>