We Keep Coding

ExtJS callParent on messageBox show method not working

On ExtJS 6.02, I have this code:
Ext.define('MyDialog', {
extend : 'Ext.window.MessageBox'
, title : 'My title'
, closable : false
, buttonText : {
ok : 'Yes'
, yes : 'Yep'
, no : 'No way'
, cancel : 'Cancel'
}
, show: function(cfg) {
cfg = {
icon: Ext.Msg.QUESTION
, msg : 'test'
, buttons : Ext.Msg.OKCANCEL
};
this.callParent(cfg);
}
});
The popup appears in blank, it seems that cfg is not being passed to the parent class method!
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3deb

Figured it out.
The parameter of callParent must be an arrayLike type because internally ExtJS uses Function.prototype.apply().
So this works:
Ext.define('MyDialog', {
extend : 'Ext.window.MessageBox'
, title : 'My title'
, closable : false
, buttonText : {
ok : 'Yes'
, yes : 'Yep'
, no : 'No way'
, cancel : 'Cancel'
}
, show: function(cfg) {
cfg = {
icon: Ext.Msg.QUESTION
, msg : 'test'
, buttons : Ext.Msg.OKCANCEL
};
this.callParent([cfg]);
}
});

Ext JS 4.2 paging combo - how to skip to page

I have a Combo such as:
{
xtype : 'combo',
anchor : '70%',
id : 'companyCombo',
fieldLabel : 'Company',
name : 'COMPANY_ID',
store: companyStore,
pageSize: 25,
displayField : 'COMPANYNAME',
valueField : 'COMPANY_ID',
typeAhead : true,
queryMode : 'local',
forceSelection : true,
allowBlank : false,
editable : true
},
When using a paging Combo Box with Ajax data, I am advised to first determine (via Ajax) which 'page' the current item is on, and then set the Combo's page to that via:
pagingtoolbar.move(pageNumber)
The problem is, I'm not sure how to get a reference to pagingtoolbar for the Combo. It doesn't seem to correspond to any of the member fields of the object returned via Ext.getCmp('companyCombo')...

The toolbar is on the combo's picker, not the combo itself. Try this:
var combo = Ext.getCmp('companyCombo'),
toolbar = combo.getPicker().pagingToolbar;

data is not showing properly in slickgrid: some columns are not showing the data at startup

