We Keep Coding

Make function to enable / disable combobox ExtJS

I have the following components of a form in Ext JS, these two components are combobox and need that when the first combobox (type_sector) is selected, then enable the second combobox (main_sector).
{
xtype: 'combobox',
name: 'type_sector',
fieldLabel: 'Setor',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
flex: 1,
margin: { left: 3 },
store: 'EconomicActivityType',
width: 80,
editable: false,
queryMode: 'local',
},
{
xtype: 'combobox',
name: 'main_sector',
fieldLabel: 'Principal',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
margin: { left: 3},
store: 'EconomicActivityType',
inputWidth: 200,
editable: true,
queryMode: 'local',
}
I want to build a function that if combobox value (type_sector) equals x per example, enable combobox (main_sector), otherwise it is hidden / disabled. How can I do this inside a form in Ext JS?
I'm trying to do it this way:
{
xtype: 'combobox',
name: 'type_sector',
fieldLabel: 'Setor',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
flex: 1,
margin: { left: 3 },
store: 'EconomicActivityType',
width: 80,
editable: false,
queryMode: 'local',
id: "type_sector_combo",
listeners:{select:{fn:function() {
if (this.getComponent('type_sector_combo').value == "sector"){
this.getComponent('main_sector_combo').disable = false;
}
}}}
},
{
xtype: 'combobox',
name: 'main_sector',
fieldLabel: 'Principal',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
margin: { left: 3},
store: 'EconomicActivityType',
inputWidth: 120,
editable: true,
queryMode: 'local',
id: "main_sector_combo",
disabled: true
}

Create listener on type_sector combo for select event https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.ComboBox.html#event-select then inside it use setDisabled method https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.ComboBox.html#placeholder-setDisabled to set state for main_sector combo

Try setting the properties forceSelection and selectOnTab to false
forceSelection:false,
selectOnTab: false

Set Start Date Field EXTJS

I have this datefield in my form :
{
xtype: 'datefield',
fieldLabel: 'Date commence travel',
name: 'tgl_awal',
id: 'tgl_awal',
vtype: 'daterange',
endDateField: 'tgl_akhir', // id of the end date field
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}, {
xtype: 'datefield',
fieldLabel: 'Date end travel',
name: 'tgl_akhir',
id: 'tgl_akhir',
vtype: 'daterange',
startDateField: 'tgl_awal',
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}
I want to set start date field in tgl_awal 3 months prior of today. I've tried to set it with Javascript variable that I defined outside but no effect. Any help appreciated.

Ext.Date#add is the method to use to add or subtract time interval to/from a given date.
Your datefield should have value set to :
value: Ext.Date.add(new Date, Ext.Date.MONTH, -3)

I think minValue is the attribute you are looking for.All dates prior to minValue are disabled. Or are you having trouble to get logic for 3 months prior to today ?
function beginDate(){
//put real logic for getting date prior to 3 months here
return new Date(2017,04,20);
}
Ext.create('Ext.container.Viewport', {
title: 'Historical',
layout : 'fit',
items : [
{
xtype: 'container',
autoScroll : true,
defaults : {
labelAlign : 'right'
},
layout: {
type: 'hbox',
align: 'top',
pack: 'center'
},
items: [
{
xtype: 'datefield',
fieldLabel: 'Date commence travel',
name: 'tgl_awal',
id: 'tgl_awal',
vtype: 'daterange',
endDateField: 'tgl_akhir', // id of the end date field
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y',
minValue : beginDate()
}, {
xtype: 'datefield',
fieldLabel: 'Date end travel',
name: 'tgl_akhir',
id: 'tgl_akhir',
vtype: 'daterange',
startDateField: 'tgl_awal',
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}
]
}
]
});

ExtJS include Ex.ux.ComboColumn

