Solved

ext.js comboboxes not displaying correctly.

Posted on 2008-10-28
7
14,733 Views
Last Modified: 2013-11-13
Hello ext.js experts.

I have posted this same question on an ext.js forum located here:
http://extjs.com/forum/showthread.php?p=244326#post244326

However, here I have attached a Word document which has screen shots which are not available there.

I have a grid with a combobox on each row called the vendor box.
When a user clicks on the vendor combobox, the user gets a list of all the available vendors that we use.
On the other hand, if the user starts typing in the combobox, the user will get only one vendor in a list that matches with the text typed in. The user can then click on that vendor.
If the user types the vendor, and then clicks on the list, and then clicks on a save button, then all of the other vendor comboboxes on other rows will lose their value. Then if the user clicks on a vendor combobox and chooses from the whole list, and then clicks on the save button, then those comboboxes on other rows that lost their values previously will regain their original values.
Apparently what is happening is that the comboboxes on the other rows are attempting to refresh based on whichever list was presented to the user. So, if there was only one vendor in the list and then the save button is clicked, the other comboboxes on other rows are trying to refresh based on that list of one choice, therefore they lose their values. If the combobox is clicked and the whole list of choices is presented, and then the save button is clicked, then the comboboxes will be able to refresh correctly because they have the whole list from which to chose.
My question is, how do I get the comboboxes to refresh from the whole list even when only one choice is presented to the user. Or, how do I get the comboboxes to not lose their correct values when a different combobox is changed.
Below is the code for the whole page.

The vendor ComboBox is called vendorCombo and it is on line 189.
The vendor data store is called vendorStore.
The json reader for the vendor is called vendorReader.
The ext.data.Record is just called "vendor."

Someone else wrote the code below (and has since left the company). I'm a beginner on extjs so please answer the questions in a very elementary manner. I thank you all much in advance.

The code:


/// <reference path="vswd-ext_2.0.2.js" />

//Create the BudgetManager object

WallHomes.Ext.EBudget.BudgetManager = function()

{ 

Ext.Ajax.timeout = 600000;

Ext.Ajax.on('requestexception', function(conn, response, options)

{

Ext.Msg.hide();

Ext.Msg.alert('There was a server error.', response.responseText);

}

);
 

var eBudgetServiceHandler = 'Services/EBudgetService.ashx';

var excelExportHandler = 'Services/ExcelExport.ashx'; 

var currentBudgetId = 0;

var viewport = new Ext.Viewport({

layout: 'fit'

});
 

var checkBoxColumn = new Ext.grid.CheckboxColumn({

dataIndex: 'IsChecked',

width: 55,

sortable: false,

hideable: false,

menuDisabled: true

});
 

var dropdownRecord = Ext.data.Record.create([

{name: 'Value'},

{name: 'Text'}

]);
 

var emptyDropdownRecord = new dropdownRecord({

Value : '',

Text: ' '

});

var dropdownReader = new Ext.data.JsonReader({

root: "items",

id: "Value"

}, dropdownRecord);
 

var costCodeStore = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: eBudgetServiceHandler,

method: 'GET'

}),

baseParams: {method: 'getCostCodes'},

reader: dropdownReader

}); 
 

var itemStore = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: eBudgetServiceHandler,

method: 'GET'

}),

baseParams: {method: 'getUserItems'},

reader: dropdownReader

}); 
 

// Define widgets

var budgetTypeCombo = new Ext.form.ComboBox({

store: new Ext.data.Store(WallHomes.Ext.EBudget.BudgetTypeSto reConfig),

mode: 'local',

fieldLabel: 'Budget Type',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150

});
 

var communityCombo = new Ext.form.ComboBox({

store: new Ext.data.Store(WallHomes.Ext.EBudget.UserCommuniti esStoreConfig),

mode: 'local',

fieldLabel: 'Communities',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

listWidth: 200,

maxHeight: 300,

listAlign: 'tl-bl',

valueNotFoundText: 'Loading...'

});
 

var planCombo = new Ext.form.ComboBox({

store: new Ext.data.Store(WallHomes.Ext.EBudget.PlanStoreConf ig),

mode: 'local',

fieldLabel: 'Plan',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

maxHeight: 300,

valueNotFoundText: 'Loading...'

});
 

var elevationCombo = new Ext.form.ComboBox({

store: new Ext.data.Store(WallHomes.Ext.EBudget.ElevationStor eConfig),

mode: 'local',

fieldLabel: 'Elevation',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

valueNotFoundText: 'Loading...'

});
 

var costCodeCombo = new Ext.form.ComboBox({

store: costCodeStore,

mode: 'local',

fieldLabel: 'Cost Code',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

listWidth: 300,

listAlign: 'tl-bl'

});
 

var itemCombo = new Ext.form.ComboBox({

store: itemStore,

mode: 'local',

fieldLabel: 'Item Number',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

maxHeight: 300,

listWidth: 350,

listAlign: 'tl-bl'

});
 

var validateSearchCriteriaDropdowns = function()

{

if (budgetTypeCombo.disabled) returnfalse;

if (communityCombo.disabled) returnfalse;

if (planCombo.disabled) returnfalse;

if (elevationCombo.disabled) returnfalse;

if (costCodeCombo.disabled) returnfalse;

if (itemCombo.disabled) returnfalse;

returntrue;

}
 

var vendor = Ext.data.Record.create([{

name: 'VendorId', 

mapping: 'AddressBookId',

type: 'float'

}, {

name: 'VendorName',

mapping: 'AddressBookName'

}, {

name: 'AddressBookType'

}, {

name: 'City'

}]);
 

var vendorReader = new Ext.data.JsonReader({

root: 'vendors',

totalProperty: 'totalCount',

id: 'AddressBookId'

}, vendor);
 

var vendorStore = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: eBudgetServiceHandler,

method: 'GET'

}),

baseParams: {

method: 'getvendors',

vendorstatus: 'V'

},

reader: vendorReader

});
 

