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);
}
}
}
...
...
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 dynamicly
Here is store:
tableTempStore = new Ext.data.JsonStore({
url: objectUrlAddress,
baseParams: {
'objectID': objectID
},
root: 'Fields',
fields: [{
name: 'Type',
type: 'int'
}, {
name: 'Value'
}, {
name: 'IsRequired',
type: 'bool'
}, {
name: 'Identifier'
}, {
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;
}
if (item != null) {
templateGrids.add(item);
columnsTable = item.__proto__.constructor.xtype;
source[item.fieldLabel] = '';
var s = null;
if (columnsTable == 'textfield')
{
s = 'textfield';
colm = {
xtype: s,
id: item.id,
allowBlank: item.allowBlank,
format: item.format,
value: item.value,
editable: true,
emptyText: item.emptyText,
disabled: item.disabled
};
}
else if (columnsTable == 'combo')
{
s = 'combo';
colm = {
xtype: s,
id: item.id,
allowBlank: item.allowBlank,
format: item.format,
value: item.value,
editable: true,
emptyText: item.emptyText,
disabled: item.disabled
};
}
else if (columnsTable == 'datefield')
{
s = 'datefield';
colm = {
xtype: s,
id: item.id,
allowBlank: item.allowBlank,
format: item.format,
value: item.value,
editable: true,
emptyText: item.emptyText,
disabled: item.disabled
};
}
});
for (var i = 0; i < templateGrids.getStore().data.length; i++) {
templateGrids.getColumnModel().setConfig([
{header: 'Name', id:'name', width:200},
{header:'Value', id:'val', dataIndex: rec.get('Value'), editable:true, width:200, editor: colm}]);
};
}
}
});
This code had worked in a form, but I need to use Grid (or Editor Grid). I know, how displayed field name ("document name" and etc.), but I don't understand, how displayed text field or etc. I try use loop, but on second column in xtype displayed last type in store. How i can resolve this problem?!
Here is a grid:
var templateGrids = new Ext.grid.EditorGridPanel({
id: 'tableId',
height:300,
width: '100%',
clicksToEdit:1,
frame: true,
store: tableTempStore,
columns: [
{header: 'Name'},
{header: 'Value'}]
});
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!
Im having a problem displaying dynamically created fields on extjs 4 using mozilla firefox. It works fine with chrome but when I try to open it on firefox, it's not working anymore. Here is my code:
var strParam = record.data.ReportParameter.split(",");
for (var i = 0; i < strParam.length; i++) {
if (strParam[i] != '') {
if (strParam[i].indexOf('.') != -1) {
var tbl = strParam[i].substring(0, strParam[i].indexOf('.'));
var fdstr = Ext.String.trim(strParam[i].substring(strParam[i].indexOf('.') + 1));
var fd, fdesc;
if (fdstr.indexOf(':') != -1) {
fd = fdstr.substring(0, fdstr.indexOf(':'));
fdesc = fdstr.substring(fdstr.indexOf(':') + 1);
} else {
fd = fdstr;
fdesc = fdstr;
}
var report_store_lookup = new Ext.data.Store({
fields: ['id', 'desc'],
proxy: {
type: 'ajax',
api: {
read: './reportlookupList'
},
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: false
});
report_store_lookup.load({
params: {
tablename: tbl,
fieldid: fd,
fielddesc: fdesc
}
});
var tf = Ext.create('Ext.form.field.ComboBox', {
name: fd,
allowBlank: false,
store: report_store_lookup,
labelWidth: '60',
queryMode: 'local',
valueField: 'id',
displayField: 'desc',
fieldLabel: fd
});
} else {
var tf = Ext.create('Ext.form.field.Text', {
name: strParam[i],
allowBlank: false,
labelWidth: '60',
fieldLabel: strParam[i]
});
}
cntnr.add(tf);
}
}
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.