Develop Reference

Get and send id tagfield values. Extjs

There are two fields in the grid:
...
{
text: 'Спец. учетка',
sortable: true,
dataIndex: 'specuserName',
flex: 2,
editor: {
xtype: 'combobox',
store: 'Vendors',
displayField: 'name',
valueField: 'name',
//editable: false,
queryMode: 'remote',
//forceSelection: true,
triggerAction: 'all',
allowBlank: true
}
},
{
header: 'Сотрудники группы',
dataIndex: 'users',
flex:2,
editor: {
xtype: 'tagfield',
typeAhead: true,
queryMode: 'remote',
filterPickList: true,
triggerOnClick: true,
displayField: 'name',
valueField: 'name',
triggerAction: 'all',
store: 'IntraUsers',
}
},
...
ViewController looks like that:
Ext.define('App.view.MainIntranetController', {
extend: 'Ext.app.ViewController',
alias: 'controller.intranetcontainer',
onGridEditorIntraEdit: function (editor, ctx, eOpts) {
//combobox
var vendorColIdx = 2;
var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var vendorRecord = combo.findRecord('name', combo.getValue());
console.log(vendorRecord);
ctx.record.set('specuserId', vendorRecord.get('id'));
//tagfield
var vendorColIdx = 3;
var tagfields = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var valuetag = tagfields.getValue();
//ctx.record.set('mainusersId', vendorRecord.get('id'));
//ctx.record.set(valuetag);
//console.log(ctx.record);
//ctx.grid.getStore().sync();
}
});
First I get the id of the selected combobox values ​​and set it to send to the server, and then I try to get the id of the selected tagfields values ​​to send them to the server, but I don’t get it right.
How to make the id of the selected values ​​with tagfield go to the server.
Thanks.

Since setting the tagfield's displayField to "name" prevents getting the array of selected record ids, another way to achieve this is by using tagfield's getValueRecords method. We can pass the result of this method to the Array's map function and gather only the ids:
var tagfieldSeletedIds = Ext.Array.map(tagfield.getValueRecords(), function(record) {
return record.getId()
});

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.

How to access the image which is inside extjs grid column header using jQuery

I am using extjs 4 grid in my application and this is my code:
{
flex: 1,
sortable: true,
text: "<span ' title='#{adminManager.licenseDesc()}'>License ? <img class=\"tooltips\" src=\"#{request.contextPath}/images/help2.jpg \" height=\"18\" width=\"18\"/></span>",
id: "rg",
renderer: renderStatus,
dataIndex: 'license',
field: {
xtype: 'combo',
itemId:'license',
emptyText:'Select',
editable: false,
id:'govtOfficial',
autoSelect:true,
allowBlank: false,
width:50,
queryMode: 'local',
store: new Ext.data.ArrayStore({
fields: [
'value',
'text'
],
data: [['true', 'Yes'], ['false', 'No']]
}),
valueField: 'value',
displayField: 'text'
}
}
Now I am trying to implement the tooltip text using the demo showin in "http://calebjacob.com/tooltipster/#demos" website.
I implemented the same in the other parts of the page like this
<img src="#{request.contextPath}/images/help2.jpg " class="tooltips" style="margin-left: 165px;" title="#{AdminManager.licenseDesc()}" height="18" width="18"/>
and I am able to the access the element based on the class="tooltips" and it is working fine. But I am not able to access the image which is in extjs grid column based on the below class selector.
jQuery('.tooltips').tooltipster({
animation: 'fade',
delay: 200,
theme: '.tooltipster-default',
touchDevices: true,
trigger: 'hover',
interactive: true
});
I understood that extjs assigns ids at runtime. How to access the image inside the extjs grid?

You can use dom property of ExtJS objects.
$(MyComponent.dom).whatever();

listerner for multiselect in ExtJS

I'm using ExtJS 3.2.1 Version.
Can we provide listerners for multiselect in ExtJS?
items: [{
fieldLabel: 'Vehicle List',
xtype: 'multiselect',
autoScroll: true,
name: 'vehicleSimNo',
id: 'multi_vehicles',
displayField: 'vehno',
valueField: 'vehno',
valueField: 'simno',
store: store,
listeners: {
'select': function() {
alert("Entered!!");
//Ext.getCmp('man_dispatch_win').getform().findfield('vehicleSimNo1').enable();
}
}
}]
Here I'm not getting alert. is there any alternative for xtype: 'multiselect'?
Please give me guidance.

Ext.ux.form.MultiSelect is available since 4.0.7. And we don't have select event for multiselect instead we have change event.
For reference:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.form.MultiSelect

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.