var vendorCombo = new Ext.form.ComboBox({

allowBlank: false,

fieldLabel: 'Vendor',

width: 127,

tpl: new Ext.XTemplate('<tpl for="."><div class="search-item">', '<h3><span>{VendorId} {VendorName}</span>{title}, {City}</h3>', '{excerpt}', '</div></tpl>'),

lazyRender: false,

loadingText: 'loading...',

typeAhead: true,

emptyText: 'Vendor Name or ID',

minLength: 1,

mode: 'local',

triggerAction: 'all',

forceSelection: false,

displayField: 'VendorName',

valueField: 'VendorId',

listWidth: 350,

editable: true,

itemSelector: 'div.search-item',

typeAhead: false,

onTypeAhead: function(){

if (this.store.getCount() > 0) {

var r = this.store.getAt(0);

var raw = this.getRawValue();

if (isNaN(raw)) { // if not a number then display value field

var newValue = r.data[this.displayField];

}

else {
 

var newValue = r.data[this.valueField];

}
 

var len = newValue.length;

var selStart = this.getRawValue().length;

if (selStart != len) {

this.setRawValue(newValue);

this.selectText(selStart, newValue.length);

}

}

},

doQuery: function(q, forceAll){ //override doQuery to search for value field as well

if (q === undefined || q === null) {

q = '';

}

var qe = {

query: q,

forceAll: forceAll,

combo: this,

cancel: false

};

if (this.fireEvent('beforequery', qe) === false || qe.cancel) {

returnfalse;

}

q = qe.query;

forceAll = qe.forceAll;

if (forceAll === true || (q.length >= this.minChars)) {

if (this.lastQuery !== q) {

this.lastQuery = q;

if (this.mode == 'local') {

this.selectedIndex = -1;

if (forceAll) {

this.store.clearFilter();

}

else {
 

var val = q

val = val.toString().replace(/\/i/, "");

val = val.substring(1, val.length);
 

if (isNaN(val)) { //if nan than show display field

this.store.filter(this.displayField, q);

}

else {

this.store.filter(this.valueField, q);
 

}

}

this.onLoad();

}

else {

this.store.baseParams[this.queryParam] = q;

this.store.load({

params: this.getParams(q)

});

this.expand();

}

}

else {

this.selectedIndex = -1;

this.onLoad();

}

}

},

store: vendorStore,

listeners: {

'beforequery' : function(e){ 

var len = e.query.length;
 

e.query = new RegExp(Ext.escapeRe(e.query), "i");

e.query.length = len;
 

return 1;

},

'show' : function (field){

field.selectText();

}

}

})
 

var budget = Ext.data.Record.create([

{name: 'Id'},

{name: 'Description'},

{name: 'ItemCount'},

{name: 'Location'},

{name: 'PlanNumber'},

{name: 'Elevation'},

{name: 'TotalAmount'},

{name: 'Type'},

{name: 'AddBy'},

{name: 'AddDate', type: 'date', dateFormat: 'n/j/Y g:i A'},

{name: 'ModifyBy'},

{name: 'ModifyDate', type: 'date', dateFormat: 'n/j/Y g:i A'},

{name: 'UploadBy'},

{name: 'UploadDate', type: 'date', dateFormat: 'n/j/Y g:i A'}

]);
 

var budgetReader = new Ext.data.JsonReader({

root: 'items',

totalProperty: 'totalCount',

id: 'Id'},

budget

);
 

var budgetDataStore = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: eBudgetServiceHandler,

method: 'GET'

}),

reader: budgetReader,

remoteSort: true,

listeners: {

'beforeload' : function (store, options)

{

store.baseParams = {

budgetTypeId: budgetTypeCombo.getValue(),

communityId: communityCombo.getValue(), 

planNumber: planCombo.getValue(), 

elevation: elevationCombo.getValue(), 

costCode: costCodeCombo.getValue(), 

itemNumber: itemCombo.getValue(), 

method: 'getbudgets'

};

// Always force the user to select a new Budget to view Budget Items again

// since we don't have a guarantee the previously selected Budget is in the 

// Budget Grid anymore.

currentBudgetId = 0;

budgetItemGrid.hide();

}

},

sortInfo:{field: 'Location', direction: "ASC"}

}); 
 

var formatDate = function(value)

{

return value ? value.dateFormat('m/d/y h:i A') : '';

}
 

var budgetGridColumnModel = new Ext.grid.ColumnModel([

checkBoxColumn,

{

header: 'Type',

dataIndex: 'Type'

},{

header: 'Location',

dataIndex: 'Location'

},{

header: 'Description',

dataIndex: 'Description'

},{

header: 'Plan',

dataIndex: 'PlanNumber'

},{

header: 'Elevation',

dataIndex: 'Elevation'

},{

header: 'Item Count',

dataIndex: 'ItemCount',

sortable: false

},{

header: 'Budget Amount',

dataIndex: 'TotalAmount',

align: 'right',

renderer: 'usMoney',

sortable: false

},{

header: 'Add By',

dataIndex: 'AddBy',

sortable: false

},{

header: 'Add Date',

dataIndex: 'AddDate',

renderer: formatDate,

sortable: false

},{

header: 'Modify By',

dataIndex: 'ModifyBy',

sortable: false

},{

header: 'Modify Date',

dataIndex: 'ModifyDate',

renderer: formatDate,

sortable: false 

},{

header: 'UploadBy',

dataIndex: 'UploadBy',

sortable: false

},{

header: 'Upload Date',

dataIndex: 'UploadDate',

sortable: false,

renderer: formatDate

}

]);

budgetGridColumnModel.defaultSortable = true;
 

var budgetItem = Ext.data.Record.create([

{name: 'Amount'},

{name: 'BudgetId'},

{name: 'CostCode'},

{name: 'CostType'},

{name: 'Elevation'},

{name: 'Id'},

{name: 'ItemNumber'},

{name: 'ItemDescription'},

{name: 'OptionCode'},

{name: 'PlanNumber'},

{name: 'Region'},

{name: 'Location'},

{name: 'BudgetType'},

{name: 'VendorId', type: 'float'},

{name: 'VendorName'},

{name: 'IsChecked', type: 'bool'}

]);
 

var budgetItemReader = new Ext.data.JsonReader({

root: 'items',

totalProperty: 'totalCount',

id: 'Id'},

budgetItem

);
 

