How to programmatically add tooltip to a combobox - extjs

I'm trying to add a tip to a combobox during runtime with the code below but it doesn't work:
onStartReport: function (aButton) {
var lTip = Ext.getCmp('datasources');
lTip.setTooltip("Information on datasource");
}
I also tried with this, but I get an error:
onStartReport: function (aButton) {
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'datasources',
html: 'Information on datasource'
});
}
view classic:
{
xtype: 'combo',
itemId: 'datasources',
name: 'datasources',
fieldLabel: 'Data sources',
displayField: 'description',
valueField: 'id',
queryMode: 'local',
value: 0,
forceSelection: true,
editable: false,
store: {
data: [
{id: 0, description: 'OnLine'},
{id: 1, description: 'History'}
],
fields: [
{name: 'id', type: 'int'},
{name: 'description', type: 'string'}
],
autoLoad: true
}
}

This method should be fine:
onStartReport: function (aButton) {
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'datasources',
html: 'Information on datasource'
});
The problem is that your component doesn't really have an id, the only config you added was itemId and they are not quite the same, see the documentation. This is also why Ext.getCmp('datasources') is not working.
One way to fix this is to simply change itemId to id and the reference will be found.
If you don't want to add an id to your component, and keep using itemId, you could use the code below:
onStartReport: function (aButton) {
var combo = Ext.ComponentQuery.query('#datasources')[0],
tip = Ext.create('Ext.tip.ToolTip', {
target: combo.el,
html: 'Information on datasource'
});
There is also a third option which is to grab the combobox in it's relation to the component/controller that is calling the onStartReport method.
I have added an example here: https://fiddle.sencha.com/#view/editor&fiddle/2hap

Related

Make value of combobox blank

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

What is the alternate of onRender method in ExtJs 6

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;
}
}
});
});

ExtJS 5.1: Setting default ComboBox value using MVVM store

In my ViewModel, I create an inline data store for a ComboBox that I bind to in the View. The problem that I'm having is setting a default value for the ComboBox, based on one of the values in the store... I might be understanding binding here, so I'd like to hear any feedback.
OrderDetailsStatus model:
Ext.define('UserUI.model.OrderDetailsStatus', {
extend: 'Ext.data.Model',
alias: 'model.OrderDetailsStatus',
fields: [{
type: 'int',
name: 'statusId'
},
{
type: 'string',
name: 'status'
}]
});
ViewModel:
stores: {
/* TODO: This could eventually become an AJAX call, but for right now,
* it's an inline data store... the statusId's are currently unused */
orderDetailsStatusStore: {
model: 'UserUI.model.OrderDetailsStatus',
proxy: {
type: 'memory'
},
data: [
{ status: 'All', statusId: 1 },
{ status: 'Correct', statusId: 2 },
{ status: 'Incorrect', statusId: 3 }
]
}
}
In the View:
{
xtype: 'combo',
fieldLabel: 'Status',
bind: {
store: '{orderDetailsStatusStore}'
},
valueField: 'status',
displayField: 'status',
queryMode: 'local',
value: 'All',
listeners: {
select: 'onSelectComboBoxStatus'
}
}
Using the value: 'All' gives me an error about the model not existing:
TypeError: Model is not a constructor: ext-all...ebug.js (line 122343, col 33)
record = new Model(dataObj);
I'm assuming this is because the bound store hasn't been fully loaded in yet? If I debug the code, at that line, Model is undefined, and the store doesn't have any data. Any help would be appreciated.
Fiddle updated with fix in 5.1.0
<iframe src="https://fiddle.sencha.com/fiddle/m3g"></iframe>
I've created a simple fiddle that replicates yours -
https://fiddle.sencha.com/#fiddle/m3g

Display combo box when checkbox is checked - Extjs

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

Load radio button/combo box data from JSON data

I am trying to auto select radio button and combo box values of a form using JSON data. But, everything else (text boxes/ check boxes / data fields) is getting populated. I had no success auto selecting a value of the radio group or the combo box.
As suggested by Satya, here is the link to the jsfiddle. Clicking a row on the "movie database" populates the data in the "movie information form".
http://jsfiddle.net/9PVCN/5/
Thanks a lot in advance for help.
Here is the part of my form -
{
xtype:'radiogroup',
columns:1,
fieldLabel:'Filmed In',
name: 'filmed_in',
items:[{
name:'filmed_in',
boxLabel: 'Color',
inputValue: 'color'
},{
name:'filmed_in',
boxLabel: 'B&W',
inputValue: 'B&W'
}
]
},{
xtype: 'checkbox',
fieldLabel: 'Bad Movie',
name: 'bad_movie',
checked: true
},{
xtype: 'combo',
hiddenName: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField:'url',
valueField:'name',
width: 250,
editable: false,
listeners: {select: comboSelect}
},
This is how the genres store is coded -
var genres = new Ext.data.JsonStore({
// store configs
storeId: 'genres',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'genres.data',
reader: {
type: 'json',
idProperty: 'name'
}
},
fields: ['name', 'url']
});
The url genres.data returns this -
[{"name":"1","url":"Comedy"},{"name":"2","url":"Drama"},{"name":"3","url":"Action"}]
This is the data I am trying to load into the form -
{
"id":"1",
"title":"Office Space",
"director":"Mike Judge",
"released":"02/27/1999",
"genre":"1",
"bad_movie": "1",
"filmed_in": "color",
"description": "Loved watching this ....."
}
For the radio button the expected value is different then your passing.
Instead of filmed_in: 'color' you'll need to pass filmed_in: { filmed_in: 'color' }.
You can override the setValue as sra mentioned so it will work with filmed_in: 'color':
setValue: function (value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}
For the combobox, just add name: 'genre'.
http://jsfiddle.net/9PVCN/9/

Resources