PDA

View Full Version : Can't seem to get TabItem structure right



jaycoates
24 Nov 2009, 11:50 AM
Hi everyone,

I'm trying to layout two Form fieldsets at the top of a grid, the forms controlling the query input for the data display in the grid.

I've tried several object compositions, but none seem to be giving me what I'm wanting.

Any help would be appreciated!

Jay

So far, here is the code I have:


package com.resonate.rtpwebui.client.widget.profiles;

import java.util.Arrays;
import java.util.List;

import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.CheckBoxGroup;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.resonate.rtpwebui.client.AppEvents;
import com.resonate.rtpwebui.client.model.Lookup;
import com.resonate.rtpwebui.client.model.ProfileItem;
import com.resonate.rtpwebui.client.result.GetLookupServiceResult;

public class ProfilesTabItemPanel extends TabItem {

private ListStore<ProfileItem> profileStore;
private FormData formData = new FormData();
private ListStore<Lookup> allProfilesStore;
private ListStore<Lookup> campaignStore;
private ListStore<Lookup> siteStore;
private ListStore<Lookup> userStore;
private ListStore<Lookup> waveStore;

private static final String TAB_NAME = "Profiles";
private static final String FILTER_TITLE = "Filter Profiles";
private static final String FILTER_BY = "Filter By";
// private static final String FILTER_PROJECT_NAME = "Project Name";
private static final String FILTER_PROFILE_NAME = "Profile Name";
private static final String FILTER_CAMPAIGN_NAME = "Campaign Name";
private static final String FILTER_SITE_NAME = "Uses this Site";
private static final String FILTER_CREATED_BY = "Created By";
private static final String FILTER_DATE_RANGE = "Date Range";
private static final String FILTER_START_RANGE = "Start Range";
private static final String FILTER_END_RANGE = "End Range";
private static final String FILTER_WAVE = "Wave";
private static final String FILTER_PROFILE_STATUS = "Profile Status";
private static final String FILTER_CREATED = "Created";
private static final String FILTER_PUBLISHED = "Published";
private static final String FILTER_PENDING = "Pending Approval";
private static final String FILTER_APPROVED = "Approved";

private Grid<ProfileItem> initGrid() {
ColumnConfig name = new ColumnConfig("name", "Name", 200);
ColumnConfig description = new ColumnConfig("description",
"Description", 500);
ColumnConfig queryid = new ColumnConfig("queryid", "Query ID", 60);
ColumnConfig sitelistid = new ColumnConfig("sitelistid",
"Site List ID", 60);

ColumnModel cm = new ColumnModel(Arrays.asList(name, description,
queryid, sitelistid));

profileStore = new ListStore<ProfileItem>();

Grid<ProfileItem> grid = new Grid<ProfileItem>(profileStore, cm);
grid.getView().setForceFit(true);
grid.getSelectionModel().addSelectionChangedListener(
new SelectionChangedListener<ProfileItem>() {
@Override
public void selectionChanged(
SelectionChangedEvent<ProfileItem> se) {
ProfileItem m = se.getSelectedItem();
showProfileItem(m);
}
});
return grid;
}

private LayoutContainer initQueryForm() {
LayoutContainer queryForm = new LayoutContainer();
queryForm.setLayout(new ColumnLayout());

FieldSet fieldSet1 = new FieldSet();
fieldSet1.setCollapsible(true);
fieldSet1.setHeading(FILTER_BY);

FormLayout layout = new FormLayout();
layout.setLabelWidth(90);
fieldSet1.setLayout(layout);

/* TextField<String> projectName = new TextField<String>();
projectName.setFieldLabel(FILTER_PROJECT_NAME);
projectName.setAllowBlank(true);
fieldSet.add(projectName, formData);
*/

allProfilesStore = new ListStore<Lookup>();
ComboBox<Lookup> multiProfile = new ComboBox<Lookup>();
multiProfile.setFieldLabel(FILTER_PROFILE_NAME);
multiProfile.setDisplayField("value");
multiProfile.setTriggerAction(TriggerAction.ALL);
multiProfile.setStore(allProfilesStore);
multiProfile.setTypeAhead(true);
fieldSet1.add(multiProfile, formData);

campaignStore = new ListStore<Lookup>();
ComboBox<Lookup> multiCampaign = new ComboBox<Lookup>();
multiCampaign.setFieldLabel(FILTER_CAMPAIGN_NAME);
multiCampaign.setDisplayField("value");
multiCampaign.setTriggerAction(TriggerAction.ALL);
multiCampaign.setStore(campaignStore);
multiCampaign.setTypeAhead(true);
fieldSet1.add(multiCampaign, formData);

siteStore = new ListStore<Lookup>();
ComboBox<Lookup> multiSite = new ComboBox<Lookup>();
multiSite.setFieldLabel(FILTER_SITE_NAME);
multiSite.setDisplayField("value");
multiSite.setTriggerAction(TriggerAction.ALL);
multiSite.setStore(siteStore);
multiSite.setTypeAhead(true);
fieldSet1.add(multiSite, formData);

userStore = new ListStore<Lookup>();
ComboBox<Lookup> multiUser = new ComboBox<Lookup>();
multiUser.setFieldLabel(FILTER_CREATED_BY);
multiUser.setDisplayField("value");
multiUser.setTriggerAction(TriggerAction.ALL);
multiUser.setStore(userStore);
multiUser.setTypeAhead(true);
fieldSet1.add(multiUser, formData);

FieldSet fieldSet2 = new FieldSet();
fieldSet2.setCollapsible(true);
fieldSet2.setExpanded(false);
fieldSet2.setHeading(FILTER_DATE_RANGE);
fieldSet2.setLayout(layout);

DateField startDate = new DateField();
startDate.setFieldLabel(FILTER_START_RANGE);
fieldSet2.add(startDate, formData);

DateField endDate = new DateField();
endDate.setFieldLabel(FILTER_END_RANGE);
fieldSet2.add(endDate, formData);

waveStore = new ListStore<Lookup>();
ComboBox<Lookup> multiWave = new ComboBox<Lookup>();
multiWave.setFieldLabel(FILTER_WAVE);
multiWave.setDisplayField("value");
multiWave.setTriggerAction(TriggerAction.ALL);
multiWave.setStore(waveStore);
fieldSet2.add(multiWave, formData);

CheckBoxGroup statusGroup = new CheckBoxGroup();
statusGroup.setFieldLabel(FILTER_PROFILE_STATUS);
statusGroup.setWidth(200);

CheckBox createdBox = new CheckBox();
createdBox.setBoxLabel(FILTER_CREATED);
statusGroup.add(createdBox);

CheckBox publishedBox = new CheckBox();
publishedBox.setBoxLabel(FILTER_PUBLISHED);
statusGroup.add(publishedBox);

CheckBox pendingBox = new CheckBox();
pendingBox.setBoxLabel(FILTER_PENDING);
statusGroup.add(pendingBox);

CheckBox approvedBox = new CheckBox();
approvedBox.setBoxLabel(FILTER_APPROVED);
statusGroup.add(approvedBox);

fieldSet2.add(statusGroup, formData);

FormPanel leftForm = new FormPanel();
leftForm.add(fieldSet1);
queryForm.add(leftForm, new ColumnData(.5));

FormPanel rightForm = new FormPanel();
rightForm.add(fieldSet2);
queryForm.add(rightForm, new ColumnData(.5));

return queryForm;
}

public ProfilesTabItemPanel() {
setText(TAB_NAME);
this.setLayout(new ColumnLayout());
this.add(initQueryForm());
this.add(initGrid());
}

}