We Keep Coding

extjs combo box getCount() on store returns 0

I am trying to get the number of items in the combo box so that I can make the first value by default visible in the combo box using the getCount() method but I see it always return 0 so cannot get the first item to be displayed in the combo box.
Code for my combo box is as shown below:
Ext.define('something....', {
controller: 'some Controller',
initComponent: function() {
var me,
me = this;
me.items = [{
xtype: 'form',
items: [{
xtype: 'combo',
itemId: 'nameId',
name:'nameId',
labelAlign: 'top',
fieldLabel: 'Name',
store: me._getNames(),
//disabled:some condition?true:false,//doesn't gray out combo
valueField:'dataId',
displayField: 'firstName',
editable: false,
listeners:{
afterrender: function(combo,component) {
var combo = me.down('#nameId');
var nameStore = combo.getStore();
var setFirstRecord = function(combo){
var nameStore = combo.getStore();
if(nameStore.getCount() === 1){
combo.setValue(nameStore.getAt(0));
}
}
if(nameStore.isLoaded() === false){
nameStore.on('load', function(nameStore){
setFirstRecord(combo);
},this,{
single:true
});
}else{
setFirstRecord(nameStore);
}
},
}
}]
}];
}
Code for the store is as below:
_getNames: function (){
var nameStore = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'name.json',
reader: {
type: 'json',
rootProperty:'items',
transform: function (data) {
var data = {
items: [{
dataId: data[0].dataId,
firstName: data[0].name.firstName,
nameDetails: data[0].nameDetails
}]
}
return data;
}
},
},
fields: ['dataId', 'firstName','nameDetails']
});
return namesStore;
}
})
The result returned from the api to populate the store is as follows:
[
{
"dataId":1,
"name":{
"dataId":1,
"firstName":"Julie",
"code":"10",
"connectionList":[
"EMAIL"
]
},
"nameDetails":{
"EMAIL":{
"dataId":1,
"detail":"EMAIL"
}
}
}
]
Any suggestions on what's missing would be great!

I am written that example for you in Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3cdl
That solve your problem:
combo.getStore().on("load",
function (store, records, successful, operation, eOpts) {
if (store.getData().length > 0)
combo.setValue(store.getData().get(0).getData().id)
},
this
)

You must check if store is loaded or not and write appropriate code:
...
...
xtype: 'combo',
itemId: 'nameId',
name: 'nameId',
labelAlign: 'top',
fieldLabel: 'Name',
store: this._getNames(),
valueField: 'dataId',
displayField: 'firstName',
editable: false,
listeners: {
afterrender: function (combo) {
var store = combo.getStore();
var setFirstRecord = function (combo) {
var store = combo.getStore();
if (store.getCount() === 1) {
combo.setValue(store.getAt(0));
}
}
if (store.isLoaded() === false) {
store.on('load', function (store) {
setFirstRecord(combo);
}, this, {
single: true
});
} else {
setFirstRecord(combo);
}
}
}
...
...

Property grid with combobox