var getCostTypeValue = function(){

if ((Ext.ComponentMgr.get('12110costTypeCheckbox').getValue()) && (Ext.ComponentMgr.get('12109costTypeCheckbox').getValue())){

return'';

}
 

if (Ext.ComponentMgr.get('12110costTypeCheckbox').getValue()){

return'12110';

}
 

if (Ext.ComponentMgr.get('12109costTypeCheckbox').getValue()){

return'12109';

}
 

return'';

}
 

var budgetItemDataStore = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: eBudgetServiceHandler,

method: 'GET',

timeout: 90000

}),

reader: budgetItemReader,

remoteSort: true,

listeners: {

'beforeload' : function (store, options)

{

store.baseParams = {

budgetTypeId: budgetTypeCombo.getValue(),

community: communityCombo.getValue(), 

plan: planCombo.getValue(), 

elevation: elevationCombo.getValue(), 

costCode: costCodeCombo.getValue(), 

item: itemCombo.getValue(), 

costType: getCostTypeValue(),

budgetid: currentBudgetId,

method: 'getbudgetitems'

}

}

}

}); 
 

var renderGridVendor = function (value){

var record = vendorStore.getById(value);

if (record == undefined){

return'<div class="x-form-invalid">Invalid Vendor</div>';

}

return record.data['VendorName'];

}
 

var budgetItemGridColumnModel = new Ext.grid.ColumnModel([

checkBoxColumn,

{

header: 'Location',

dataIndex: 'Location'

},{

header: 'Plan Number',

dataIndex: 'PlanNumber',

width: 70

},{

header: 'Elevation',

dataIndex: 'Elevation',

width: 55

},{

header: 'Cost Code',

dataIndex: 'CostCode',

width: 70

},{

header: 'Cost Type',

dataIndex: 'CostType',

width: 70

},{

header: 'Item Number',

dataIndex: 'ItemNumber'

},{

header: 'Item Description',

dataIndex: 'ItemDescription'

},{

header: 'Option Code',

dataIndex: 'OptionCode',

editor: new Ext.form.TextField()

},{

header: 'Vendor',

dataIndex: 'VendorId',

renderer: renderGridVendor,

editor: vendorCombo

},{

header: 'Cost',

dataIndex: 'Amount',

align: 'right',

renderer: 'usMoney',

editor: new Ext.form.NumberField({

allowNegative: false,

allowBlank: false

})

}

]);

budgetItemGridColumnModel.defaultSortable = true;
 

var saveBudgetItemChanges = function (){

var uploadData = [];

var records = budgetItemDataStore.getRange();

var currentRecord;

var isUpload = false;

var uploadItem = {};

var isDeleting = false;
 

for (var i = 0, len = records.length; i < len; i++) {

currentRecord = records[i]; 

isUpload = false;

uploadItem = {};
 

if (currentRecord.dirty){

uploadItem['Id'] = currentRecord.data['Id'];

uploadItem['OptionCode'] = currentRecord.data['OptionCode'];

uploadItem['VendorId'] = currentRecord.data['VendorId'];

uploadItem['Amount'] = currentRecord.data['Amount'];

uploadItem['IsChecked'] = currentRecord.data['IsChecked'];

if (currentRecord.data['IsChecked']){

isDeleting = true;

}

isUpload = true;

}
 

if (isUpload){

uploadData.push(uploadItem);

}

}
 

if (uploadData.length == 0){

Ext.Msg.alert('No Changes Detected', 'No changes or item deletes need to be saved.');

return;

}
 

if (isDeleting){

Ext.Msg.show({

title:'Budget Item Delete Confirmation',

msg: 'Saving changes will also delete any Budget Items you have checked.\nAre you sure you want to continue?',

buttons: Ext.Msg.YESNO,

icon: Ext.MessageBox.WARNING,

fn: function (btn){

if (btn == 'yes'){

Ext.Msg.wait('Please wait while your changes are saved...', 'Saving Changes');

Ext.Ajax.request({

url: eBudgetServiceHandler,

method: 'POST',

params: { 

method: 'savebudgetitems', 

data: Ext.encode(uploadData), 

start: budgetItemDataStore.lastOptions['start']

},

success: onSaveBudgetItemsSuccess

})

}

}

});

}

else{
 

Ext.Msg.wait('Please wait while your changes are saved...', 'Saving Changes');

Ext.Ajax.request({

url: eBudgetServiceHandler,

method: 'POST',

params: { 

method: 'savebudgetitems', 

data: Ext.encode(uploadData)

},

success: onSaveBudgetItemsSuccess

})

}

}
 

var budgetItemGrid = new Ext.grid.EditorGridPanel({

store: budgetItemDataStore,

cm: budgetItemGridColumnModel, 

height: (viewport.getSize().height * 0.4),

width: viewport.getSize().width - 310,

title: 'Budget Items',

hidden: true,

loadMask: true,

frame: true,

clicksToEdit: 1,

plugins: checkBoxColumn,

tbar: [{

id: 'btnSaveBudgetItemChanges',

text: 'Save Changes',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/save.gif',

handler: saveBudgetItemChanges,

tooltip: 'Save any changes made and delete any items checked below.'

},'-',{

text: 'Export Budget Item List',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/page_excel.png',

tooltip: 'Export the current Budget Item list to Excel',

handler: function (){

var exportUrl = excelExportHandler + '?exporttype=item&budgetTypeId=' + 

budgetTypeCombo.getValue() + 

'&communityId=' + communityCombo.getValue() +

'&planNumber=' + planCombo.getValue() +

'&elevation=' + elevationCombo.getValue() +

'&costCode=' + costCodeCombo.getValue() +

'&itemNumber=' + itemCombo.getValue() + 

'&sort=' + budgetDataStore.sortInfo.field + 

'&dir=' + budgetDataStore.sortInfo.direction +

'&budgetId=' + currentBudgetId + 

'&costtype=' + getCostTypeValue();

window.location = exportUrl; 

}

},'-',{

xtype: 'tbtext',

text: 'Any checked Items will be deleted when saving changes.'

}],

bbar: new Ext.PagingToolbar({

pageSize: 25,

store: budgetItemDataStore,

displayInfo: true,

displayMsg: 'Displaying records {0} - {1} of {2}',

emptyMsg: "No records to display",

plugins: new Ext.ux.Andrie.pPageSize({

variations: [10, 15, 20, 25, 50, 75, 100],

beforeText: 'Records per page:',

afterText: ''

}),

id: 'budgetItemGridPager'

})

});
 

