/*
 * File: app/view/Main.js
 *
 * This file was generated by Sencha Architect version 3.0.2.
 * http://www.sencha.com/products/architect/
 *
 * This file requires use of the Ext JS 4.2.x library, under independent license.
 * License of Sencha Architect does not include license for Ext JS 4.2.x. For more
 * details see http://www.sencha.com/license or contact license@sencha.com.
 *
 * This file will be auto-generated each and everytime you save your project.
 *
 * Do NOT hand edit this file.
 */

Ext.define('MyApp.view.Main', {
	extend: 'Ext.panel.Panel',

	requires: [
		'Ext.tree.Panel',
		'Ext.tree.View',
		'Ext.tree.Column',
		'Ext.form.FieldSet',
		'Ext.button.Button',
		'Ext.toolbar.Spacer',
		'Ext.resizer.Splitter'
	],

	layout: 'fit',
	bodyPadding: '3 10 0 10',
	title: 'System logs',

	initComponent: function() {
		var me = this;

		Ext.applyIf(me, {
			items: [
				{
					xtype: 'container',
					layout: {
						type: 'hbox',
						align: 'stretch'
					},
					items: [
						{
							xtype: 'container',
							flex: 1,
							itemId: 'leftSide',
							layout: {
								type: 'vbox',
								align: 'stretch'
							},
							items: [
								{
									xtype: 'treepanel',
									flex: 1,
									height: 250,
									itemId: 'logFileTree',
									margin: '8 0 3 0',
									width: 400,
									animCollapse: false,
									header: false,
									title: 'My Tree Grid Panel',
									store: 'files',
									animate: false,
									rootVisible: false,
									useArrows: true,
									viewConfig: {
										markDirty: false
									},
									columns: [
										{
											xtype: 'treecolumn',
											dataIndex: 'name',
											text: 'Log files',
											flex: 1
										},
										{
											xtype: 'gridcolumn',
											width: 110,
											dataIndex: 'modified',
											text: 'Last updated'
										},
										{
											xtype: 'gridcolumn',
											cls: 'setLeft',
											width: 110,
											align: 'right',
											dataIndex: 'size',
											text: 'Size'
										}
									]
								},
								{
									xtype: 'fieldset',
									padding: '3 10 10 10',
									title: 'Actions',
									layout: {
										type: 'hbox',
										align: 'stretch'
									},
									items: [
										{
											xtype: 'button',
											itemId: 'showPHP',
											icon: '../../gfx/php.png',
											scale: 'medium',
											text: 'PHP errors'
										},
										{
											xtype: 'tbspacer',
											flex: 1
										},
										{
											xtype: 'button',
											itemId: 'downloadZip',
											icon: '../../gfx/filetypes/zip_folder.png',
											scale: 'medium',
											text: 'Month'
										},
										{
											xtype: 'tbspacer',
											width: 10
										},
										{
											xtype: 'button',
											itemId: 'downloadWeek',
											icon: '../../gfx/filetypes/zip_folder.png',
											scale: 'medium',
											text: 'Week'
										},
										{
											xtype: 'tbspacer',
											width: 10
										},
										{
											xtype: 'button',
											itemId: 'downloadLatest',
											icon: '../../gfx/filetypes/zip_folder.png',
											scale: 'medium',
											text: 'Latest'
										}
									]
								}
							]
						},
						{
							xtype: 'splitter',
							margin: '0 3 0 3',
							padding: '0 5 0 5'
						},
						{
							xtype: 'container',
							region: 'center',
							flex: 2,
							itemId: 'centerContainer',
							layout: 'fit',
							items: [
								{
									xtype: 'fieldset',
									itemId: 'content',
									overflowY: 'auto',
									title: 'Content'
								}
							]
						}
					]
				}
			]
		});

		me.callParent(arguments);
	}

});