I am using ExtJS 6 and For comboBox I want display my own customize value in Combofield after selection. Like I want delimiterand some color change of the value to be show in combo field after selecting value. I had option onRender(ct,pos) in earlier version of ext but not in latest version of ExtJs. Can anybody please help me what is alternate onRender() in ExtJs 6 version.
You can use innerTpl config. Here is example. you can refer fiddle here. Fiddle
Ext.onReady(function() {
var data = [{
name: 'Tom',
age: 20
}, {
name: 'Peter',
age: 30
}];
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'age'],
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
store.loadRawData(data, false);
store.each(function(record) {
console.log('name in store: %s', record.get('name'));
});
var combobox = Ext.create('Ext.form.field.ComboBox', {
queryMode: 'local',
typeAhead: true,
forceSelection: true,
displayField: 'name',
valueField: 'name',
renderTo: Ext.getBody(),
store: store,
listConfig: {
getInnerTpl: function() { // <-- Here you can customize your values
var someString = '<div style="color:red;font-weight:bold;padding-top:1px; padding-bottom:1px;">' + '{name}</div>';
return someString;
}
}
});
});
Related
I want to render a ComboBox that has an initial value. The ComboBox is backed by a JsonStore that loads data from some HTTP endpoint. I expect the display field to be displayed, but instead I see the value.
As a workaround, I can wait to set the initial value until the store is loaded. But that seems like a hacky workaround for such a simple use case.
Is there an easier way to render the initial display field for my ComboBox?
Here is an example. You can drop this code in any ExtJS 3.4 Fiddle.
var remoteStore = new Ext.data.JsonStore({
url: 'https://jsonplaceholder.typicode.com/todos',
autoLoad: true,
fields: ['id', 'title']
});
var remoteCombo = new Ext.form.ComboBox({
fieldLabel: 'Remote Store (busted)',
triggerAction: 'all',
mode: 'local',
store: remoteStore,
valueField: 'id',
displayField: 'title',
value: '2',
});
// Workaround: only set the value AFTER the store is loaded.
// remoteStore.on('load', () => remoteCombo.setValue('2'));
new Ext.FormPanel({
renderTo: Ext.getBody(),
items: remoteCombo
});
Why not to override the missing feature (Yes, looks like it is missing):
Ext.define('Override.form.ComboBox', {
override : 'Ext.form.ComboBox',
defaultValue: null,
initComponent : function() {
this.setDefaultValue();
Ext.form.Checkbox.superclass.initComponent.call(this);
},
setDefaultValue: function() {
if(this.defaultValue !== null) {
if(this.getStore().lastOptions === null) {
this.getStore().on('load', function(store) {
this.setValue(this.defaultValue);
}, this, {single: true});
} else {
// How to avoid else here? :-/
this.setValue(this.defaultValue);
}
}
}
});
//-------------------------
var remoteStore = new Ext.data.JsonStore({
url: 'https://jsonplaceholder.typicode.com/todos',
autoLoad: true,
fields: ['id', 'title']
});
var remoteCombo = new Ext.form.ComboBox({
fieldLabel: 'Remote Store (busted)',
triggerAction: 'all',
mode: 'local',
store: remoteStore,
valueField: 'id',
displayField: 'title',
defaultValue: '2', // <-- New Property
});
// Workaround: only set the value AFTER the store is loaded.
// remoteStore.on('load', () => remoteCombo.setValue('2'));
new Ext.FormPanel({
renderTo: Ext.getBody(),
items: remoteCombo
});
I have not used ExtJs v3.4 for about 10 years or more..
I have a piece of code which makes a combobox active when a checkbox is checked. Once the checkbox is checked I can select a value from the combobox. But I want the combobox to return having no value (blank) once the checkbox is unchecked. How do i do that?
My code is as follows:
var tests = [
['Test1'],
['Test3'],
['Test2']
];
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: ['test']
});
var testsStore = new Ext.data.Store({
model: 'Test',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: tests
});
var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
bodyPadding: 10,
width: 550,
style: 'margin:16px',
height: 300,
title: 'Testing example',
items: [{
xtype: 'checkboxfield',
name: 'system',
boxLabel: 'Production (PACTV)',
inputValue: 'production',
listeners: {
change: function (checkbox, newValue, oldValue, eOpts) {
var combo = checkbox.up('form').down('combobox');
if (newValue) {
Ext.getCmp('secondComboID').setReadOnly(false);
Ext.getCmp('secondComboID').allowBlank = false;
Ext.getCmp('secondComboID').validate();
} else {
Ext.getCmp('secondComboID').setReadOnly(true);
Ext.getCmp('secondComboID').allowBlank = true;
Ext.getCmp('secondComboID').validate();
}
}
}
}, {
xtype: 'combobox',
fieldLabel: 'Select Test',
readOnly: true,
id: 'secondComboID',
store: testsStore,
valueField: 'id',
displayField: 'test',
typeAhead: true,
forceSelection: true,
editable: true,
triggerAction: 'all',
lastQuery: ''
}]
});
Here is a working fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1u9n
Use this in your fiddle when you uncheck the checkbox:
Ext.getCmp('secondComboID').reset();
Use this code to remove the datas from the combo or to load empty array data in the combo
Ext.getCmp('secondComboID').getStore().loadRawData([]);
Also if You wish to load the previous datas again here is an example of it which allows us to toggle to load the datas and to remove datas from combo
Try the FIDDLE
I have setup a checkbox and a combobox and I am trying to set up a functionality - when a user checks the checkbox the combobox has to appear. I am new to extjs and I am having issues setting up the function for this functionality.
Ext.onReady(function() {
var tests = [
['Test1'],
['Test3'],
['Test2']
];
Ext.define('Testfile.model.Test', {
extend: 'Ext.data.Model',
fields: ['test']
});
var testsStore = new Ext.data.Store({
model: 'Testfile.model.Test',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: tests
});
var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
bodyPadding: 10,
width: 550,
style: 'margin:16px',
height: 300,
title: 'Testing example',
items: [{
xtype: 'checkbox',
name: 'system',
boxLabel: 'Production (PACTV)',
iputValue: 'production',
listeners: {
check: function (checkbox, isChecked) {
var sample = Ext.getCmp('secondComboID');
}
}
}, {
xtype: 'combobox'
fieldLabel: 'Select Test',
id: 'secondComboID',
store: testsStore,
valueField: 'id',
displayField: 'test',
typeAhead: true,
forceSelection: true,
allowBlank: false,
editable: true,
triggerAction: 'all',
lastQuery: ''
}]
});
Ext.getBody().add(me.form);
})
Can someone please suggest a fix to the script?
I would use the change event: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox-event-change
listeners: {
change: function(checkbox, newValue, oldValue, eOpts) {
var combo = checkbox.up('form').down('combobox');
if (newValue) {
combo.show();
} else {
combo.hide();
}
}
}
Also, please notice the use of the hierarchy navigation methods up() and down(). Using these (or other related methods) to find the component is much more preferable than using hard-coded component Ids.
Here's a working example of your code: https://fiddle.sencha.com/#fiddle/ua
I define a window include a form and some field and combo box. Example like
Ext.define('Ext.example.ABC', {
extend: 'Ext.window.Window',
items:{
xtype:'form',
items:[
{
xtype: 'combo',
id: 'example',
name: 'ax',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false,
fieldLabel: 'example',
mode: 'remote',
displayField:'name',
valueField: 'id',
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'id'},
{name: 'name'}
],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'example.php',
reader: {
type: 'json',
root: 'rows'
}
}
}
})
}]
}
,load: function(a) {
// do some thing
}
});
And I have a button in a grid panel
tbar:[
{
text:'create',
handler:function(){
var x = new Ext.example.ABC();
x.load(0);
}
}
But Why when i just start gridpanel then combo also load while I have not click button create.
I have many combo box and that make my grid panel load slowly :(
How can i fix that thanks
I guess you need set autoLoad: false config option for your combobox's store.
In relation to your comments - I've created an example. You can check it on jsFiddle.
It was created on ExtJs 3.4, but I think for 4.x it will be not very different.
var arrTestData = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State']
];
var combosCount = 5;
var arrItems = [];
for (var i = 0; i < combosCount; i++) {
var comboId = Ext.id();
// simple array store
var store = new Ext.data.ArrayStore({
parentCombo: comboId,
fields: ['abbr', 'state', 'nick'],
data : []
});
store.on('load', function() {
var combo = Ext.getCmp(this.parentCombo);
combo.setValue(combo.defaultValue);
});
var combo = new Ext.form.ComboBox({
id: comboId,
fieldLabel: 'Combobox #' + (i + 1),
store: store,
displayField:'state',
valueField:'abbr',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
defaultValue: arrTestData[i][0],
selectOnFocus:true
});
arrItems.push(combo);
}
var formPanel = new Ext.form.FormPanel({
bodyStyle: 'padding:5px;',
items: arrItems,
renderTo: 'combos-container'
});
new Ext.Button({
text: 'Do all cool things',
renderTo: 'combos-btn',
handler: function() {
var arrCombos = formPanel.findByType('combo');
Ext.each(arrCombos, function(combo){
combo.getStore().loadData(arrTestData);
});
}
});
So what we do there:
1. For each store we'll save parent combobox id - this is required to identify related combobox.
2. For each combobox we save own parameter - defaultValue. This is the value we want set as default after store will be loaded.
3. Listen for 'load' event and set default value for the combo.
I hope this is what you was waiting for :)
Have autoLoad:false and load your store manually for default values.
When you really want to load the store, you can do
store.load()
which will load your store for default values.
I would like to add records after the initialization of a store.
I tried loadData(), loadRawData(), add() but nothing seams to work.
Here is my jsfiddle: http://jsfiddle.net/charlesbourasseau/zVvLc
Any ideas ?
You need to set queryMode: 'local' in the combo box. Minimal example:
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
alias: 'store.ModeStore',
autoLoad: false,
fields: [{
name: 'mode',
type: 'string'
}, {
name: 'id',
type: 'string'
}],
data: [{
mode: 'mode1',
id: 1
}]
});
var container = Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
displayField: 'mode',
valueField: 'mode',
store: store,
queryMode: 'local'
});
store.add({
mode: 'mode2',
id: 2
});
});
For a panel you can add or remove items by remove() and add()
var store = Ext.create('MyApp.store.Roles', {autoLoad: false});
store.load(function(records, action, success) {
if (success) {
store.remove(store.findRecord('id', 50, 0, false, true, true));//exact match
store.add({'id':110,'name':'Agent' });
}
});