var showBudgetItemGrid = function(){

budgetItemGrid.show();

budgetItemGrid.store.load({

params: { 

start: 0,

limit: Ext.getCmp('budgetItemGridPager').getPageSize()

}

});

}
 

var showAddBudgetItemsWindow = function(){
 

var store = budgetGrid.store;

var data = [];

var records = store.getRange();

var objs = {};
 

for (var i = 0, len = records.length; i < len; ++i) {

var r = records[i];
 

if(r.get('IsChecked')){

data.push(r.get('Id'));

}

}
 

WallHomes.Ext.EBudget.AddItemModule.show(data);

}
 

var showCopyBudgetWindow = function (){

if (!budgetGrid.getSelectionModel().hasSelection()){

Ext.Msg.alert('Select a Budget', 'You must select a Budget to copy first.');

return;

}
 

var selectedBudgetRecord = budgetGrid.getStore().getById(currentBudgetId);

var locationStore = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: 'Services/EBudgetService.ashx',

method: 'GET'

}),

reader: new Ext.data.JsonReader(

{root: "items", id: "Value"}, 

[{name: 'Value'}, {name: 'Text'}]

)

});
 

var copyBudgetSourcePanel = new Ext.Panel({

border: false,

columnWidth: .3,

items:[{

xtype:"fieldset",

layout: "table",

hideBorders: true,

layoutConfig: {

columns: 2

},

title:"Source Budget",

autoHeight:true,

items: [{

html: 'Budget Type:'

},{

html: selectedBudgetRecord.data['Type']

},{

html: 'Location:'

},{

html: selectedBudgetRecord.data['Location']

},{

html: 'Plan:'

},{

html: selectedBudgetRecord.data['PlanNumber']

},{

html: 'Elevation:'

},{

html: selectedBudgetRecord.data['Elevation']

}]

}]

}); 
 

var onCopyBudgetLocationComboSelected = function(){

var locationId = copyBudgetLocationCombo.getValue();

var budgetTypeId = copyBudgetTypeCombo.getValue();

switch (budgetTypeId){

//New Region Budget

case"1":

copyBudgetPlanElevationCombo.store.baseParams = {regionId: locationId, method: 'getplannumberandelevations' };

refreshCombo(copyBudgetPlanElevationCombo, 'Select Plan/Elevation...');

copyBudgetAddressCombo.disable();

break;

//New Community Budget

case"2":

copyBudgetPlanElevationCombo.store.baseParams = {communityId: locationId, method: 'getplannumberandelevations' };

refreshCombo(copyBudgetPlanElevationCombo, 'Select Plan/Elevation...');

copyBudgetAddressCombo.disable();

break;

//New Job Budget

case"3":

copyBudgetAddressCombo.allowBlank = false;

copyBudgetAddressCombo.store.baseParams = {communityId: locationId, method: 'getJobsForCommunity'};

refreshCombo(copyBudgetAddressCombo, 'Select a Job...');
 

copyBudgetPlanElevationCombo.store.baseParams = {communityId: locationId, method: 'getplannumberandelevations' };

refreshCombo(copyBudgetPlanElevationCombo, 'Select Plan/Elevation...');

break;

}

} 
 

var copyBudgetTypeCombo = new Ext.form.ComboBox({

store: new Ext.data.Store(WallHomes.Ext.EBudget.BudgetTypeSto reConfig),

mode: 'local',

fieldLabel: 'Budget Type',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

allowBlank: false,

emptyText: 'Select Budget Type...',

width: 150,

listeners: {

'select': function (comboBox, record, index){

var typeId = record.data['Value'];

var locationParams;
 

switch (typeId){

case"1":

locationParams = {method: 'getUserRegions'};

copyBudgetAddressCombo.allowBlank = true;

clearCopyBudgetValues();

break;

case"2":

locationParams = {method: 'getUserCommunities'};

copyBudgetAddressCombo.allowBlank = true;

clearCopyBudgetValues();

break;

case"3":

locationParams = {method: 'getUserCommunities'};

copyBudgetAddressCombo.allowBlank = false;

clearCopyBudgetValues();

break;

}
 

copyBudgetLocationCombo.store.baseParams = locationParams;
 

copyBudgetLocationCombo.clearValue();

copyBudgetLocationCombo.setValue('Loading...');

copyBudgetLocationCombo.disable();

copyBudgetLocationCombo.store.load({

callback: function (r, options, success){

copyBudgetLocationCombo.emptyText = 'Select a Location...';

copyBudgetLocationCombo.clearValue();

copyBudgetLocationCombo.enable();

if (r.length == 1)

{

copyBudgetLocationCombo.setValue(r[0].get('Value'));

onCopyBudgetLocationComboSelected();

}

}

});

}

}

});
 

var copyBudgetLocationCombo = new Ext.form.ComboBox({

store: locationStore,

mode: 'local',

fieldLabel: 'Location',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

disabled: true,

allowBlank: false,

listeners: {

'select': onCopyBudgetLocationComboSelected

},

listWidth: 250

});
 

var copyBudgetAddressCombo = new Ext.form.ComboBox({

store: new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: 'Services/EBudgetService.ashx',

method: 'GET'

}),

baseParams: {method: 'getJobsForCommunity'},

reader: new Ext.data.JsonReader(

{root: "items", id: "Value"}, 

[{name: 'Value'}, {name: 'Text'}]

) 

}),

mode: 'local',

fieldLabel: 'Address',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

listWidth: 250,

disabled: true,

allowBlank: false,

listeners: {

'select': function (comboBox, record, index){ 

if (copyBudgetTypeCombo.getValue() != '3') return; 

if (!copyBudgetPlanElevationCombo.isValid()) return;
 

copyBudgetDescription.setValue('NEW-JOB-'+ record.data['Text']+ '-' + copyBudgetPlanElevationCombo.getRawValue());

}

}

});
 

