Develop Reference

Change Extjs Grid Validation Text

I'm looking at an older project that is using ExtJS. Admittedly, I'm not too familiar with this framework so I learn as I go and as I am asked to fix things. My issue is that there is a grid and each column uses allowBlank: false. This causes a tooltip box to display with some info about what field(s) need to be populated. This all works great, but I am trying to change that text in that tooltip i.e. "Error", "Benefit Category Name: This field is required", and I can't seem to make this work. How can I target and change that text? I'll include a screenshot of the grid and tooptip that I am talking about for reference. I am also using ExtJS version 6.
Here is a sample of one of the grid columns:
columns: [
{
dataIndex: 'benefit_category_name',
text: 'Benefit Category Name',
flex: 1,
editor: {
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: [
'benefit_category_id',
'benefit_category_name',
],
data: [],
}),
queryMode: 'local',
valueField: 'benefit_category_name',
displayField: 'benefit_category_name',
emptyText: 'Select one',
listeners: {
select: 'handleComboChange',
},
itemId: 'benefit_category_id',
allowBlank: false,
listeners: {
renderer: function(value, metaData) {
metaData.tdAttr = Ext.String.format('data-qtip="{0}"', value);
return value;
}
}
}
},
{
...
}
]
I tried to use the metaData property I read about in some other posts, but I can't seem to change the tooptip text (Error, Benefit Category Name: This field is required).
Here is a screenshot of the tooltip mentioned. I know this is an older framework, but any tips I could get would be useful. Thanks for your time.

Thats a simple validation example with custom message.
Ext.create({
xtype: 'textfield',
allowBlank:false, // will show required message - remove key to display vtypeText only
validateBlank: true,
vtype: 'alpha', // check for available types or create / extend one
vtypeText: 'Please change to what you want ...',
renderTo: Ext.getBody()
})
Details:
https://docs.sencha.com/extjs/6.5.3/classic/Ext.form.field.VTypes.html
https://fiddle.sencha.com/fiddle/3770

How to change cursor of a tagfield in ExtJS

I am using a tagfield in my application. Current cursor is comine like | (a straight bar or or vertical line). I want to change this as a hand. Can any body please suggest what I need to do.
{
xtype: 'tagfield',
growMax : 10,
valueField: 'title',
displayField: 'title',
queryMode: 'local',
multiSelect: true,
isFilterDataLoaded: false,
disabled: true,
};

You need to change 3 different html styles.
That's because the tagfield is builded whit different divs.
You can do it like this:
{
xtype: 'tagfield',
growMax: 10,
valueField: 'title',
displayField: 'title',
queryMode: 'local',
multiSelect: true,
isFilterDataLoaded: false,
listeners:{
afterrender:function(component){
component.getEl().dom.style.cursor="pointer";
component.inputEl.dom.style.cursor="pointer";
component.inputWrap.dom.firstChild.style.cursor="pointer";
}
},
renderTo: Ext.getBody()
}
Here is a working fiddle to show you

Or you can do it via css:
.x-form-text-default .x-tagfield-input-field {
cursor: pointer;
}
I suggest adding a cls and wrapping if it is only in one case.

Hide dropdownlist of extjs combobox

Hi a newbie in extjs I want to ask you guys on how to hide the dropdownlist of extjs combobox onmouseout.
var combo = new ext.form.combobox({
width: 178,
store: store,
displayField: 'name',
valueField: 'value',
triggerAction: 'all',
emptyText: 'blank'
});
combo.applyTo('id');

Use mouseLeaveMonitor in event
Example:
var combo = new ext.form.combobox({
width: 178,
store: store,
displayField: 'name',
valueField: 'value',
triggerAction: 'all',
emptyText: 'blank',
listeners: {
expand: function(combo) {
var element = combo.getPicker().el;
combo.mouseLeaveMonitor = element.monitorMouseLeave(0, combo.collapse, combo);
}
}
});
combo.applyTo('id');
First agrument it's collapse interval - you can change it.

Combo box with store and text embed when load and listeners in extjs4?

the below Ext JS code works fine. the combo box load the phone number properly when i edit the grid. But i need the text to display clear/delete with phone numbers in combobox. When i click clear/delete i need to add some functionality.
the combo box looks like looks like as follows:
Clear/Delete
121-224432133
123-344545353
666-323231231
423-4324442344
.
.
.
ExtJS code:
{ xtype: 'gridcolumn', header: 'Phone#', width: 100, dataIndex: 'PhoneNumber',
editor: {
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: App.mcmAllAgentsStore,
typeAhead: true,
emptyText : 'Clear/Delete',
displayField: 'PhoneNumber',
valueField: 'Agent',
queryMode: 'local',
listeners: {
scope: this,
specialkey: function(f, e) {
if(e.getKey() === e.ESC) { this.hide(); }
}
}
}
},

Maybe you should turn this boring combo box into a mighty GridPicker! Check the last example in particular.

How to add ComboBox to settings gear menu in Rally app

Currently I'm working on an app that displays a chart of defects. The chart is to be filtered by a selection of checkboxes that the user can change around to fit his / her needs. These checkboxes are located in the gear menu of the app, under 'settings'. In App.js I have a function that looks like this:
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
This function works perfectly so far and displays the items I left out of the code [they're not important to the question]. The problem is that now I want to add a ComboBox into the same settings page with custom values. The box should have the text [Days, Weeks, Months, Quarters] inside that will further filter which defects to display in the chart. I tried changing the getSettingsFields function to the following:
getSettingsFields: function() {
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
});
return [
{
xtype: 'combobox',
fieldLabel: 'Date Range',
store: myStore,
displayField: 'range',
valueField: 'value'
},
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
Now when I run the app and click on the 'settings' button, everything disappears - even the field of checkboxes. Any explanation to why this is not working would be very helpful!

You're basically doing everything correctly- you've just stumbled upon a really subtle bug. The underlying issue is that there is an infinite recursion that occurs when the settings panel is attempting to clone the settings field config array due to the inclusion of the store. The following code will work around the issue:
{
xtype: 'rallycombobox',
storeConfig: {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
},
storeType: 'Ext.data.Store',
fieldLabel: 'Date Range',
displayField: 'range',
valueField: 'value'
}
It's basically the same as what you had but uses the rallycombobox instead and passes in storeType and storeConfig to get around the store cloning problem.