Code:
/**
* The search form.
*
* @markdown
* @xtype cmod-search-form
*/
Ext.define('CMOD.view.search.SearchForm', {
extend: 'Ext.form.Panel',
alias: 'widget.cmod-search-form',
requires: [
'Ext.form.ComboBox'
],
cls: 'cmod-title-subtitle',
title: "Step 1 of 2: <i>Enter the required and known search criteria about the document(s) you want to find, then click 'Search'. * - Denotes any required criteria.</i>",
autoScroll: true,
layout: 'anchor',
padding: 10,
bodyPadding: 10,
monitorValid: true,
fieldDefaults: {
//anchor: '100%',
labelAlign: 'left'
},
dockedItems: [{
xtype: 'cds-buttontoolbar',
dock: 'bottom',
items: [{
text: 'Search',
itemId: 'search',
formBind: true
// disabled: true
},{
text: 'Clear',
itemId: 'clear'
},{
xtype: 'tbtext',
cls: 'search-error',
text: '<b>There was a problem with your search criteria, please try again.</b>',
itemId: 'errorMessage'
}]
}],
defaults: {
margin: '0 0 10'
},
items: [{
fieldLabel: 'Report Type: *',
labelSeparator: '',
name: 'report_type',
id: 'report_type',
displayField: 'name',
valueField: 'value',
xtype: 'combo',
queryMode: 'local',
editable: false,
store: 'ReportTypes'
},{
fieldLabel: ' ',
labelSeparator: '',
name: 'report_description',
id: 'report_description',
value: '',
xtype: 'displayfield'
}]
});
Here is the SearchController that controllers the form
Code:
/**
* The search controller used to set up application bindings to search views.
*
* @markdown
*/
Ext.define('CMOD.controller.SearchController', {
extend: 'Ext.app.Controller',
requires: [
'CMOD.model.Operator',
'CMOD.model.Choice',
'CMOD.form.OperatorComboBox',
'CMOD.form.ChoiceComboBox',
'CMOD.view.menu.ItemContextMenu',
'Ext.form.field.Hidden',
'Ext.layout.component.field.FieldContainer',
'Ext.form.FieldContainer',
'Ext.form.field.Date',
'Ext.picker.Date',
'Ext.button.Split',
'Ext.picker.Month'
],
stores: [
'ReportTypes',
'SearchResults',
'SearchParameters',
'Operators'
],
refs: [{
ref: 'viewport',
selector: 'viewport'
},{
ref: 'searchForm',
selector: 'cmod-search-form'
},{
ref: 'searchResultsGrid',
selector: 'cmod-search-results-grid'
},{
ref: 'searchResultsPanel',
selector: 'cmod-search-results-panel'
},{
ref: 'itemContextMenu',
selector: 'cmod-item-context-menu'
}],
/**
* Configure application event bindings.
*/
init: function() {
var me = this;
// Application Event Listeners
me.control({
'cmod-search-form': {
beforeactivate: {
scope: me,
fn: me.initSearch,
single: true
}
},
'cmod-search-form button[itemId=search]': {
click: {
scope: me,
fn: me.handleSearch
}
},
'cmod-search-form button[itemId=clear]': {
click: {
scope: me,
fn: me.handleClear
}
},
'cmod-search-form combo[name=report_type]':{
change: {
scope: me,
fn: me.changeReportType
}
},
'cmod-search-results-panel button[itemId=revise]': {
click: {
scope: me,
fn: me.refineSearch
}
},
'cmod-search-results-panel button[itemId=view]': {
click: {
scope: me,
fn: me.viewReports
}
},
'cmod-search-results-panel button[itemId=download]': {
click: {
scope: me,
fn: me.downloadReports
}
},
'cmod-search-results-grid': {
celldblclick: {
scope: me,
fn: me.resultDoubleClick
},
itemcontextmenu: {
scope: me,
fn: me.gridContextMenu
},
selectionchange: {
scope: me,
fn: me.gridSelectionChange
}
},
'cmod-item-context-menu [itemId=view]': {
click: {
scope: me,
fn: me.viewReports
}
},
'cmod-item-context-menu [itemId=download]': {
click: {
scope: me,
fn: me.downloadReports
}
},
'cmod-operator-combobox': {
change: { fn: me.handleOperatorChange, scope: me }
}
});
},
resultDoubleClick: function(table, td, cellIndex, record, tr, rowIndex) {
var me = this;
me.showSingleDocument(record.get('docId'));
},
gridContextMenu: function(view, record, tr, index, e) {
var me = this,
menu = new CMOD.view.menu.ItemContextMenu(),
items = menu.items;
//
if (me.userRmsEnabled()) {
if (me.allSelectedItemsMapped()) {
items.getByKey('download').disabled = false;
} else {
items.getByKey('download').disabled = true;
}
} else {
items.getByKey('download').disabled = true;
}
e.stopEvent();
menu.showAt(e.getXY());
},
gridSelectionChange: function() {
var me = this,
cmp = me.getSearchResultsPanel(),
dockedItems = cmp.getDockedItems('cds-buttontoolbar[dock="bottom"]'),
items = dockedItems[0].items;
//
if (me.userRmsEnabled()) {
if (me.allSelectedItemsMapped()) {
items.getByKey('download').setDisabled(false);
} else {
items.getByKey('download').setDisabled(true);
}
} else {
items.getByKey('download').setDisabled(true);
}
},
userRmsEnabled: function() {
var user = CMOD.config.user;
if (user.rmsEnabled) {
return true;
} else {
return false;
}
},
allSelectedItemsMapped: function() {
var me = this,
rows = me.getSearchResultsGrid().getSelectionModel().getSelection(),
i=0;
//
for(i = 0; i < rows.length; i++) {
if (!rows[i].get('mapped')) {
return false;
}
}
//
return true;
},
showSingleDocument: function(docId) {
var url = '/myCDSdocs/DisplayDocument?folderName=' + Ext.getCmp('report_type').value + '&docId=' + docId;
window.open(url);
},
downloadSingleDocument: function(docId) {
var url = '/myCDSdocs/rms.jsp?folderName=' + Ext.getCmp('report_type').value + '&docId=' + docId;
window.open(url);
},
/**
*
*/
initSearch: function() {
var me = this;
// load the report types store
me.getStore('ReportTypes').load({
scope: me,
callback: me.reportTypesLoaded
});
me.displaySearchErrorMessage(false);
},
reportTypesLoaded: function() {
var me = this,
cmp = Ext.getCmp('report_type');
cmp.setValue(cmp.getStore().getAt(0).get('value'));
},
handleClear: function() {
var me = this,
form = me.getSearchForm(),
formEls = form.items.getRange(),
i=0,
len;
me.displaySearchErrorMessage(false);
Ext.getCmp('report_description').setValue('');
Ext.getCmp('report_type').clearValue();
//remove old search parameters - Leave first two fields
for(i=2, len=formEls.length; i < len; i++) {
form.remove(formEls[i]);
}
},
/**
* Search stub.
*/
handleSearch: function() {
var me = this,
srStore = me.getStore('SearchResults');
me.displaySearchErrorMessage(false);
me.getSearchForm().setLoading('Loading, please wait...');
srStore.load({
params: me.getSearchForm().getForm().getValues(),
scope: me,
callback: me.addSearchResultsToGrid
});
},
handleOperatorChange: function(element, value) {
var name = element.name,
id = name.replace('_operator', '_value2');
if (value === 1024) {
Ext.getCmp(id).enable();
} else {
Ext.getCmp(id).disable();
}
},
addSearchResultsToGrid: function(records, operation, success) {
var me = this,
srStore = me.getStore('SearchResults'),
resultsStore,
cols,
columnConfig = [],
fields = [],
i=0;
//
if (!success) {
me.displaySearchErrorMessage(true);
return;
}
//
cols = srStore.data.getAt(0).get('columnHeader'),
columnConfig.push({ text: cols[0].replace(/_/g, ' '), dataIndex: cols[0], locked: true, hideable: false });
fields.push(cols[0]);
//
for(i = 1; i < cols.length; i++) {
columnConfig.push({ header: cols[i].replace(/_/g, ' '), text: cols[i].replace(/_/g, ' '), dataIndex: cols[i] });
//Got to love hard coding crap :(
if (cols[i] == 'Pages') {
fields.push({name: cols[i], type: 'number'});
} else {
fields.push(cols[i]);
}
}
columnConfig.push({ text: 'Document Id', dataIndex: 'docId', hidden: true });
fields.push('docId');
columnConfig.push({ text: 'Datawatch RMS Mapped', dataIndex: 'mapped', hidden: true });
fields.push('mapped');
resultsStore = Ext.create('Ext.data.Store', {
fields: fields,
data: srStore.data.getAt(0).get('results')
});
if (srStore.data.getAt(0).get('additional')) {
me.getSearchResultsGrid().setTitle('Search Results: <i>'+resultsStore.count()+'</i> - There are additional reports found, please revise your search.');
} else {
me.getSearchResultsGrid().setTitle('Search Results: <i>'+resultsStore.count()+'</i>');
}
me.getSearchResultsGrid().reconfigure(resultsStore, columnConfig);
me.getSearchForm().setLoading(false);
me.getViewport().getComponent('card-panel').layout.setActiveItem(2);
// after updating the card layout active item it is necessary to
// refresh the grid view so it can finish rendering itself
me.getSearchResultsGrid().getView().refresh();
me.gridSelectionChange();
me.getSearchResultsGrid().doLayout();
},
/**
*
* @param display
*/
displaySearchErrorMessage: function(display) {
var me = this,
cmp,
items,
dockedItems;
me.getSearchForm().setLoading(false);
cmp = me.getSearchForm();
dockedItems = cmp.getDockedItems('cds-buttontoolbar[dock="bottom"]');
items = dockedItems[0].items;
items.getByKey('errorMessage').setVisible(display);
return;
},
/**
* Search stub.
*/
refineSearch: function() {
var me = this;
me.getViewport().getComponent('card-panel').layout.setActiveItem(1);
},
/**
* Display a new window for each report selected in the grid.
*/
viewReports: function() {
var me = this,
rows = me.getSearchResultsGrid().getSelectionModel().getSelection(),
i=0;
//
for(i = 0; i < rows.length; i++) {
me.showSingleDocument(rows[i].get('docId'));
}
},
/**
* Display a new window for each report selected in the grid.
*/
downloadReports: function() {
var me = this,
rows = me.getSearchResultsGrid().getSelectionModel().getSelection(),
i=0;
//
for(i = 0; i < rows.length; i++) {
me.downloadSingleDocument(rows[i].get('docId'));
}
},
/**
*
* @param field
* @param value - Report Type / Folder Name in ODWEK
*/
changeReportType: function(field, value) {
var me = this,
i=0,
searchResultsStore,
store;
me.displaySearchErrorMessage(false);
//
if (value != null) {
me.getSearchForm().setLoading('Loading, please wait...');
for(i = 0; i < field.store.data.items.length; i++) {
if (value == field.store.data.items[i].data.value) {
Ext.getCmp('report_description').setValue(field.store.data.items[i].data.description);
}
}
searchResultsStore = me.getStore('SearchResults');
searchResultsStore.getProxy().setExtraParam('folderName', value);
store = me.getStore('SearchParameters');
store.getProxy().setExtraParam('folderName', value);
me.getStore('SearchParameters').load({
scope: me,
callback: me.addSearchParameters
});
}
},
/**
*
* @param records
* @param operation
* @param success
*/
addSearchParameters: function(records, operation, success) {
var me = this,
form = me.getSearchForm(),
formEls = form.items.getRange(),
store = me.getStore('SearchParameters'),
i=0,
len;
//remove old search parameters - Leave first two fields
for(i=2, len=formEls.length; i < len; i++) {
form.remove(formEls[i]);
}
if (success) {
// add the required parameters first, followed by any others
store.query('required', true).each(me.addSearchParameter, me);
store.query('required', false).each(me.addSearchParameter, me);
me.addApplicationType();
} else {
me.addErrorMessage();
}
//
me.getSearchForm().setLoading(false);
},
/**
*
* @param param
* @param index
* @param total
*/
addSearchParameter: function(param, index, total){
var me = this,
store = me.getStore('SearchParameters'),
opStore = param.operators(),
betweenIdx = opStore.find('operatorName', 'Between'),
form = me.getSearchForm(),
fieldCont = form.add({
xtype: 'fieldcontainer',
fieldLabel: param.getDisplayName() + ':' + (param.get('required') ? ' *' : ''),
labelSeparator: '',
combineErrors: true,
layout: 'hbox',
defaults: {
hideLable: true,
xtype: 'textfield'
}
}),
choiceStore = null,
cmp,
now;
if (param.get('choice')) {
choiceStore = param.choices();
}
cmp = Ext.create('CMOD.form.OperatorComboBox', {
name: param.get('name') + '_operator',
displayField: 'operatorName',
valueField: 'operatorValue',
queryMode: 'local',
value: opStore.getAt(0).get('operatorValue'),
editable: false,
store: opStore
});
fieldCont.add(cmp);
cmp = Ext.create('Ext.form.field.Display', {
width: 10
});
fieldCont.add(cmp);
if (param.get('fieldQualifier') == 'D') {
now = new Date();
cmp = Ext.create('Ext.form.DateField', {
name: param.get('name') + '_value1',
id: param.get('name') + '_value1',
value: new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000))
});
} else if (param.get('choice')) {
cmp = Ext.create('CMOD.form.ChoiceComboBox', {
name: param.get('name') + '_value1',
id: param.get('name') + '_value1',
displayField: 'name',
valueField: 'value',
queryMode: 'local',
editable: false,
store: choiceStore,
fieldStyle:'width:100%; min-width:150px;'
});
} else {
cmp = Ext.create('Ext.form.field.Text', {
name: param.get('name') + '_value1',
id: param.get('name') + '_value1',
allowBlank: !param.get('required'),
width: 150
});
}
fieldCont.add(cmp); //Add first value field (either date picker or text field)
if (betweenIdx > -1) {
cmp = Ext.create('Ext.form.field.Display', {
width: 10
});
fieldCont.add(cmp);
if (param.get('fieldQualifier') == 'D') {
cmp = Ext.create('Ext.form.DateField', {
name: param.get('name') + '_value2',
id: param.get('name') + '_value2',
value: new Date(),
disabled: true
});
} else {
cmp = Ext.create('Ext.form.field.Text', {
name: param.get('name') + '_value2',
id: param.get('name') + '_value2',
disabled: true,
width: 150
});
}
fieldCont.add(cmp); //Add second value field (either date picker or text field)
}
},
/**
*
* @param param
* @param index
* @param total
*/
addApplicationType: function() {
var me = this,
applicationTypeStore = Ext.create('Ext.data.Store', {
fields: ['value', 'label'],
data: [
{ label: 'And', value: 'AND' },
{ label: 'Or', value: 'OR' }
]
}),
form = me.getSearchForm();
form.add({
xtype: 'combo',
fieldLabel: 'Application Type',
name: 'application_type',
displayField: 'label',
valueField: 'value',
queryMode: 'local',
value: 'AND',
editable: false,
store: applicationTypeStore
});
},
/**
*
*/
addErrorMessage: function(){
var me = this,
form;
form = me.getSearchForm();
form.add({
name: 'noCriteriaFound',
value: 'There was a problem trying to load the criteria for the selected report type.',
xtype: 'displayfield'
});
}
});
Not sure how it could be the form configuration as this is the only thing not working and it only on IE pre version 9.
IE Compatability
Reply With Quote