var copyBudgetPlanElevationCombo = new Ext.form.ComboBox({

store: new Ext.data.Store({

proxy: new Ext.data.HttpProxy({

url: 'Services/EBudgetService.ashx',

method: 'GET'

}),

baseParams: {method: 'getPlanAndElevationsCommand'},

reader: new Ext.data.JsonReader(

{root: "items", id: "Value"}, 

[{name: 'Value'}, {name: 'Text'}]

) 

}),

mode: 'local',

fieldLabel: 'Plan-Elevation',

displayField: 'Text',

valueField: 'Value',

triggerAction: 'all',

forceSelection: true,

typeAhead: true,

width: 150,

disabled: true,

allowBlank: false,

listeners: {

'select': function (comboBox, record, index){

var budgetTypeId = copyBudgetTypeCombo.getValue();

var description = '';
 

switch (budgetTypeId){

case'1':

description = 'NEW-REGIONAL-' + record.data['Text'];

break;

case'2':

description = 'NEW-'+ copyBudgetLocationCombo.getRawValue() + '-' + record.data['Text'];

break;

case'3':

description = 'NEW-JOB-'+ copyBudgetAddressCombo.getRawValue() + '-' + record.data['Text'];

break;

}

copyBudgetDescription.enable();

copyBudgetDescription.setValue(description);

}

}

});
 

var copyBudgetDescription = new Ext.form.TextField({

fieldLabel: 'Description',

id: 'copyBudgetDescription',

disabled: true,

allowEmpty: false,

width: 200,

maxLength: 200

});
 

var clearCopyBudgetValues = function(){

copyBudgetAddressCombo.store.removeAll();

copyBudgetAddressCombo.emptyText = '';

copyBudgetAddressCombo.reset();

copyBudgetAddressCombo.disable();

copyBudgetPlanElevationCombo.store.removeAll();

copyBudgetPlanElevationCombo.emptyText = '';

copyBudgetPlanElevationCombo.reset();

copyBudgetPlanElevationCombo.disable();

copyBudgetDescription.setRawValue('');

}
 

var validateCopyBudget = function()

{

if (copyBudgetTypeCombo.disabled) returnfalse;

if (copyBudgetLocationCombo.disabled) returnfalse;

if (copyBudgetTypeCombo.getValue() == '3'){

if (copyBudgetAddressCombo.disabled) returnfalse;

}

if (copyBudgetPlanElevationCombo.disabled) returnfalse;

if (copyBudgetDescription.disabled) returnfalse;

returntrue;

}
 

var copyBudgetDestinationPanel = new Ext.Panel({

border: false,

columnWidth: .7,

items:[{

xtype:"fieldset",

layout: "form",

title:"Destination Budget",

autoHeight:true,

items: [

copyBudgetTypeCombo,

copyBudgetLocationCombo,

copyBudgetAddressCombo,

copyBudgetPlanElevationCombo,

copyBudgetDescription,

{

// This invisible textfield is to disable the submit button when the combo boxes are loading new data.

xtype:'textfield',

id: 'copybudgetvalidatorField',

width:1,

height:1,

validator: validateCopyBudget,

allowBlank: false,

value: 1,

hideLabel: true,

hidden: true

}

]

}]

});
 

var copyBudgetForm = new Ext.FormPanel({

monitorValid: true,

autoHeight: true,

items:[{

layout:"column",

items:[copyBudgetSourcePanel, copyBudgetDestinationPanel]

}],

buttons: [

{

id: 'cancelCopyBudgetButton',

text: 'Cancel',

handler: function(){

copyBudgetWindow.close();

}

},{

id: 'performCopyBudgetButton',

text: 'Copy to Selected',

formBind: true,

handler: function(){

Ext.Msg.wait('Copying Selected Budget...', 'Copying Budget');
 

var location;

var planElevation = copyBudgetPlanElevationCombo.getValue().split(',');

if (copyBudgetTypeCombo.getValue() == '3')

{

location = copyBudgetAddressCombo.getValue();

}

else

{

location = copyBudgetLocationCombo.getValue(); 

}
 

Ext.Ajax.request({

url: eBudgetServiceHandler,

method: 'POST',

params: { 

method: 'copyBudget', 

budgetId: currentBudgetId,

typeId: copyBudgetTypeCombo.getValue(),

locationCode: location,

description: copyBudgetDescription.getValue(),

planNumber: planElevation[0],

elevation: planElevation[1]

},

success: onCopyBudgetsSuccess

})

}

}

]

});
 

var copyBudgetWindow = new Ext.Window({

width: 600,

autoHeight: true,

modal: true,

title: 'Copy Budget',

items: [copyBudgetForm]

});
 

copyBudgetWindow.show();

copyBudgetTypeCombo.store.load();
 

var onCopyBudgetsSuccess = function(response, options){

Ext.Msg.hide();

copyBudgetWindow.close();

budgetItemGrid.hide();

budgetGrid.store.load({

params: { 

budgetId: response.responseText,

start: Ext.getCmp('budgetGridPager').store.lastOptions.params['start'],

limit: Ext.getCmp('budgetGridPager').getPageSize()

} 

});

}

}
 

var showModifyBudgetDescriptionWindow = function(){

if (!budgetGrid.getSelectionModel().hasSelection()){

Ext.Msg.alert('Select a Budget', 'You must select a Budget to modify first.');

return;

}
 

var budgetId = budgetGrid.getSelectionModel().getSelected().data['Id'];

var budgetRecord = budgetDataStore.getById(budgetId);
 

var onSaveBudgetSuccess = function(response, options){

Ext.Msg.hide();

currentBudgetId = 0;

budgetItemGrid.hide();

budgetDataStore.load({

params:{

sort: budgetDataStore.lastOptions['sort'],

dir: budgetDataStore.lastOptions['dir'],

start: Ext.getCmp('budgetGridPager').store.lastOptions.params['start'],

limit: Ext.getCmp('budgetGridPager').getPageSize()

}

});

}
 

var saveBudgetDescription = function(buttonId, newDescription){

if (buttonId == 'cancel') return;
 

Ext.Msg.wait('Saving changes and refreshing Budget grid...', 'Saving Changes');

Ext.Ajax.request({

url: eBudgetServiceHandler,

method: 'POST',

params: { budgetId: budgetId, description: newDescription, method: 'saveBudget'},

success: onSaveBudgetSuccess

})

}
 

Ext.Msg.prompt(

'Change Budget Description', 

'Enter the new description for the selected Budget:',

saveBudgetDescription,

this,

false,

budgetRecord.data['Description']

);

}
 

