I have a combo with a remote store in the modal window. To obtain the data is necessary to send an extra parameter to the store. This parameter is stored as a property of the window. How can I pass it?
This is my app.js file (I use MVC model, atleast try to use it :) ):
Ext.application( {
requires: [
'Ext.Ajax'
],
autoCreateViewport: true,
name: 'PM',
stores: [
...
'SourceIps',
...
],
models: [
...
],
controllers: [
...
],
init: function() {
}
} );
How I show window:
showAddRProbe: function () {
var data = {
'deviceId': this.getProbesDeviceCombo().getValue()
};
var addProbe = Ext.create( 'PM.view.AddProbe', [true, data] );
addProbe.show();
}
Window:
Ext.define( 'PM.view.AddProbe', {
extend: 'Ext.window.Window',
...
constructor: function( data ) {
this.newProbe = data[0];
this.probeData = data[1];
...
Required parameter passed as probeData.data.deviceId
Combo:
{
xtype: 'combo',
allowBlank: false,
blankText: Locale.gettext( 'Please select a Source IP' ),
fieldLabel: Locale.gettext( 'Source IP' ),
name: 'sourceIP',
triggerAction: 'all',
store: 'SourceIps',
value: Ext.getStore( 'SourceIps' ).getAt(0).get('id'),
valueField: 'id',
displayField: 'name',
queryMode: 'local'
}
Store:
Ext.define('PM.store.SourceIps', {
extend: 'Ext.data.Store',
model: 'PM.model.IdName',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/getDeviceIps.php'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message'
}
}
});
I tired to add extraParam as follow, but it does not work:
var probeData = this.getProbeWindow().probeData.data;
this.getSourceIpCombo().getStore().getProxy().setExtraParam( 'deviceId', probeData.deviceId );
this.getSourceIpCombo().getStore().load();
Use
this.getSourceIpCombo().getStore().load({
params: {
deviceId : probeData.deviceId
}
});
You could add storeId property to your store and then use
var store = Ext.data.StoreManager.lookup('myStore');
and use this to apply extra params:
Ext.apply(store.getProxy().extraParams, {
foo : 'bar',
...
});
or
store.getProxy().setExtraParam("countriesId", 1) // add parameter 'countriesId' = 1
Related
So I have a combobox that is loaded dynamically for a certain view.
Whenever I put the queryMode to remote, it would load the data if I clicked the combobox, but if set to local it won't show any data.
My store will return the requested data properly, it's just it won't show in the combobox.
Am I missing something here?
Hope someone can help me.
This is my controller for the view with the combobox:
Ext.define('Stm.controller.HpUpdate', {
extend: 'Ext.app.Controller',
requires: [
'Stm.view.contents.hpupd.Detail'
],
stores: [
'SiteDomain'
],
fromDetail: false,
isAbort: false,
isDataSeted: false,
firstSorters: undefined,
recordId: undefined,
isUpdate: false,
init: function() {
this.callParent(arguments);
console.log(Ext.getDisplayName(arguments.callee));
this.control({
'hup-list': {
afterRender: this.setupStmList
}
});
this.addRef([{
ref: 'list',
selector: 'hup-list'
},
{
ref: 'detail',
selector: 'hup-detail'
},
]);
},
setupStmList: function() {
console.log(Ext.getDisplayName(arguments.callee));
var me = this;
var store = me.getSiteDomainStore();
var record = Cps.Util.baseRecord();
store.load({
params: param,
callback: function(records, operation, success) {
var response = operation.response;
if (!response || response.length === 0) {
return;
}
var responseText = response.responseText;
if (!responseText || responseText.length === 0) {
return;
}
var res = Ext.decode(responseText);
if (res.common.st === 'mainte' || res.common.st === 'abort') {
return;
}
if (res.common.st === 'ng') {
Cps.Util.alert(res.common.msg);
return;
}
if (records.length === 0) {
return;
}
me.getList().down('#dtAplDateTimeFrom').down('#dateField').focus();
}
});
me.firstSorters = this.getHpUpdateStore().getSorters();
},
});
This is my view:
Ext.define('Stm.view.contents.hpupd.List', {
extend: 'Ext.container.Container',
alias: 'widget.hup-list',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'cps-combobox',
fieldLabel: 'Domain',
itemId: 'cmbSiteDomain',
queryMode: 'local',
store: {
type: 'sitedomain'
},
width: 350,
displayField: 'siteDomain',
valueField: 'siteId',
}],
});
Store:
Ext.define('Stm.store.SiteDomain', {
extend: 'Extends.data.Store',
alias: 'store.sitedomain',
requires: [
'Cps.Setting',
'Stm.model.SiteInfo'
],
model: 'Stm.model.SiteInfo',
pageSize: Stm.Const.controller.dataCountLimit,
proxy: {
type: 'ajax',
url: Cps.Setting.getEntryUrl() + '/stm/st-update/site-domain',
reader: {
type: 'json',
rootProperty: 'data'
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
}
});
When you set queryMode to local it means that data will not be loaded from remote source and data should be defined by for example Ext.data.ArrayStore
{
xtype: 'combobox'
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: [[1, 'item1'], [2, 'item2']]
})
}
If you want to data to be loaded from remote source just once and combo query data locally you should add store items manually
Define your combo like:
{
xtype: 'combobox'
itemId: 'myCombo'
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: []
})
}
And then add items to the combo like:
Ext.Ajax.request({
url : 'Remote_Source',
success: function(response, opts) {
var json = Ext.decode(response.responseText),
store = me.down("#myCombo").getStore();
Ext.each(json.items, function(item){
store.add(item);
});
}
});
Note: This is sample code you should add your implementation
This is exactly what I am doing. First I build my store by adding items. And then I use the store in my combobox with querymode: local. When I expand the combobox, no items show. When I change querymode to remote, the items show upon expansion, but they are grayed, as the store tries to load data from the server, which fails of course. I have not idea what to do about it. It looks like a bug to me.
I'm building my first platform using Ext.js, and I'm trying to figure it out how can I specify a limit of rows for my Gridpanel. I would like to show only the last 10 values from a store
At the moment, I'm receiving all the values from a store, and I'm populating the grid with this values,
I could use this:
gridStore.remove(gridStore.getAt(i))
But I can't remove the data from the store because I'm using this store to load some polylines on a map too, so I have to hide the rows instead of removing data from the store.
My Store:
Ext.define('ES.store.Timeline', {
extend: 'Ext.data.Store',
alias: 'store.timeline',
storeId: 'timeline',
fields: [
'vid', 'time', 'lat', 'lng', 'address', 'dir', 'vel', 'hidden'
],
pageSize: 500,
autoSync:true,
sorters: [
{
property: 'time',
direction: 'DESC'
}
],
data: {
query: []},
proxy: {
type: 'sessionstorage',
id: 'sessionTimeline',
reader: {
type: 'json',
rootProperty: 'query'
}
},
filters: [{ property: 'hidden', value: false }]
});
My Grid
Ext.define('ES.view.Layout.Menu.Menu', {
extend: 'Ext.grid.Panel',
alias: 'widget.timelineBar',
controller: 'menu',
viewModel: 'menu',
pageSiz: '10',
id: 'timelineBar',
autoScroll: true,
title: 'Timeline',
store: {
type: 'timeline'
},
columns: {
border: false,
defaults: {
hoverCls: ''
},
items: [{ ...
}]
}
});
Thank you
pageSize is property of store, not grid (and you have typo in your code - pageSiz).
I think you can use memory proxy with enablePaging instead of sessionstorage proxy. Also you might need Ext.toolbar.Paging.
Check this fiddle.
You could also used a chained store, to be sure to not alterate the main store.
In the ViewModel of your page, you could use code like this :
initConfig: function(instanceConfig) {
var me = this,
config = {
stores: {
MainStore: {
storeId: 'MainStore',
model: ...,
proxy: {
...
})
},
LastUsed: {
autoDestroy: true,
source: 'MainStore',
// paging doesn't work on chained store
filters: [
function(record) {
let store = me.getStore('LastUsed'),
recordIndex = store.getRange().indexOf(record),
lastUsedCount = 10;
if((recordIndex+1) > lastUsedCount) {
return false
}
return true;
}
]
}
}
};
if (instanceConfig) {
me.getConfigurator().merge(me, config, instanceConfig);
}
return me.callParent([config]);
}
use pageSize property of store.if you want show only 10 records.
but if you want show last 10 records then you have to pass filter.
filters: [
function(record) {
<condition>
return true/false;
}
]
I am trying the get a combox in a grid which select something in the editor function. But the rendering value is 0 each time. After saving it works correctly.
Ext.define('Shopware.apps.Order.view.detail.BackPosition', {
override: 'Shopware.apps.Order.view.detail.Position',
initComponent: function () {
var me = this;
me.mdsupplierStore = Ext.create('Shopware.apps.Order.store.MDSupplier').load();
me.callParent(arguments);
},
getColumns: function(grid) {
var me = this;
var col = me.callOverridden(arguments);
var md_supplier = {};
grid.mdsupplierStore = me.mdsupplierStore;
var MDSupplier= {
header: 'Lieferant',
dataIndex: 'md_supplier',
flex:2,
renderer: me.supplierColumn,
editor: {
xtype: 'combobox',
editable: false,
queryMode: 'local',
allowBlank: false,
store: grid.mdsupplierStore,
displayField: 'name',
valueField: 'id',
}
};
col = Ext.Array.insert(col, 9, [MDSupplier]);
return col;
},
supplierColumn: function(value, metaData, rowRecord) {
var me = this;
console.log(value);
//value is 0 when I click the editor combobox <---
},
});
Model:
Ext.define('Shopware.apps.Order.model.MDSupplier', {
extend:'Shopware.data.Model',
idProperty : 'id',
fields:[
{ name : 'id', type: 'int'},
{ name : 'name', type: 'string'}
]
});
Store:
Ext.define('Shopware.apps.Order.store.MDSupplier',{
configure: function() {
return { controller: 'MDSupplier' };
},
/**
* Define that this component is an extension of the Ext.data.Store
*/
extend: 'Ext.data.Store',
/**
* Auto load the store after the component
* is initialized
* #boolean
*/
autoLoad: false,
/**
* Define the used model for this store
* #string
*/
model: 'Shopware.apps.Order.model.MDSupplier',
proxy : {
type : 'ajax',
url: '/backend/MDSupplier/load',
reader:{
type: 'json',
root: 'data',
totalProperty: 'total'
}
}
});
Can anybody tell me, what am I doing wrong ?
I got it. The processing of the data was wrong, so the field was everytime NULL
I am using ext-4.2.1, below is the code. It has two problems, (1) buildCategoryStore(), combo can't find the store. (2) the below is the xml data, looks like the store xml reader doesn't work, how to set up the xml root ?
Thanks
Ext.define('App.view.QuestionForm',{
extend : 'Ext.form.Panel',
alias : 'widget.QuestionForm',
requires : [],
initComponent : function(){
var me = this;
me.items = me.buildItems();
me.callParent();
},
buildCategoryStore: function(){
var CategoryStore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['id','name'],
proxy: {
type: 'ajax',
url: 'rs/question/getAllCategories',
reader: {
type:'xml',
root: 'CategoryList'
}
},
storeId: 'CategoryStore',
root: 'CategoryList'
});
return CategoryStore;
},
buildItems : function(){
return [
{
xtype: 'combo',
anchor: '100%',
fieldLabel : 'Category',
store: buildCategoryStore(),
name: 'category',
mode: 'local',
multiSelect: false
},
];
},
}
});
xml data :
<CategoryList>
<Category>
<active>Y</active>
<id>1000</id>
<name>Life</name>
<versionNum>0</versionNum>
</Category>
<Category>
<active>Y</active>
<id>1001</id>
<name>Career</name>
<versionNum>0</versionNum>
</Category>
</CategoryList>
I've fixed up your code. The important parts are you need to call this.foo() and you need to specify the record param for the reader.
Ext.define('App.view.QuestionForm', {
extend: 'Ext.form.Panel',
alias: 'widget.QuestionForm',
requires: [
'Ext.data.Store'
],
initComponent: function() {
this.items = this.buildItems();
this.callParent();
},
buildCategoryStore: function() {
return new Ext.data.Store({
autoLoad: true,
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: 'rs/question/getAllCategories',
reader: {
type: 'xml',
record: 'Category'
}
}
});
},
buildItems: function() {
return [{
xtype: 'combo',
anchor: '100%',
fieldLabel: 'Category',
store: this.buildCategoryStore(),
name: 'category',
mode: 'local',
multiSelect: false,
valueField: 'id',
displayField: 'name'
}];
}
});
I'm setting my fields directly in the store configuration.
Ext.define('T.store.Users', {
extend: 'Ext.data.Store',
autoLoad: false,
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});
Is it possible to set somehow an idProperty for these fields direct in the store ? The only option I see is to create a separate model class containing a idProperty. But I'd like to avoid this.
The default id Property is id. You can change it either on the model or the reader of the proxy.
Note: the store can use the proxy of the model (not done in this example).
Example (with both)
// Set up a model to use in our Store
Ext.define('User', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users',
idProperty: 'Id'
}
},
autoLoad: true
});
You can theoretically change the idProperty from within the constructor this way:
Ext.define('T.store.Users', {
extend: 'Ext.data.Store',
autoLoad: false,
constructor: function(){
this.callParent(arguments);
this.model.prototype.idProperty = 'Id';
},
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});
For ExtJS 6
Ext.define(null, {
override: 'Ext.data.ProxyStore',
/**
* #cfg {String} idProperty
*/
// idProperty: null,
privates: {
createImplicitModel: function(fields) {
var me = this,
modelCfg = {
extend: me.implicitModel,
statics: {
defaultProxy: 'memory'
}
},
proxy, model;
if (fields) {
modelCfg.fields = fields;
}
// add
if(me.idProperty) {
modelCfg.idProperty = me.idProperty;
}
model = Ext.define(null, modelCfg);
me.setModel(model);
proxy = me.getProxy();
if (proxy) {
model.setProxy(proxy);
} else {
me.setProxy(model.getProxy());
}
}
}
});
Example
Ext.define('T.store.Users', {
extend: 'Ext.data.Store',
autoLoad: false,
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});
Test
var store = Ext.create('T.store.Users');
console.log(store.model.idProperty); // "Id"
console.log(store.model.idField); // constructor {name: "Id", type: "int"..}
store.add({Id: '11', Name: 'XXX'})