I have some store, which is formed data. On panel, it looks how "fieldName" and text field (in depension from invoked form).
For example, on one form is displayed "name document" and field, on another: date of selling and date field. Data is formed dynamically.
Here is store:
tableTempStore = new Ext.data.JsonStore({
url: objectUrlAddress,
baseParams: {
'objectID': objectID
},
root: 'Fields',
fields: [{
name: 'Hint'
}, {
name: 'Type',
type: 'int'
}, {
name: 'Value'
}, {
name: 'Index',
type: 'int'
}, {
name: 'IsRequired',
type: 'bool'
}, {
name: 'Identifier'
}, {
name: 'EnumList'
}, {
name: 'Directory'
}, {
name: 'Data'
}],
listeners: {
load: function (obj, records) {
Ext.each(records, function (rec) {
var item = null;
switch (rec.get('Type')) {
case 0: // целое
item = new Ext.form.NumberField();
item.id = rec.get('Identifier');
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.anchor = '100%';
item.allowBlank = !isRequired;
item.disabled = editDisabled;
item.value = rec.get('Data');
break;
case 1: // вещественное
item = new Ext.form.NumberField();
item.id = rec.get('Identifier');
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.anchor = '100%';
item.allowBlank = !isRequired;
item.allowDecimals = true;
item.disabled = editDisabled;
item.value = rec.get('Data');
break;
case 5: // SQL-справочник
var dataValues = Ext.util.JSON.decode(rec.get('EnumList'));
var dataArray = Object.keys(dataValues).map(function (k) {
return [k, dataValues[k]]
});
item = new Ext.form.ComboBox({
typeAhead: true,
width: '100%',
triggerAction: 'all',
forceSelection: true,
editable: false,
hiddenName: rec.get('Identifier'),
mode: 'local',
store: new Ext.data.ArrayStore({
fields: [{
name: 'myId',
type: 'string'
}, {
name: 'displayText'
}],
data: dataArray
}),
valueField: 'myId',
displayField: 'displayText',
disabled: editDisabled
});
item.id = '_' + rec.get('Identifier');
item.anchor = '100%';
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.allowBlank = !isRequired;
item.value = rec.get('Data');
break;
}
if (item != null) {
templateGrids.add(item);
columnsTable = item.__proto__.constructor.xtype;
var s = null;
else if (rec.get('Type') == 4) {
var dataValues = Ext.util.JSON.decode(rec.get('EnumList'));
var dataArray = Object.keys(dataValues).map(function (k) {
return [k, dataValues[k]]
});
combo = new Ext.grid.GridEditor(new Ext.form.ComboBox({
id: item.id,
allowBlank: item.allowBlank,
typeAhead: true,
lazyRender: true,
triggerAction: 'all',
forceSelection: true,
queryMode: 'local',
editable: false,
value: item.value,
hiddenName: rec.get('Identifier'),
mode: 'local',
store: new Ext.data.ArrayStore({
fields: [{
name: 'myId',
type: 'string'
}, {
name: 'displayText',
type: 'string'
}],
data: dataArray
}),
valueField: "myId",
displayField: "displayText",
disabled: editDisabled
}));
}
source[item.fieldLabel] = '';
grid.customEditors['Сохранить в'] = combo;
grid.getColumnModel().setConfig([{
header: "Поле"
}, {
header: "Значение",
dataIndex: '',
renderer: Ext.util.Format.comboRenderer(combo)
}]);
grid.setSource(source);
};
});
}
}
});
Here's my property grid:
grid = new Ext.grid.PropertyGrid({
url: objectUrlAddress,
id: 'propGrid',
autoFill: true,
autoHeight: true,
width: 200,
store: tableTempStore,
width: 600,
style: 'margin:0 auto;margin-top:10px;'
});
Problem with combo box. It show itemValue instead fieldValue on cell, and I don't know how to resolve this problem. How can I do? Thanks in advance.
For rendering I used function:
Ext.util.Format.comboRenderer = function (combo) {
return function (value) {
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
};
But it not worked.

Unable to retrieve data from jqGrid in beforeSelectRow

Im using a jqGrid:
colModel: [
{ name: 'IdTarifaAcceso', index: 'IdTarifaAcceso', hidden: true },
{ name: 'TipoTension.IdTipoTension', index: 'TipoTension.IdTipoTension' , hidden: true},
{ name: 'DsTarifaAcceso', index: 'DsTarifaAcceso', width: (pageWidth * (9.9 / 100)), stype: 'text', align: "center" },
{ name: 'TipoTension.DsTipoTension', index: 'IdTarifaAcceso', hidden: true }
],
beforeSelectRow: function (rowid, e) {
var $self = $(this),
iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
cm = $self.jqGrid("getGridParam", "colModel");
var rowData = $(this).jqGrid('getRowData', rowid);
When I want get the value of TipoTension.DsTipoTension in the beforeSelectRow section, I get the error of null reference:
var = rowData.TipoTension.IdTipoTension;
}
Any idea?
Thanks!

Is there any way to reduce the verbosity of ExtJS

ExtJS is more verbose than jQuery, it makes you write more to do something compared to jQuery. I know that we should not compare jQuery with ExtJS but as ExtJS is a most complete Javascript UI framework while jQuery is library. But after working with jQuery for quite some time it looks like our productivity get reduced when we move to ExtJS.
var panel = Ext.create('Ext.panel.Panel',{
height: 500,
width: 500,
renderTo: Ext.getBody(),
...
Can't we save some keystrokes here? Same goes for creating a textbox in form and other components.
EDIT
#Verbose Code:
function createPanel(){
var panel = Ext.create('Ext.panel.Panel',{
height: 500,
width: 500,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'tabpanel',
itemId: 'mainTabPanel',
flex: 1,
items: [{
xtype: 'panel',
title: 'Users',
id: 'usersPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
tbar: [{
xtype: 'button',
text: 'Edit',
itemId: 'editButton'
}],
items: [{
xtype: 'form',
border: 0,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Email',
allowBlank: false
}],
buttons: [{
xtype: 'button',
text: 'Save',
action: 'saveUser'
}]
}, {
xtype: 'grid',
flex: 1,
border: 0,
columns: [{
header: 'Name',
dataIndex: 'Name',
flex: 1
}, {
header: 'Email',
dataIndex: 'Email'
}],
store: Ext.create('Ext.data.Store',{
fields: ['Name', 'Email'],
data: [{
Name: 'Indian One',
Email: 'one#qinfo.com'
}, {
Name: 'American One',
Email: 'aone#info.com'
}]
})
}]
}]
},{
xtype: 'component',
itemId: 'footerComponent',
html: 'Footer Information',
extraOptions: {
option1: 'test',
option2: 'test'
},
height: 40
}]
});
}
#Compact Code
// Main global object holding
var q = {
// config object templates
t: {
layout: function(args) {
args = args || {};
var o = {};
o.type = args.type || 'vbox';
o.align = args.align || 'stretch';
return o;
},
panel: function(args) {
args = args || {};
var o = {};
o.xtype = 'panel';
o.title = args.title || null;
o.id = args.id || null;
o.height = args.height || null;
o.width = args.width || null;
o.renderTo = args.renderTo || null;
o.tbar = args.tbar || null;
o.layout = args.layout || q.t.layout();
o.items = args.items || [];
return o;
},
button: function(text, args) {
args = args || {};
var o = {};
o.xtype = 'button';
o.text = text;
o.itemId = args.itemId;
return o;
},
tabPanel: function(args) {
args = args || {};
var o = {};
o.xtype = 'tabpanel';
o.itemId = args.itemId;
o.flex = args.flex;
o.layout = args.layout;
o.tbar = args.tbar;
o.items = args.items || [];
return o;
},
form: function(args) {
args = args || {};
var o = {};
o.xtype = 'form';
o.border = args.border || 0;
o.items = args.items || [];
o.buttons = args.buttons || [];
return o;
},
grid: function(args) {
args = args || {};
var o = {};
o.xtype = 'grid';
o.flex = args.flex || 1;
o.border = args.border || 0;
o.columns = args.columns || [];
o.store = args.store || null;
return o;
},
gColumn: function(header, dataIndex, args) {
args = args || {};
var o = {};
o.header = header;
o.dataIndex = dataIndex;
o.flex = args.flex || undefined;
return o;
},
fTextBox: function(label, optional, args) {
args = args || {};
var o = {};
o.xtype = 'textfield';
o.fieldLabel = label;
o.allowBlank = optional || true;
return o;
},
component: function(args) {
args = args || {};
var o = {};
o.xtype = 'component';
o.itemId = args.itemId;
o.html = args.html;
o.extraOptions = args.extraOptions;
return o;
}
},
// Helper methods for shortening Ext.create for containers.
h: {
panel: function(args) {
return Ext.create('Ext.panel.Panel',
args);
}
}
};
function createPanel(){
var panel = q.h.panel({
height: 500,
width: 500,
renderTo: Ext.getBody(),
layout: q.t.panel(),
items: [q.t.tabPanel({
itemId: 'mainTabPanel',
items: [q.t.panel({
title: 'Users',
id: 'usersPanel',
tbar: [
q.t.button('Edit',{itemId: 'editButton'})
],
items: [
q.t.form({
items: [ q.t.fTextBox('Name') , q.t.fTextBox('Email')],
buttons: [ q.t.button('Save', {action:'saveUser'} )]
}),
q.t.grid({
columns: [ q.t.gColumn('Name','name'), q.t.gColumn('Email', 'email', {flex: null}) ],
store: Ext.create('Ext.data.Store',{
fields: ['name', 'email'],
data: [{
name: 'Indian One',
email: 'one#qinfo.com'
}, {
name: 'American One',
email: 'aone#info.com'
}]
})
})]
})]
}),
q.t.component({
itemId: 'footerComponent',
html: 'Footer Information',
extraOptions: {
option1: 'test',
option2: 'test'
},
height: 40
})
]
});
}
By going with the #Compact code, it saves about 40% in terms of number of lines for example function here which is "createPanel". I wanted everyone to come up with different ideas and creating config object was one of my first idea but I wanted it to be something which I can override so I come up with above approach.
I did benchmark both the function and per Firebug (profiling feature) non-compact version takes 178ms while compact version takes 184ms.
So yes, it is going to take some more time for sure and it looks worth from this example with 8ms more but not sure when we will build an enterprise application with this approach.
Is there any better approach?, if yes please do share.

