Setting a value from the server in a ComboBox in ExtJS - javascript

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

Related

ExtJS chained store filter not filtering [duplicate]

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'.

ExtJs combobox dispalyfield with hyperlink

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

ExtJs4: loading json data into a grid

i've seen there are many question about this argument but anyone has an answer that fits for me. So let's dig into the code:
Ext.define('Platform Member', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'name', type: 'string', convert: null, defaultValue: undefined},
{name: 'email', type: 'string', convert: null, defaultValue: undefined},
],
idProperty: 'id'
});
This is the grid, it is recognized and the grids are in the webpage.
var store = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
model: "Platform Member",
proxy: {
type: 'ajax',
url: '../static/platform-member.json',
reader: {
type: 'json',
root: 'response/platform_members'
}
}
});
Question, is the root attribute the node of the json three which should be read? Cause the names of the grid's columns are the names of the fields of this node that should be read in the json file. The json file is below but i suggest you to read with this viewer.
The json.
Agnese

To begin with, the root is incorrect. It should be response.platform_members.
Also, the model name is a class name, so it should be PlatformMember.

loading label is misplaced on extjs combo box

I have an ext.data.store and Ext.form.field.ComboBox. The store is reloaded with new data from php every 5 seconds. The problem I get is, when i press the combo box and new data is loaded at the moment the loading label that shows the preloader is places or in top left corner or behind the combo box or somewhere in the middle of the screen if i move the combo window.
How can I fix this or what do I do wrong?
Here is a sample code:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'type', type: 'int'},
{name: 'myarray', type: 'auto'}
],
});
var myStore = new Ext.data.Store({
model: 'MyModel',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'MyModel'
}
},
autoLoad: true
});
var createCombo = function(){
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: myStore ,
queryMode: 'remote',
displayField: 'type',
valueField: 'id'
});
}
createCombo ();
I made this code as my code I am using in development. It works well but the loading label is misplaced

Correct JSON and Model with TreeStore and TreePanel

I have a JSON String comes from the server side:
{"success":"true","total":"6","list":
[{"id":"1","name":"folder1","parentid":"null","type":"0"},
{"id":"2","name":"r1","parentid":"1","type":"1"},
{"id":"3","name":"folder2","parentid":"1","type":"0"},
{"id":"4","name":"r2","parentid":"3","type":"1"},
{"id":"5","name":"r3","parentid":"null","type":"1"},
{"id":"6","name":"folder3","parentid":"null","type":"0"}]}
How do I turn that into a tree? Can anyone suggest me how to get the elements in the list (id, name, parentid, type)?

I used the following structure:
Model
Ext.define('MyApp.model.MyTreeModel', {
extend: 'Ext.data.Model',
fields: [
'someStringIdentifier',
'children',
'dataForThisNode',
],
});
Store
Ext.define('MyApp.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
model: 'MyApp.model.MyTreeModel',
storeId: 'cubeDynamicStoreId',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read : '/myapp/rest/myquery',
},
reader: {
type: 'json',
root: 'children',
successProperty: 'success',
idProperty: 'id',
},
},
// bug in extjs4.1 autoLoad is ignored
// specifying "loaded: true" resolves the problem
root: {
expanded: true,
loaded: true,
},
});
Sample JSON ( use http://jsonviewer.stack.hu/ to visualize)
Use the leaf property to stop expansion at any node
{"children":{"leaf":false,"someStringIdentifier":"Total","dataForThisNode":{},"children":[{"leaf":true,"someStringIdentifier":"data1","dataForThisNode":{},"children":[{"leaf":false,"someStringIdentifier":"2012","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2013","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2014","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2015","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2016","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2017","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2018","dataForThisNode":{},"children":null}]},{"leaf":true,"someStringIdentifier":"data2","dataForThisNode":{},"children":[{"leaf":false,"someStringIdentifier":"2012","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2013","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2014","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2015","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2016","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2017","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2018","dataForThisNode":{},"children":null}]}]},"success":true}

Let's start with the store definition:
Ext.define('app.store.Tasks', {
extend: 'Ext.data.TreeStore',
model: 'app.model.Task',
autoSync: true,
autoLoad: true,
root: {
text: 'Root',
id: 'NULL',
expanded: true
},
});
The important thing to note is that we are extending TreeStore here. Thus, our model records will be wrapped with Ext.data.NodeInterface, which included many tree-related fields (like, for example, parentNode).
Then to the model definition:
Ext.define('app.model.Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'name' , type: 'string'},
{name: 'iconCls' , type: 'string', defaultValue: 'treenode-no-icon'},
{name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
{name: 'index' , type: 'int'},
],
proxy: {
type: 'direct',
api: {
create: Tasks.Create,
read: Tasks.Read,
update: Tasks.Update,
destroy: Tasks.Destroy,
},
},
});
The only 'real' field we've defined is name, All the others are part of NodeInterface: iconCls has a default value of no icon; expanded is set with persist:false so collapsing/expanding a node won't result in an update server call; index is included so if the user re-order nodes (using drag and drop) server calls will be made.
Notice that there's no id field since a a model's default idProperty is id, ExtJS is smart enough to figure that if your JSON has id field in it - it represents the unique id of the record.
Also note there's no parentId field - by providing correct JSON (with nodes having children property), NodeInterface work out the correct parentNode of each node.
Then the JSON:
{
"success":true,
"children":[
{
"id":"1",
"name":"Home",
"children":[
{
"id":"6",
"name":"Emails",
"leaf":true
},
{
"id":"7",
"name":"Bath",
"leaf":true
}
],
"leaf":false
},
]
}
That's pretty much it!

The first answer on this subject from Izhaki is great, but it seems misleading and will not work as is if your expectation is to see the description for nodes. I spent several hours struggling with this. The only way to see this description is to rename "name" with "text". see below.
Ext.define('app.model.Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'text' , type: 'string'},
{name: 'iconCls' , type: 'string', defaultValue: 'treenode-no-icon'},
{name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
{name: 'index' , type: 'int'},
],

Categories

Resources