var onJdeUploadSuccess = function()

{

Ext.Msg.hide();

Ext.Msg.alert('Jde Upload Successful', 'The Budget was successfully uploaded to JDE.');

}
 

var onConfirmJdeUpload = function(buttonId){

if (buttonId == 'no') return;
 

Ext.Msg.wait('Uploading Budget to JDE...', 'JDE Upload');

Ext.Ajax.request({

url: eBudgetServiceHandler,

method: 'POST',

params: { budgetId: currentBudgetId, method: 'uploadToJde'},

success: onJdeUploadSuccess

})

}
 

var reconfigureBudgetItemGrid = function(showMoreColumns)

{

var columns = [];
 

columns.push(budgetItemGridColumnModel.findColumnI ndex('Location'));

columns.push(budgetItemGridColumnModel.findColumnI ndex('PlanNumber'));

columns.push(budgetItemGridColumnModel.findColumnI ndex('Elevation'));
 

for (var i = 0, len = columns.length; i < len; i++)

{

budgetItemGridColumnModel.setHidden(columns[i], !showMoreColumns);

}

}
 

var budgetGrid = new Ext.grid.EditorGridPanel({

frame: true,

title: 'Budget Headers', 

hidden: true,

height: viewport.getSize().height * 0.4,

width: viewport.getSize().width - 310,

store: budgetDataStore,

cm: budgetGridColumnModel, 

loadMask: true,

trackMouseOver:true,

clicksToEdit: 2,

plugins: checkBoxColumn,

selModel: new Ext.grid.RowSelectionModel({

singleSelect:true,

moveEditorOnEnter: false

}),

bbar: new Ext.PagingToolbar({

id: 'budgetGridPager',

pageSize: 25,

store: budgetDataStore,

displayInfo: true,

displayMsg: 'Displaying records {0} - {1} of {2}',

emptyMsg: "No records to display",

plugins: new Ext.ux.Andrie.pPageSize({

variations: [10, 15, 20, 25, 50, 75, 100],

beforeText: 'Records per page:',

afterText: ''

})

}),

tbar: [{

text: 'Modify Description',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/page_edit.png',

tooltip: 'Change the description for the currently selected Budget',

handler: showModifyBudgetDescriptionWindow

},

'-',

{ 

text: 'Copy Budget',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/page_copy.png',

tooltip: 'Copy the currently selected Budget to a new Budget',

handler: showCopyBudgetWindow

},

'-',

{

text: 'Delete Budget(s)',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/page_delete.png',

tooltip: 'Delete any checked Budgets',

handler: function(){

var records = budgetDataStore.getRange();

var budgetIdList = '';

var currentRecord;
 

for (var i = 0, len = records.length; i < len; i++) {
 

currentRecord = records[i]; 

if (currentRecord.data['IsChecked']){

budgetIdList += currentRecord.data['Id'] + ',';

}

}
 

if (budgetIdList.length == 0)

{

Ext.Msg.alert('Select a Budget', 'You must check which Budgets you want to delete first.');

return;

}
 

Ext.Msg.show({

title:'Delete Confirmation',

msg: 'Are you sure you want to delete the checked Budgets?',

buttons: Ext.Msg.YESNO,

icon: Ext.MessageBox.WARNING,

fn: function (btn){

if (btn == 'yes'){

Ext.Msg.wait('Please wait while the checked Budgets are deleted...', 'Deleting Budgets');

Ext.Ajax.request({

url: eBudgetServiceHandler,

method: 'POST',

params: { 

method: 'deletebudgets', 

budgetIds: budgetIdList

},

success: onDeleteBudgetsSuccess

})

}

}

});

}

},

'-', 

{

text: 'Export Budget List',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/page_excel.png',

tooltip: 'Export the current Budget list to Excel',

handler: function (){

var exportUrl = excelExportHandler + '?exporttype=header&budgetTypeId=' + 

budgetTypeCombo.getValue() + 

'&communityId=' + communityCombo.getValue() +

'&planNumber=' + planCombo.getValue() +

'&elevation=' + elevationCombo.getValue() +

'&costCode=' + costCodeCombo.getValue() +

'&itemNumber=' + itemCombo.getValue() + 

'&sort=' + budgetDataStore.sortInfo.field + 

'&dir=' + budgetDataStore.sortInfo.direction;

window.location = exportUrl; 

}

},

'-', 

{

text: 'Upload to JDE',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/page_white_get.png',

tooltip: 'Upload the currently selected Budget to JDE',

handler: function (){

if (!budgetGrid.getSelectionModel().hasSelection()){

Ext.Msg.alert('Select a Budget', 'You must select a Budget to upload first.');

return;

}

Ext.Msg.confirm('Upload to JDE', 'Are you sure you want to upload the selected Budget to JDE?', onConfirmJdeUpload);

}

}],

listeners: {

'rowclick': function (grid, rowIndex, e)

{

if(e.target.cellIndex==0){

return;

}
 

var record = grid.getStore().getAt(rowIndex);
 

if (currentBudgetId == record.data['Id'])

{

return;

}; 
 

currentBudgetId = record.data['Id'];

reconfigureBudgetItemGrid(false);

budgetItemDataStore.sortInfo = {field: 'CostCode', direction: "ASC"};

budgetItemGrid.setHeight(viewport.getSize().height * 0.39);

showBudgetItemGrid();

}

}

});
 

var onDeleteBudgetsSuccess = function(){

Ext.Msg.hide();

currentBudgetId = 0;

budgetItemGrid.hide();

budgetGrid.store.load({

params: { 

sort: budgetDataStore.lastOptions['sort'],

dir: budgetDataStore.lastOptions['dir'],

start: Ext.getCmp('budgetGridPager').store.lastOptions.params['start'],

limit: Ext.getCmp('budgetGridPager').getPageSize()

}

});

}
 

var showBudgetGrid = function(){

budgetGrid.show();
 

budgetGrid.store.load({

params: { 

start: 0,

limit: Ext.getCmp('budgetGridPager').getPageSize()

}

});

}
 