If not really needed use xtypes:
{
xtype: 'panel',
height: 500,
width: 500,
renderTo: Ext.getBody()
}
or create yourself default configs
var panelCfg = {
height: 500,
width: 500,
renderTo: Ext.getBody()
}
and apply the with ExtApplyIf
Ext.ApplyIf({xtype:'panel'}, panelCfg);
or to get a instance
Ext.widget('panel', panelCfg);
And there are still more ways.
You will definitive need to write yourself some struct and/or helpers which encapsulates your default configurations or even directly inherit your own classes from existing ones.

In addition from what sra said, nothing stops you from creating a few short-hand methods.
Using simple generating functions with extending/mixing configs helps quite a lot.

Row editing does not seem to update the underlying store

continuing with my app whose aim is to be able to edit an aggregated field and store the result of a computation on the various components of that aggregate in another field...
I am now able to properly retrieve my fields using an extension of the UserStory model, but I still cannot save my changes.
I am trying to check what's done in Ext.grid.plugin.RowEditing's edit event, and I notice that when I reach it, e.store.data.items[rowIdx].data contains all my expected values, its dirty and editing flags are false, but e.store.data.items[rowIdx].raw does NOT reflect that (it contains the Rally's original values, unmodified) - even if I try to edit the value in raw, it does not work:
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
listeners: {
'edit': function (editor, e) {
e.store.data.items[e.rowIdx].raw.BusinessValues =
e.store.data.items[e.rowIdx].data.BusinessValues;
e.store.commitChanges();
}
}
})
]
Whole code follows, but I'm wondering if I should add a listener at model level instead?
Rally.onReady(function() {
Ext.define('BVApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: function(model) {
var weights = new Array(5, 3, 1, 3, 4, 4, 2, 2);
var BvTitles = new Array("Customers Impact", "Critical Path", "Usability", "Functionality", "Security", "Performance", "Integration", "Integrity", "Business Value");
//var BvTitlesFrench = new Array("Parc Client", "Chemin Critique", "Ergonomie", "Fonctionnalité", "Sécurité", "Performance", "Intégration", "Intégrité", "Valeur Métier");
// Thanks to question http://stackoverflow.com/questions/12517383/sdk2-links-in-rally-grids-and-column-width I can now remove flex from FormattedID column...
var fixedIDwithLink = Rally.ui.grid.FieldColumnFactory.getColumnConfigFromField( model.getField( 'FormattedID' ) );
fixedIDwithLink.flex = false;
fixedIDwithLink.width = 70;
function getOneBV( record, pos, newValue ) {
var ls_BvFieldStart, ls_BvFieldEnd, ls_BvFromBvField;
if ( pos < 1 ) return newValue; // ERROR in fact...
if ( pos > 8 ) return newValue;
ls_BvFieldStart = record.data.BusinessValues.substring( 0, pos-1 );
ls_BvFromBvField = record.data.BusinessValues.substring( pos-1, pos );
ls_BvFieldEnd = record.data.BusinessValues.substring( pos, 8 );
if ( newValue ) {
ls_BvFromBvField = newValue;
record.data.BusinessValues = ls_BvFieldStart + ls_BvFromBvField + ls_BvFieldEnd;
}
return ls_BvFromBvField;
}
function getbv( as_bvHolder ) {
var li_bv1, li_bv2, li_bv3, li_bv4, li_bv5, li_bv6, li_bv7, li_bv8, li_bvtotal;
li_bv1 = as_bvHolder.substring( 0,1 );
li_bv2 = as_bvHolder.substring( 1,2 );
li_bv3 = as_bvHolder.substring( 2,3 );
li_bv4 = as_bvHolder.substring( 3,4 );
li_bv5 = as_bvHolder.substring( 4,5 );
li_bv6 = as_bvHolder.substring( 5,6 );
li_bv7 = as_bvHolder.substring( 7,8 );
li_bv8 = as_bvHolder.substring( 8,9 );
li_bvtotal =
li_bv1*weights[0] +
li_bv2*weights[1] +
li_bv3*weights[2] +
li_bv4*weights[3] +
li_bv5*weights[4] +
li_bv6*weights[5] +
li_bv7*weights[6] +
li_bv8*weights[7];
return li_bvtotal;
}
this.grid = this.add({
xtype: 'rallygrid',
model: Ext.define('BVModel', {
extend: model,
alias : 'BVModel',
fields: [
{name: 'Bv1', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 1, v ); }
},
{name: 'Bv2', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 2, v ); }
},
{name: 'Bv3', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 3, v ); }
},
{name: 'Bv4', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 4, v ); }
},
{name: 'Bv5', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 5, v ); }
},
{name: 'Bv6', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 6, v ); }
},
{name: 'Bv7', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 7, v ); }
},
{name: 'Bv8', type: 'string', persist: false,
convert: function(v, record){ return getOneBV( record, 8, v ); }
},
{name: 'BvTotal', type: 'string', persist: false,
convert: function( v, record ) {
var ls_scoreInfo = '';
if ( record.data.BusinessValues ) {
ls_scoreInfo = getbv( record.data.BusinessValues ) + ' ';
}
if ( record.data.Score ) {
ls_scoreInfo += '(previous: ' + record.data.Score + ')';
}
return ls_scoreInfo;
}
}
]
}),
storeConfig: {
pageSize: 30, autoLoad: true, filters: [
{
property: 'ScheduleState',
operator: '=',
value: 'Backlog'
}
//,{ property: 'FormattedID', value: 'US85792' } // US85792, US84529, US81387, US77032
],
context: this.getContext().getDataContext()
},
columnCfgs: [
fixedIDwithLink, // might want to add a select listener later to display details in a child pane ?
'Name',
'BusinessValues',
'AffectedCustomers',
{
text: BvTitles[0], dataIndex: 'Bv1', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[1], dataIndex: 'Bv2', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[2], dataIndex: 'Bv3', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[3], dataIndex: 'Bv4', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[4], dataIndex: 'Bv5', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[5], dataIndex: 'Bv6', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[6], dataIndex: 'Bv7', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[7], dataIndex: 'Bv8', editor: { xtype: 'textfield' }, width: 70
},
{
text: BvTitles[8], dataIndex: 'BvTotal', editor: { xtype: 'textfield' }
}
],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
listeners: {
'edit': function (editor, e) {
e.store.data.items[e.rowIdx].raw.BusinessValues = e.store.data.items[e.rowIdx].data.BusinessValues;
e.store.commitChanges();
}
}
})
]
});
}, // end of getModel success
scope: this
});
}
});
Rally.launchApp('BVApp', {
name: 'Business Values App'
});
});

My suggestion would be to use the get & set functions of the record object to retrieve and change the data instead of digging into the "data" or "raw" fields. This way, the Ext library can manage the changes better to update the store/records properly.
So, when you want to get the value of the "BusinessValues" field, use record.get('BusinessValues'). Likewise, try record.set('BusinessValues', newValue) to set the new value in the getOneBV function. In doing this, you might be able to comment out the RowEditing plugin you added.