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

Ext JS 6.2, How to convert date to sql format:2017-08-25 16:34?

I'm using Ext Js v6.2 Grid, In my application, I've Datetimefield, For user I showing the date format as
format: 'd/m/Y H:i'
but On submitting data to sql, I need to convert as sql format,
format: 2017-08-25 16:34
Here's my code, I'm getting output as 2016-03-14T18:30:00.000Z But I need it as format: 2017-08-25 16:34.
Please correct my code if I'm wrong, I've searched in documentation and other stuff it doesn't help.
var headerObj = page.getForm().getFieldValues();
var hdrData = "<HeaderData>" + x2js.json2xml_str(headerObj)" +</HeaderData>";
console.log(hdrData);
{
xtype: 'datefield',
border: true,
width: '100%',
fieldLabel: 'somefield',
name: 'somefield',
format: 'd/m/Y H:i',
submitFormat: 'Y-m-d H:i',
}

ExtJS doesn't give a function to do that. You have to make a custom function that convert your date:
Date.prototype.toNormalizedDate = function(){
var normalizedDate = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate(), this.getHours(), this.getMinutes(), this.getSeconds()));
return normalizedDate.toISOString();
}

The getFieldValues method returns the model data. Model data is intended for use with a store model, which can usually work with javascript date, therefore, that function returns a javascript date from datefields. Only during the serialization, the javascript date is then converted to a string, using the browser default (because the serialization function already expects the input to be strings only).
What you may perhaps want to try is form.getSubmitData. This function will return string values for all fields; in the case of the date field, the date is then formatted using submitFormat.
The second possibility is to use a model for submission, not the form.
Define a model with a proxy for load/save operation:
Ext.define('MyModel',{
extend: 'Ext.data.Model',
fields:[{
name: 'somefield',
type: 'date',
dateFormat: 'Y-m-d H:i'
}],
proxy: {
url: '...'
}
})
then either create new record and put into form:
form.loadRecord(Ext.create('MyModel'))
or edit existing record from server:
MyModel.load(id, {
success: function(record) {
form.loadRecord(record);
}
})
And then save it to the server again:
form.updateRecord();
form.getRecord().save({
success: function() {
Ext.alert('Saved!');
}
});
This has the neat side-effect that you can add the original XML reader and writer of ExtJS to your model proxy, and you can do away with your own XML conversion function.

In ExtJs docs form have method to get all values of form using getValues. You can refer ExtJs docs
I have create small demo to show you, how it is working.
Sencha fiddle
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Date',
margin: 10,
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
format: 'd/m/Y H:i',
submitFormat: 'Y-m-d H:i',
allowBlank: false,
name: 'date'
}, {
xtype: 'button',
text: 'Submit Date',
formBind: true,
handler: function () {
var date = this.up('form').getValues().date;
/* this is also one way to get value by date field.
date =this.up('form').down('datefield').getValue(),
submittedDate = Ext.Date.format(date,'Y-m-d H:i');
*/
Ext.Msg.alert('Success', `Selected date is <b>${date}</b>`);
}
}]
});

Add new values to a tag field by pressing enter instead of comma

I have a tag field and I want my users to be able to add new values to it. I can achieve this by setting forceSelection: false. The user can type their new entry into the tag field. When they are done typing the current entry, they can press comma and it will be added.
The problem is that the comma key is not terribly intuitive and more importantly the user cannot add an entry that itself contains a comma. Is there anyway I can reassign this functionality to the enter key instead?
jsFiddle here: link

Just use createNewOnEnter:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
padding: 100,
items: [{
items: [{
width: 400,
xtype: 'tagfield',
store: ['existing item', 'another existing item'],
queryMode: 'local',
forceSelection: false,
autocomplete: 'off',
createNewOnEnter: true
}]
}]
});

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.

SlickGrid Column Picker: Setting the default columns to display from a larger list

I am currently working with using SlickGrid and allowing the user to select which columns to display using the ColumnPicker.
Following the example at http://mleibman.github.com/SlickGrid/examples/example4-model.html I have been able to get this to work quite nicely.
The next step that I am unsure about is whether it is possible to choose a default list of columns to show at first time render.
For example, say I have an array of 5 columns declared something like below:
{
name: "Name"
field: "Name"
id: "Name"
sortable: true
minWidth: 120
editor: Slick.Editors.Text
},
{
name: "Address"
field: "Address"
id: "Address"
sortable: true
minWidth: 175
editor: Slick.Editors.Text
},
{
name: "Town"
field: "Town"
id: "Town"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
},
{
name: "Country"
field: "Country"
id: "Country"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
},
{
name: "Network"
field: "Network"
id: "Network"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
}
At the moment all of these columns will be shown and can be selected to be hidden in the ColumnPicker. The functionality I am looking for is to, for example, say I only want the columns Name, Address and Network to be shown, but still have the others remain as options in the ColumnPicker.
Is this in place or is there an available method of achieving this?

To anyone who might come across this, I found a solution which works but may not be the best.
It is essentially using 2 separate arrays, 1 which holds the default columns to render, and the other holding the names of all the columns you can choose from, including the default column array.
When rendering, I instantiate my grid with the array of default columns:
#Grid = new Slick.Grid(#ElementId, #Data, #DefaultColumns, #GridOptions)
and then when setting the column picker, use the array of all the columns:
columnpicker = new Slick.Controls.ColumnPicker(#Columns, #Grid, #GridOptions)