Im working with slickgrid to show my data on UI. I'm using dataview to set the data in the grid. The problem I'm getting is when I set the data in the data view , at start it just shows only first 3-4 columns filled with data and all other columns empty. While when I navigate to last page (rihgt now I have 3 pages in slickgrid pagination) it shows complete data, then it works fine for all the page (i.e. after going to last page , it shows data for all pages for all columns). I tried rendering grid and refreshing the dataview but its not working.
here is my code for rendering the slickgrid on page.
var data = [];
var column = [ {
id : 'fillid',
name : 'Fill ID',
field : 'fillid'
}, {
id : 'oid',
name : 'Order ID',
field : 'oid'
}, {
id : 'price',
name : 'Price',
field : 'price'
}, {
id : 'fillQTY',
name : 'Fill QTY',
field : 'fillQTY'
}, {
id : 'symbol',
name : 'symbol',
field : 'symbol'
}, {
id : 'cumQTY',
name : 'cumQTY',
field : 'cumQTY'
}, {
id : 'fillPX',
name : 'Fill PX.',
field : 'fillPX'
}, {
id : 'transactiontime',
name : 'Transaction Time',
field : 'transactiontime'
}, {
id : 'ccy',
name : 'Currency',
field : 'ccy'
}, {
id : 'venue',
name : 'Venue',
field : 'venue'
}, {
id : 'fixingdate',
name : 'Fixing Date',
field : 'fixingdate'
}, {
id : 'sendtime',
name : 'Send Time',
field : 'sendtime',
width : 110
}, {
id : 'side',
name : 'Side',
field : 'side'
}, {
id : 'orderQTY',
name : 'Order QTY',
field : 'orderQTY'
} ];
var resData;
resData = fillsDATA.data;
for (j = 0; j < resData.length; j++) {
var obj = {
id : j ,
fillid : resData[j].fillid,
oid : resData[j].oid,
price : resData[j].price,
fillQTY : resData[j].fillQTY,
symbol : resData[j].symbol,
cumQTY : resData[j].cumQTY,
fillPX : resData[j].fillPX,
transactiontime : resData[j].transactiontime,
ccy : resData[j].ccy,
venue : resData[j].venue,
fixingdate : resData[j].fixingdate,
sendtime : resData[j].sendtime,
side : resData[j].side,
orderQTY : resData[j].orderQTY
};
data[data.length] = obj;
}
var options = {
editable : true,
enableAddRow : false,
autoEdit : false,
autoHeight : true
};
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
var dataView = new Slick.Data.DataView({
groupItemMetadataProvider : groupItemMetadataProvider,
inlineFilters : true
});
var tradesGrid = new Slick.Grid(FillsGrid, dataView, column, options);
tradesGrid.registerPlugin(groupItemMetadataProvider);
var pager = new Slick.Controls.Pager(dataView, tradesGrid,
$("#tradesPager"));
dataView.onRowCountChanged.subscribe(function(e, args) {
tradesGrid.updateRowCount();
tradesGrid.render();
});
dataView.onRowsChanged.subscribe(function(e, args) {
tradesGrid.invalidateRows(args.rows);
tradesGrid.render();
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
dataView.setPagingOptions({
pageSize : 20
});
tradesGrid.render();
tradesGrid.updateRowCount();
dataView.refresh();
I'm using the grid in many other different place in my app and its working fine I don't understand where I'm going wrong here.
Any help would be highly appreciated. Thanks

Combobox store load after updating form with Model data

I noticed that there are a lot of ways to populate a form with data.
I want to do it the ExtJS4 MVC style.
However I now see something unwanted happening.
My form has a combobox tied to a store.
The store is filled after populating the form with the model data.
My view / form
Ext.define('WWT.view.settings.Form', {
extend : 'Ext.form.Panel',
alias : 'widget.settingsform',
title : 'WWT Instellingen',
bodyPadding : 5,
defaultType : 'textfield',
initComponent : function() {
var me = this;
me.dockedItems = me.buildToolbars();
me.items = me.buildItems();
me.callParent();
},
buildItems : function() {
var lovEdities = Ext.create('WWT.store.lov.Edities');
return [{
fieldLabel : 'Huidige Editie',
xtype : 'combo',
emptyText : 'Kies een Editie',
name : 'huidige_editie_id',
store : lovEdities,
queryMode : 'local',
displayField : 'naam',
valueField : 'id',
forceSelection : true
}, {fieldLabel : 'Scorebord Slogan',
name : 'scorebord_slogan_regel',
width: 200,
maxLength : 10
}, {
fieldLabel : 'Tijd Offset Scorebord',
name : 'scorebord_tijdoffset'
}];
},
buildToolbars : function() {
return [{
xtype : 'toolbar',
docked : 'top',
items : [{ xtype:'button',
text : 'Save',
iconCls : 'save-icon',
action : 'save'
}]
}];
}
});
My Controller
Ext.define('WWT.controller.settings.Settings', {
extend : 'Ext.app.Controller',
models : ['secretariaat.Settings'],
views : ['settings.Form'],
init : function() {
var me = this;
me.control({
'#settingsId button[action=save]' : {
click : me.save
},
'settingsform' : {
afterrender : function(view) {
Ext.ModelMgr
.getModel('WWT.model.secretariaat.Settings')
.load(1, {
success : function(record) {
view.loadRecord(record);
}
});
}
}
});
},
save : function() {
var form = this.container.down('form');
var model = this.getModel('settings.Settings').set(form.getForm()
.getValues());
model.save();
},
addContent : function() {
this.container.add({
id : 'settingsIDQ',
xtype : 'settingsform',
itemId : 'settingsId'
});
}
});
In my Chrome Network window, I can see that the store request is fired later.
Any thoughts on how to load the store before updating the form ?
I thought of doing it in the afterRender too, but I think that even then the order is not guaranteed.

Seemed that there was nothing wrongs with the (load) mechanism.
There was an issue in the data type of the ID field of the Combobox and the field which was part of the settings. Int vs String.
This caused the issue.

I get around the form loading issue in a few different ways.
If the store is used a lot throughout the application, I load the store early in the loading of the application by looking it up with Ext.getStore('my store name here') and then calling .load() during startup. If you want the store or stores to load only when you reach the form itself, I would hook the component's initialization in initComponent and then you can get the form's fields and with a for-loop can walk through the fields and initialize all stores with .load() before the form component accesses server data.
Here are my edits to your initComponent method. I haven't debugged this code, but it should work great for you.
initComponent() {
var me = this;
// this is where we will load all stores during init
var fields = me.getForm().getFields();
for (var i = 0; i < fields.length; i++) {
var store = fields[i].getStore();
if (store && !store.isLoaded()) {
store.load();
}
}
me.dockedItems = me.buildToolbars();
me.items = me.buildItems();
me.callParent();
},

Ext combobox select after store reload doesn't work properly

Here is my combobox configuration
{
xtype : 'combo',
fieldLabel : 'Select Field',
displayField : 'field_name',
valueField : 'field_id',
id : 'fields_combo_id',
store: new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({url:eyefind.config.DATA_RETRIEVAL, method:'GET'}),
baseParams: { subject: 'fields' },
root: 'data',
id: 'field_id',
fields: ['field_name'],
autoload: true
}),
labelStyle : 'font-weight:bold; width:100px',
triggerAction : 'all',
clearFilterOnReset : false,
mode : 'local'
}
I load the store in an external function in this way:
.....
var comboFields = Ext.getCmp('fields_combo_id');
comboFields.store.load();
comboFields.setValue(selectedFieldId);
.....
And so far selectedFieldId has been set but in the visible part I see a value instead of displayText, the store looks fine and I have the value:displayValue pair properly set there.
Do I miss something or do I have to use some other functionality for this part?
My version of Ext is 3.2.0.

You set valuefield : 'field_id', but there is no field_id in store's fields,
{
xtype : 'combo',
fieldLabel : 'Select Field',
displayField : 'field_name',
valueField : 'field_id', //This 'field_id' must be in store fields too.
id : 'fields_combo_id',
store: new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({url:eyefind.config.DATA_RETRIEVAL, method:'GET'}),
baseParams: { subject: 'fields' },
root: 'data',
id: 'field_id', //This id is just for the store, not the record data.
fields: ['field_id','field_name'], // here, i add `field_id`
autoload: true // This should be autoLoad, remember JavaScript is case sensitive.
}),
labelStyle : 'font-weight:bold; width:100px',
triggerAction : 'all',
clearFilterOnReset : false,
mode : 'local'
}
And also, why do you set autoLoad : true if you load it again in your external function?
EDIT
When I run comboFields.setValue(id);, in which my id is assign to one of the field id, it works, and I see displayfield on my combo (no need to dropdown first). But, if, in your case, your combo item has been highlighted, I guess it's because of the version. Unfortunately
I tested it in Ext 3.3.0.

Try the following code.
var selectedFieldValue = Ext.getCmp('fields_combo_id').getRawValue();
var selectedFieldId = Ext.getCmp('fields_combo_id').getValue();
comboFields.setValue(selectedFieldId,selectedFieldValue);