I am stuck...
I would like to include Ext.ux.ComboColumn, but I have no idea how to do this (never worked with javascript and ExtJs (using ExtJs 3) before.)
I have downloaded the javascript file and placed it in the same folder than my webpage.
The webside I have build with ExtJs looks like this:
Ext.onReady(function() {
var myRefStore = new Ext.data.JsonStore({
url: 'dispatchAjaxRequest',
baseParams: {
eventPath: 'frontend.CustomFunctions',
eventMethod: 'getData',
jsonInput: Ext.encode({
tableName: 'CCMS_REF',
start: 0,
limit: rowLimit
})
},
root: 'store',
id: 'gridStore',
fields: ['id', 'external_user', 'external_company', 'external_product', 'system_id', 'context_name', 'system_id'],
autoLoad: true
});
var userCombo = new Ext.ComboBox({
id: 'myCombo',
triggerAction: 'all',
store: myRefStore,
selectOnFocus: true,
typeAhead: true,
editable: false,
forceSelection: true,
mode: 'remote',
displayField: 'context_name',
valueField: 'id',
hideMode: 'offsets',
lazyInit: false,
hiddenName: 'mycontext',
name: 'mycontextname'
})
var editGrid = new Ext.grid.EditorGridPanel({
id: 'editTable',
title: 'Edit table BIC_CUST_CCMS_OBJECTS',
header: true,
renderTo: 'contentDivCcms',
clicksToEdit: 1,
//height:350,
autoHeight: true,
//style: 'margin-bottom: 50px',
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: false,
hideable: false,
menuDisabled: true
},
viewConfig: {
forceFit: true
},
columns: [{
hidden: true,
header: 'id',
dataIndex: 'id',
editable: false
}, {
header: 'sap_ref',
dataIndex: 'sap_ref',
width: 50,
xtype: 'combocolumn', // Use the custom column or use the column's render manually
editor: userCombo, // The custom column needs a ComboBox editor to be able to render the displayValue, without it just renders value
gridId: editTable
},
}),
store: myStore,
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
});
});
});
But I only get the following error:
TypeError: Ext.ComboBox is not a constructor
How do I include the Ext.uxComboColumn.js?
Regards
LStrike

Use Ext.form.field.ComboBox or Ext.form.ComboBox instead of just Ext.Combobox
var userCombo = new Ext.form.field.ComboBox({
id: 'myCombo',
triggerAction: 'all',
store: myRefStore,
selectOnFocus: true,
typeAhead: true,
editable: false,
forceSelection: true,
mode: 'remote',
displayField: 'context_name',
valueField: 'id',
hideMode: 'offsets',
lazyInit: false,
hiddenName: 'mycontext',
name: 'mycontextname'
});

File upload ExtJS 4

I have this field:
{
xtype: 'filefield',
labelAlign: 'top',
id: 'fileAllegato',
hidden: true,
margin: '0 15 5 10',
fieldLabel: 'Allegato',
allowBlank: false,
blankText:'Il campo &egrave obbligatorio!',
typeAhead: true,
selectOnFocus: true,
anchor: '100%',
buttonText: 'Allega'
}
When I load the file, I want to save it in db. The field does not belong to a form and, therefore, I can not do the submit. How can I do?

You can create a dummy form (without even displaying it). Something like
var f = Ext.create('Ext.form.Panel', {
items: [ your filefield item ]
})
And then do submit.

items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
anchor: '100%',
buttonText: 'Select File...'
}],
Live demo is here

How can I right-align the contents of a ExtJS tbar?

I have a tbar inside a grid panel like this:
This is the code that produces it:
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
title: 'Testing',
tbar: ['Filters:', {
width: 100,
xtype: 'combo',
mode: 'local',
value: 'en',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Produkt',
name: 'language',
hiddenName: 'language',
displayField: 'name',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['name', 'value'],
data : [
{name : 'German', value: 'de'},
{name : 'English', value: 'en'},
{name : 'French', value: 'fr'}
]
})
}],
What do I need to change so that the dropbox is right-aligned instead of left-aligned?
Addendum
thanks #dogbane, that works perfectly, here's how I right aligned both text and dropdown:
tbar: [
{xtype: 'tbfill'},
'Filters:',
{
width: 100,
xtype: 'combo',
mode: 'local',
...

Try:
{xtype: 'tbfill'}, // or '->'
See the docs for Ext.Toolbar.Fill.