var onSaveBudgetItemsSuccess = function(response, options){

Ext.Msg.hide();

budgetItemDataStore.load({

params:{

sort: budgetItemDataStore.lastOptions['sort'],

dir: budgetItemDataStore.lastOptions['dir'],

start: Ext.getCmp('budgetItemGridPager').store.lastOptions.params['start'],

limit: Ext.getCmp('budgetItemGridPager').getPageSize()

}

});

}
 

var searchByCriteria = function(){

currentBudgetId = 0;

budgetItemDataStore.removeAll();

budgetDataStore.removeAll();

if (Ext.ComponentMgr.get('workMethodRadio').getGroupValue() == 'budgets') {

budgetItemGrid.hide();

showBudgetGrid();

}
 

else {

budgetGrid.hide();

reconfigureBudgetItemGrid(true);

budgetItemDataStore.sortInfo = {field: 'PlanNumber', direction: "ASC"}

budgetItemGrid.setHeight(viewport.getSize().height * 0.75);

showBudgetItemGrid();

}

}
 

// Define panels

var searchByCriteriaPanel = new Ext.form.FormPanel({

title: 'Search by Criteria',

frame:true,

collapsible:true,

titleCollapse: true,

labelAlign: 'right',

monitorValid: true,

items: [{

xtype: 'panel',

layout: 'column',

items: [{

fieldLabel: '',

xtype:'radio',

boxLabel: 'Work with BUDGETS',

name: 'workMethod',

inputValue: 'budgets',

id: 'workMethodRadio',

hideLabel: true,

checked: true,

columnWidth: .5,

listeners: {

'check' : function (checkbox, checked)

{

Ext.get('costTypePanel').setVisible(!checked);

}

}

},{

fieldLabel: '',

xtype:'radio',

boxLabel: 'Work with ITEMS',

name: 'workMethod',

inputValue: 'items',

hideLabel: true,

columnWidth: .5,

listeners: {

'check' : function (checkbox, checked)

{

Ext.get('costTypePanel').setVisible(checked);

}

}

}]

},

budgetTypeCombo, 

communityCombo,

planCombo,

elevationCombo,

costCodeCombo,

itemCombo,

{

xtype: 'panel',

hideMode: 'visibility',

id: 'costTypePanel',

layout: 'form',

items: [{

fieldLabel: 'Cost Types',

xtype:'checkbox',

boxLabel: '12109',

name: 'costType',

inputValue: '12109',

id: '12109costTypeCheckbox',

checked: true

},{

fieldLabel: ' ',

xtype:'checkbox',

boxLabel: '12110',

name: 'costType',

inputValue: '12110',

checked: true,

hideLabel: false,

id: '12110costTypeCheckbox',

labelSeparator: ''

}]

},{

// This invisible textfield is to disable the submit button when the combo boxes are loading new data.

xtype:'textfield',

id: 'validatorField',

width:1,

height:1,

validator: validateSearchCriteriaDropdowns,

allowBlank: false,

value: 1,

hideLabel: true,

hidden: true

}],

buttons: [{

id: 'btnSearchByCriteria',

text: 'Search for Selected Criteria',

handler: searchByCriteria,

formBind: true

}]

});
 

var searchByKeyword = function(){

Ext.Msg.alert('This will never be implemented', 'searching by keyword');

}
 

var searchByKeywordPanel = new Ext.form.FormPanel({

title: 'Search by Keyword',

frame:true,

collapsible:true,

titleCollapse: true,

labelAlign: 'right',

monitorValid: true,

items:[{

fieldLabel: 'Keywords',

xtype:'textfield',

id: 'txtSearchByKeyword',

allowBlank: false

}],

buttons: [{

id: 'btnSearchByKeyword',

text: 'Search by Keyword',

handler: searchByKeyword,

formBind: true

}]

}); 
 

var searchPanel = new Ext.Panel({

items: [searchByCriteriaPanel]

});
 

var checkForLoading = function(value){

if (value == 'Loading...')

{

return'';

}

return value;

}
 

var refreshPlanCombo = function(){

planCombo.clearValue();

planCombo.setValue('Loading...');

planCombo.disable();

planCombo.store.load({

params:{communityId: checkForLoading(communityCombo.getValue())},

callback: function (r, options, success){

planCombo.store.insert(0, [emptyDropdownRecord]);

planCombo.clearValue();

planCombo.enable();

}

});

}
 

var refreshElevationCombo = function(){

elevationCombo.clearValue();

elevationCombo.setValue('Loading...');

elevationCombo.disable();

elevationCombo.store.load({

params:{communityId: checkForLoading(communityCombo.getValue()), planNumber: checkForLoading(planCombo.getValue())},

callback: function (r, options, success){

elevationCombo.store.insert(0, [emptyDropdownRecord]);

elevationCombo.clearValue();

elevationCombo.enable();

}

});

}
 

var refreshComboWithEmptyRecord = function(comboBox){

comboBox.clearValue();

comboBox.setValue('Loading...');

comboBox.disable();

comboBox.store.load({

callback: function (r, options, success){

comboBox.store.insert(0, [emptyDropdownRecord]);

comboBox.clearValue();

comboBox.enable();

}

});

}
 

var refreshCombo = function(comboBox, emptyText){

comboBox.clearValue();

comboBox.setValue('Loading...');

comboBox.disable();

comboBox.store.load({

callback: function (r, options, success){

comboBox.emptyText = emptyText;

comboBox.clearValue();

comboBox.enable();

}

});

}
 

var actionPanel = new Ext.Panel({

title: 'Available Actions',

layout: 'table',

defaults: {

bodyStyle: 'padding:80px'

},

layoutConfig: {

columns: 1

},

items: [{

xtype: 'button',

id: 'btnBulkUpdate',

text: 'Bulk Update Budgets',

handler: WallHomes.Ext.EBudget.BulkUpdateModule.confirmBulk Update,

minWidth : 150

},{

xtype: 'button',

id: 'btnAddItemToBudget',

text: 'Add Item to Budget(s)',

handler: function (){

if (currentBudgetId == 0){

WallHomes.Ext.EBudget.AddItemModule.show();

return;

}
 

var selectedBudgetRecord = budgetGrid.getStore().getById(currentBudgetId);

if (selectedBudgetRecord.data['Type'] == 'Job'){

WallHomes.Ext.EBudget.AddItemModule.show(currentBu dgetId);

}

else{

WallHomes.Ext.EBudget.AddItemModule.show();

}

},

minWidth : 150

}],

frame:true,

collapsible:true,

titleCollapse: true

});
 

