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
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'.
My ExtJS Grid is not showing my store data. Using ExtJS 5
This is my grid (it's within a hbox):
{
xtype: 'grid',
title: 'Company Manager',
id: 'companyGrid',
flex: 1,
plugins: 'rowediting',
columnLines: true,
store: Ext.data.StoreManager.lookup('companyStore'),
columns: {
items: [{
header: 'ID',
dataIndex: 'id',
},
{
header: 'Name',
dataIndex: 'name',
},
{
header: 'Token',
dataIndex: 'access_token'
},
]
}
}
This is my store (I use the Google Extension of Sencha and it's filled with my data so this works + the ending }); were ignored by the coding block):
var companyStore = Ext.create('Ext.data.Store', {
storeId: 'companyStore',
proxy: {
type: 'ajax',
url: 'resources/data/company.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'access_token',
type: 'string'
}],
autoLoad: true
});
Does anyone know were I went wrong here?
I have tried: Reloading the store, checking if the store is actually filled, refreshing the grid view.
Nothing I tried worked and I decided to ask you guys for advice :)
#Evan Trimboli
You made me think and I fiddled arround for a second and found the following solution.
Instead of using the
store : Ext.data.StoreManager.lookup('companyStore'),
I used
bind : '{companyStore}',
And moved the define store towards the CompanyModel.js file :) now it works properly!!!!
Thanks :D
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
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.
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);
}
});