I am using EXTJS 6 and using Tagfield. When I select TagField I am getting Box with close Icon. How Can I remove that box and close Icon and Place My own css. MyFiddle
If you need to apply your changes to all tagfields in your project, you can simply override theme variables for this element ($tag-field-item-close-icon-glyph, etc.
) in you theme.
All list of available variables described in documentation: http://docs.sencha.com/extjs/6.0.1/classic/Ext.form.field.Tag.html#vars
You can use Ext.form.field.ComboBox instead of using Ext.form.field.Tag
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"},
{"abbr":"BL", "name":"Blabama"},
{"abbr":"BK", "name":"Blaska"},
{"abbr":"BZ", "name":"Brizona"},
{"abbr":"CL", "name":"Clabama"},
{"abbr":"CK", "name":"Claska"},
{"abbr":"CZ", "name":"Crizona"},
{"abbr":"DL", "name":"Dlabama"},
{"abbr":"DK", "name":"Dlaska"},
{"abbr":"DZ", "name":"Drizona"}
]
});
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose State',
store: states,
delimiter : ",",
multiSelect : true,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
Related
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
I have an example fiddle in which I use Ext.window.Window to edit the grid entries.
The id of the value is displayed in the grid itself, and empty in the edit window.
For combobox in the grid, I did this and it works
{
text : 'type',
dataIndex : 'type',
flex: 1,
renderer: function (v, p, record) {
return record.get('type');
},
},
For combobox in the form edit I added to the combobox listeners:{ render: function(combo)}
{
xtype: 'combobox',
store: {
type: 'type-store'
},
fieldLabel: 'Type',
displayField: 'name',
valueField: 'id',
queryMode: 'remote',
publishes: 'name',
name: 'name',
listeners:{
'render': function(combo){
console.log(combo);
combo.setValue();//How set current value
}
}
But I do not understand how to correctly set the current value?
thank
First things first, in order to link the value of the combo, your data data.json you must include the id for the "type", not just the description:
{
"id": 1, "id_type":3 , "type": "Третий", "mytextfield": "Текстовое значение"
},
You can actualy use the "name" if you want to, but you have to change your combo valueField to "name" also.
In the controller, first load the combo store (or autoload) and then, instead using the view_model of the windows, use the form to load your record:
console.log(wind.lookup("mycombo").getStore().load());
wind.down('form').loadRecord(record);
I modified your fiddle with those changes
How do I vertical align the dropdown to top in the example below? (Trying to get it to work in sencha fiddle)
Ext.application({
name : 'Fiddle',
launch : function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Loooooong Looooong looooooong looooooong looooooong',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
}
});
Give a baseBodyCls to the combobox & in CSS give vertical-align:top; to that class.
Ext.application({
name : 'Fiddle',
launch : function() {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Loooooong Looooong looooooong looooooong looooooong',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
baseBodyCls:'vertical-align-body',
renderTo: Ext.getBody()
});
}
});
.vertical-align-body{
vertical-align:top;
}
<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
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.
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.