
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<stripes:layout-render name="../../../../../client/layout/adminlayout.jsp">
	<stripes:layout-component name="contents">

		<script type="text/javascript">
			/* global Ext, CoreUtil */
			Ext.onReady(function () {
				var componentStore = Ext.create('Ext.data.Store', {
					// This store only grabs components which have Questions.
					storeId: 'componentStore',
					autoLoad: true,
					sorters: 'componentName',
					fields: [
						'componentId',
						'componentName'
					],
					proxy: {
						id: 'componentStoreProxy',
						type: 'ajax',
						url: '../api/v1/resource/components/questionviews'
					}
				});

				var componentPanel = Ext.create('Ext.grid.Panel', {
					flex: 2,
					store: componentStore,
					layout: 'fit',
					columns: [
						{
							text: 'Components',
							dataIndex: 'componentName',
							flex: 1
						}
					]
				});

				var questionPanel = Ext.create('Ext.grid.Panel', {
					flex: 3,
					layout: 'fit',
					viewConfig: {
						emptyText: 'Please select a component.',
						deferEmptyText: false
					},
					columns: [
						{
							text: 'Questions',
							dataIndex: 'componentName',
							flex: 1
						}
					]
				});


				var answerPanel = Ext.create('Ext.grid.Panel', {
					flex: 3,
					layout: 'fit',
					viewConfig: {
						emptyText: 'Please select a component.',
						deferEmptyText: false
					},
					columns: [
						{
							text: 'Answers',
							dataIndex: 'componentName',
							flex: 1
						}
					]
				});


				var mainPanel = Ext.create('Ext.panel.Panel', {
					title: 'Manage Questions <i class="fa fa-question-circle"  data-qtip="User questions and answers about a component."></i>',
					bodyPadding: '6em',
					layout: {
						type: 'hbox',
						align: 'stretch',
						pack: 'start',
						fit: 'fit'
					},
					defaults: {
					},
					items: [
						componentPanel,
						{
							xtype: 'splitter'
						},
						questionPanel,
						{
							xtype: 'splitter'
						},
						answerPanel
					]
				});
				Ext.create('Ext.container.Viewport', {
					layout: 'fit',
					items: [
						mainPanel
					]
				});
			});

		</script>
	</stripes:layout-component>
</stripes:layout-render>
Create initial framework for new Ext JS version of Component Questions
Create initial framework for new Ext JS version of Component Questions

We set up a UI framework for the new component versions page, including
three panels across the screen in an hbox configuration. The idea is
that a user selects the component, selections a question belonging to
a component, and then the answers to to that question.

The three panels, componentPanel, questionPanel, and answerPanel, are
all inside of mainPanel, and are separated by splitters, which allow the
panels to be resized across the entire panel, adjusting automatically.