var mainAppPanel = new Ext.Panel({

layout: 'border',

title: 'eBudget Application Staging 1',

tbar: [{

text: 'Print POs',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/printer.png',

tooltip: 'Go to Print PO Application',

handler: function (){

var printPoWin = open('http://Forum/POPrinting');

}

},'-',{

text: 'IT Support Request',

cls: 'x-btn-text-icon details',

icon: '/ebudget/images/icons/help.png',

tooltip: 'Create an IT Support Request',

handler: function(){

var supportWin = open('http://Forum/IT/RequestHelp/RequestHelp.aspx?AppID=eBudget','Help','height=300,width=250,top=75,left=200, scrollbars=no');

}

},'-',{

xtype: 'tbtext',

text: Ext.get('logonId').getValue()

}],

items: [{

region: 'west',

collapsible: true,

xtype: 'panel',

width: 300,

autoScroll: true,

split: true,

layout: 'anchor',

items: [searchPanel, actionPanel],

collapsible: true,

collapseMode: 'mini'

}, {

region: 'center',

xtype: 'panel',

items: [budgetGrid, budgetItemGrid]

}]

});
 

var initializeForm = function(){

viewport.add(mainAppPanel);

viewport.render();

refreshComboWithEmptyRecord(budgetTypeCombo);

refreshComboWithEmptyRecord(communityCombo);

refreshPlanCombo();

refreshElevationCombo();

refreshComboWithEmptyRecord(costCodeCombo);

refreshComboWithEmptyRecord(itemCombo);

vendorCombo.store.load();

}
 

// Public members

return {

init: function(){

Ext.QuickTips.init();

initializeForm();

}

};

}();

Ext.onReady(WallHomes.Ext.EBudget.BudgetManager.in it, WallHomes.Ext.EBudget.BudgetManager);

Open in new window

vendor-Id-drop-down.doc
0
Comment
Question by:abrimberry
  • 5
  • 2
7 Comments
 
LVL 16

Expert Comment

by:Lolly-Ink
Comment Utility
The term "invalid vendor" comes from the code below. Each combo box must be calling the renderGridVendor function (assigned to the renderer attribute) when a change is made to a combo box. When one vendor is listed when entering text in the combo box, it's probably applying a filter to records; so when each combo box calls renderGridVendor they are trying to get a record based on filtered records, and will probably get an undefined record, resulting in "invalid vendor".

var renderGridVendor = function (value){

var record = vendorStore.getById(value);

if (record == undefined){

return'<div class="x-form-invalid">Invalid Vendor</div>';

}

return record.data['VendorName'];

}

Open in new window

0
 
LVL 16

Expert Comment

by:Lolly-Ink
Comment Utility
Maybe there is some way of unfiltering the records at the beginning of the saveBudgetItemChanges function (which is the handler for the Save Changes button).
0
 
LVL 16

Expert Comment

by:Lolly-Ink
Comment Utility
Whatever gets called when you click the down arrow of the vendor combobox should be called at the beginning of the saveBudgetItemChanges function.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 16

Expert Comment

by:Lolly-Ink
Comment Utility
I notice there are many calls to "returnfalse" and "returntrue" in your code. Try replacing them with "return false" and "return true" and see what happens.
0
 

Author Comment

by:abrimberry
Comment Utility

Thanks Lolly-Ink,
I will try those suggestions
0
 

Author Comment

by:abrimberry
Comment Utility

"Whatever gets called when you click the down arrow of the vendor combobox should be called at the beginning of the saveBudgetItemChanges function."

I agree with that.
I'm not sure what event gets called when the down arrow of the vendor combobox is clicked. Are you able to discern that from the code?
I'm also not sure how to call something from the beginning of the saveBudgetItemChanges function. Do you know how to do that?

Somebody else wrote the code and has left the company.
Thanks again for your assistance.
0
 
LVL 16

Accepted Solution

by:
Lolly-Ink earned 500 total points
Comment Utility
I think you would call vendorCombo.doQuery("", true). Insert this at line 542 of your code - i.e. the first line of the saveBudgetItemChanges function.
Refer to the code below - read the comments, and look at how doQuery is used in the onTriggerClick function. The call above should remove the filter.

// source/widgets/form/Combo.js
 

    /**

     * Execute a query to filter the dropdown list.  Fires the {@link #beforequery} event prior to performing the

     * query allowing the query action to be canceled if needed.

     * @param {String} query The SQL query to execute

     * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters

     * in the field than the minimum specified by the minChars config option.  It also clears any filter previously

     * saved in the current store (defaults to false)

     */

    doQuery : function(q, forceAll){

        if(q === undefined || q === null){

            q = '';

        }

        var qe = {

            query: q,

            forceAll: forceAll,

            combo: this,

            cancel:false

        };

        if(this.fireEvent('beforequery', qe)===false || qe.cancel){

            return false;

        }

        q = qe.query;

        forceAll = qe.forceAll;

        if(forceAll === true || (q.length >= this.minChars)){

            if(this.lastQuery !== q){

                this.lastQuery = q;

                if(this.mode == 'local'){

                    this.selectedIndex = -1;

                    if(forceAll){

                        this.store.clearFilter();

                    }else{

                        this.store.filter(this.displayField, q);

                    }

                    this.onLoad();

                }else{

                    this.store.baseParams[this.queryParam] = q;

                    this.store.load({

                        params: this.getParams(q)

                    });

                    this.expand();

                }

            }else{

                this.selectedIndex = -1;

                this.onLoad();

            }

        }

    },
 

...
 

    /**

     * @method onTriggerClick

     * @hide

     */

    // private

    // Implements the default empty TriggerField.onTriggerClick function

    onTriggerClick : function(){

        if(this.disabled){

            return;

        }

        if(this.isExpanded()){

            this.collapse();

            this.el.focus();

        }else {

            this.onFocus({});

            if(this.triggerAction == 'all') {

                this.doQuery(this.allQuery, true);

            } else {

                this.doQuery(this.getRawValue());

            }

            this.el.focus();

        }

    }

Open in new window

0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now