I want combobox displayfield value with hyperlink. The selected combobox value should display with a hyperlink, if I click that selected combobox value then it will open in a new tab.
var multiComboMap = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select multiple states',
renderTo: 'combo-map',
multiSelect: true,
//disabled: true,
displayField:'locationMap',
valueField:'locationId',
id:'combo-map',
width: 500,
labelWidth: 130,
emptyText: 'To view map select it',
store: Ext.create('Ext.data.Store', //get data for the combobox
{
fields: [
{
name: 'locationId',
type: 'int'
},{
name: 'locationName',
type: 'string'
},{
name: 'locationMap',
type: 'string'
}
],
proxy: {
type: 'ajax',
//url: '../data/users.asp',
url: '/AOP_MEETING/venueMaster.json',
reader: {
type: 'json',
root: 'venueMasterc'
}
},
autoLoad: true
}),
triggerAction:'all',
mode:'local',
typeAhead: true,
lastQuery:''
});
Thanks in advance.
You could use 'Ext.XTemplate' to add hyperlinks to combobox displayfield, but user have to ctrl+click on it open it in a new tab.
Sample here: https://fiddle.sencha.com/#fiddle/146
Related
This question already has an answer here:
ExtJS combobox filter
(1 answer)
Closed 3 years ago.
Filter for combobox is not working and I am not sure why. I have two comboboxes, one is province and other is city. When I select a province, the city combobox will be filtered according to the selected province using the province_id.
View Model Code:
data: {
selectedProvince: null
},
stores: {
province: {
fields: [ 'province_id', 'province_name' ],
proxy: {
type: 'ajax',
url: '*some url to province*',
reader: {
type: 'json',
rootProperty: 'data'
}
}
},
city: {
fields: [ 'city_id', 'city_name', 'province_id' ],
proxy: {
type: 'ajax',
url: '*some url to city*',
reader: {
type: 'json',
rootProperty: 'data',
}
},
},
filteredStore: {
type: 'chained',
source: '{city}',
remoteFilter: false,
filters: [{
property: 'province_id',
value: '{selectedProvince}'
}],
}
}
Province Combobox Code:
xtype: 'combobox',
label: 'Province',
valueField: 'province_id',
displayField: 'province_name',
bind: {
store: '{province}',
value: '{selectedProvince}'
}
City Combobox Code:
xtype: 'combobox',
label: 'City',
valueField: 'city_id',
displayField: 'city_name',
bind: {
store: '{filteredStore}'
}
I have tried these:
https://fiddle.sencha.com/#fiddle/983&view/editor
https://fiddle.sencha.com/#view/editor&fiddle/2dt0
And I have also tried placing the filter inside the combobox like this:
xtype: 'combobox',
label: 'City',
valueField: 'city_id',
displayField: 'city_name',
bind: {
store: '{filteredStore}',
filters: {
property: 'province_id',
value: '{selectedProvince}'
}
}
And still, the results are still not filtered. I'm using extjs 7, if that helps. Thanks
This is a duplicate from your other question:
The answer is still in this Fiddle
I updated it to match your question in this thread.
You have to set both stores to autoLoad: true and the combobox to queryMode: 'local'.
Help with any portion of this is appreciated. I am totally new to using extjs and the version is old (3.3). When the user selects the combo box, data is loaded in the combo box. I need to allow the user to select/insert a blank option (i.e.: so the first option should be id:0 field and can be blank). Last, I must give the model an additional field: id.
I can see the data returned in network tab, so I have the url path correct (the url was set up to return an id and list name), but the store property is empty, so no data in combo box.
header: 'Bucket List',
sortable: true,
dataIndex: 'bucket_list',
width: 10,
align: 'center',
editor: BucketList = new Ext.form.ComboBox({
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
beforeload: function (data_objStore, data_objOpt) {
data_objOpt.params.userModel = userModelCbx.getValue();
data_objOpt.params.user_id = 001;
}
}
}),
listeners: {
blur: function () { }
}
}),
Below code shows the response, but at index 0, id is 1. I need index 0 to be id: 0 or null value ( 0: {id: 0, name: ''} )
RESPONSE:
0: {
id: 1,
name: "bucketListItem_1"
}
1: {
id: 2,
name: "bucketListItem_2"
}
2: {
id: 3,
name: "bucketListItem_3"
}
3: {
id: 4,
name: "bucketListItem_4"
}
I have read alot of the docs and answers here on SO. I tried using some of the store methods, like add(), insert(), load(), but I'm probably using them in the wrong places or something. I'm asking here because I'm stuck and I really hope someone will help me. Thanks.
UPDATE:
after beforeload, add this to store listeners to insert a blank record. Make sure your reader is accessing the right fields
beforeload: function( sObj, optObjs ){
// code here...
},
load: function(store, records) {
store.insert(0, [new Ext.data.Record({
id: null,
name: 'None'
})
]);
}
Response:
0: {
id: null,
name: "None"
}
1: {
id: 1,
name: "bucketListItem_1"
}
2: {
id: 2,
name: "bucketListItem_2"
}
...
You may try with next working example. You need to insert the record on store's load listener using new Ext.data.Record. Also check tpl config option - it's needed to show empty record correctly. Example is tested with ExtJS 3.4, but I think it should work with your version too.
Ext.onReady(function() {
var combo = new Ext.form.ComboBox({
tpl : '<tpl for="."><div class="x-combo-list-item">{name} </div></tpl>',
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
load: function (s) {
record = new Ext.data.Record({
id: 0,
name: ''
});
s.insert(0, record);
}
}
})
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'combo-extjs3-editor-json.html',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
})
}),
width: 600,
height: 300,
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 130,
editor: combo
}
]
});
});
First of all, sorry for my english.
Undoubtedly, before writing, I searched a lot, but without success.
I have two comboBox linked.
The first :
var groupe_cible = new Ext.data.JsonStore({
url : "data/fonctions_data.php?pFunction=access_group&user_id=" + p,
fields: [
{name: 'value', mapping: 'value', type: 'string'},
{name: 'id', mapping: 'id_group', type: 'int'}
],
autoLoad : true
});
json result :
[{"value":"fibre","id_group":1},{"value":"eau_pluviale","id_group":2}]
The second :
var param_cible = new Ext.data.ArrayStore({
//pruneModifiedRecords: true,
autoDestroy: true,
url : "data/fonctions_data.php?pFunction=access_param&user_id=" + p,
fields: [
{name: 'value', mapping: 'value', type: 'string'},
{name: 'id', mapping: 'id', type: 'int'},
{name: 'groupcode', mapping: 'groupcode', type: 'int'}
],
autoLoad : true
});
json result :
[{"value":"vias","id":2,"groupcode":2},{"value":"cahm","id":1,"groupcode":1},{"value":"agde","id":2,"groupcode":2}]
the link: id_group = groupcode
ComboBox =
var groupeCombo = new Ext.form.ComboBox({
id: "contenutypetraitementdict",
x: 5,
y: 55,
width : 150,
store: groupe_cible,
emptyText:'Choisir le type de traitement',
valueField: 'id',
displayField: 'value',
typeAhead: false,
editable: false,
mode: 'local',
allowBlank:false,
forceSelection: true,
border: false,
triggerAction: 'all',
//lastQuery: '',
selectOnFocus:true,
listeners: {
select : function(cmb, group, idx) {
autosStore = paramCombo.getStore();
paramCombo.clearValue();
autosStore.clearFilter();
autosStore.filterBy(function(item) {
var paramCode = item.get('groupcode');
var selected = (paramCode === group.data.id);
return selected;
});
paramCombo.enable();
}
}
});
var paramCombo = new Ext.form.ComboBox({
id: "contenutypetraitementdictparam",
x: 5,
y: 85,
width : 150,
store: param_cible,
emptyText:'Choisir le type de traitement',
allowBlank:false,
valueField: 'id',
displayField: 'value',
//border: false,
typeAhead: false,
editable: false,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
lastQuery: '',
selectOnFocus:true
});
Then both comboBox are in a FormPanel.
The link works, but i have a problem : see attachment
The drop-down list is linked, but there is always a default value.
To follow the example, if I click on the value "agde", the second item, at the end, I always have the first value ("vias").
The problem is hard to solve (no problem with Firebug).
Thank you.
Try to use filter
Filter the records by a specified property. Alternatively, pass an array of filter options to filter by more than one property. Single filter example: store.filter('name', 'Ed', true, true)
I have created an sencha fiddle demo hope this will help you to solve problem or achieve your requirement.
Ext.onReady(function () {
//groupe_cible store
var groupe_cible = new Ext.data.JsonStore({
fields: [{
name: 'value',
mapping: 'value',
type: 'string'
}, {
name: 'id',
mapping: 'id_group',
type: 'int'
}],
type: 'ajax',
url: 'groupe_cible.json',
type: 'json',
root: 'data',
autoLoad: true
});
//param_cible store
var param_cible = new Ext.data.JsonStore({
fields: [{
name: 'value',
mapping: 'value',
type: 'string'
}, {
name: 'id',
mapping: 'id',
type: 'int'
}, {
name: 'groupcode',
mapping: 'groupcode',
type: 'int'
}],
type: 'ajax',
url: 'param_cible.json',
type: 'json',
root: 'data',
autoLoad: true
});
//groupe_cible combo
var item1 = new Ext.form.ComboBox({
mode: 'local',
triggerAction: 'all',
listClass: 'comboalign',
typeAhead: true,
forceSelection: true,
selectOnFocus: true,
displayField: 'value',
emptyText: 'Select groupe_cible',
valueField: 'id_group',
store: groupe_cible,
listeners: {
select: function (combo, record) {
var param_cible = Ext.getCmp('param_cible'),
store = param_cible.getStore();
param_cible.setDisabled(false).setValue('');
store.clearFilter();
store.filter('groupcode', combo.getValue());
// You can also use getValue method of Combo
// store.filter('groupcode', record[0].get('id'));
}
}
});
//param_cible combo
var item2 = new Ext.form.ComboBox({
mode: 'local',
triggerAction: 'all',
listClass: 'comboalign',
typeAhead: true,
forceSelection: true,
selectOnFocus: true,
id: 'param_cible',
disabled: true, //initially param cibil will disable
emptyText: 'Select param_cible',
displayField: 'value',
valueField: 'id',
store: param_cible
});
//create panel with both combo
new Ext.Panel({
width: 250,
renderTo: document.body,
title: 'Filter in Combo on basis of selection',
items: [item1, item2]
});
});
I am trying to load my data from the xmll to tagfield. But I am not sure what is getting failed. Can anybody please suggest me what is going wrong here.
I am using store for tagfield which is in different function. I don'y know even not able to do debugging also over there.
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store: this.TagStore,
//displayField: 'show',
valueField: 'id',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
debugger;
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'value',
mapping: "ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "TITLE",
type: 'string'
}],
proxy: new Ext.data.HttpProxy({
type: 'ajax',
actionMethods: {
read: "GET"
},
url: "localhost/MyApp/resources/data.xml",
headers: {
'Accept': 'application/json; charset=utf-8'
},
reader: {
type: 'xml',
rootProperty: 'R.D.Result'
},
extraParams: {
strIPXML: strIPXML
}
})
});
}
});
MyXml :
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>
Can anybody help me how to load data through xml in extJS
Just got sometime to play with your issue on sencha fiddle, Here is the basic working code (Atleast seeing tagfield store populated). Used: Ext JS 5.1.1.451 - Gray
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('MyApp.view.main.List', {
extend: 'Ext.form.Panel',
title: 'Simple Form',
xtype: 'mainlist',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'tagfield',
fieldLabel: 'Select a Show',
store:Ext.getStore('TagStore'),
displayField: 'name',
valueField: 'value',
queryMode: 'local',
filterPickList: true,
}],
renderTo: Ext.getBody(),
TagStore : function(){
var combstore = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId:'TagStore',
fields: [{
name: 'value',
mapping: "#ITEMID",
type: 'string'
}, {
name: 'name',
mapping: "#TITLE",
type: 'string'
}],
proxy: {
type: 'ajax',
url: "data1.xml",
reader: {
type: 'xml',
record: 'E',
rootProperty:'EMAIL'
}
}
});
return combstore;
}
});
var form = Ext.create('MyApp.view.main.List');
form.TagStore();
var store = Ext.getStore('TagStore');
form.child('[xtype=tagfield]').bindStore(store);
}
});
data1.xml
<?xml version="1.0" encoding="UTF-8"?>
<EMAIL>
<E TITLE="test#test.com" ITEMID="A" />
<E TITLE="test2#rwer.wer" ITEMID="B" />
</EMAIL>
I am using a DataStore with a JsonReader to populate the ComboBox, but the proper value is not being marked as selected.
ComboBox:
{
fieldLabel: 'Business Unit',
xtype:'combo',
width:167,
name: 'business_Unit',
hiddenName: 'businessUnit',
store: businessUnitStore,
displayField: 'buName',
valueField: 'buId',
mode: 'remote',
triggerAction: 'all',
typeAhead: false,
editable: false
}
and I use a JsonReader in my form.
var leadReader = new Ext.data.JsonReader({
root: 'data',
totalProperty: 'total',
id: 'leadId'
}, [
{name:'title', type: 'string'},
{name:'firstName', type: 'string'},
{name:'lastName', type: 'string'},
{name:'designation', type: 'string'},
{name:'business_Unit', type: 'string', mapping: 'businessUnit.buName'},
]);
This is the JSON response:
{"data":{"leadId":22,"firstName":"fname","lastName":"lname","designation":"President","businessUnit":{"buId":4,"buName":"US","buDescription":""}},"success":true}
I want the BusinessUnit = US selected in the combobox and also have all the other options available for selection in the combo when I load the form.
editForm.getForm().load({url:fetchUrl, method: 'GET'});
Everything works fine, except that the BusinessUnit=US is not selected in the combo.
The name field on the combo doesn't match the field in the json response (business_Unit vs businessUnit) but also I don't think BasicForm.load will work with nested objects. After the load call you may have to manually load it.
editForm.getForm().load({url: fetchUrl, method: 'GET', success: function(form, action) {
var combo = form.findField('business_Unit');
combo.setValue(action.result.data.businessUnit.buiId);
}
});