I have a combobox gets the list of values from serverside. When I add a new
value in db ,it will reflect at the last index of the combobox.My requirement is
for a given value I want to change the index to zero.
For example if I added x and y as new values , now I want to change the
index of x to zero.
My combobox code:
{
xtype : 'combo',
//typeAhead : true,
triggerAction : 'all',
name : 'agreementTypeCombo',
id : 'agreementTypeCombo',
//hiddenName : 'agreementTypeCombo',
editable : false,
mode : 'local',
store : new Ext.data.JsonStore({
fields : [{
name : 'id',
mapping : 'id'
}, {
name : 'label',
mapping : 'label'
}
],
idProperty : 'id',
data : MD_updateOpportunityMasterDataVO.agreementTypeList
}),
valueField : 'id',
displayField : 'label',
//emptyText : CONST_NOT_AVAILABLE,
fieldLabel : 'Agreement Type',
labelStyle: 'font-weight:bold;',
helpText : getFieldTip(MODULE_NAME,CATEGORY_SALES_SUMMARY,'Agreement Type'),
//allowBlank : false,
anchor : '95%',
value : opportunityVO.agreementTypeId
}
If you add it locally use
store.insert(0, newItem);
If you add it on server and then reload then the server must return the combo store records in the required order.
Related
I am developing an application using ExtJs, one of the features is to edit a record already saved. There is a grid where I select the line that I want to edit, and a panel appears with the information to be edited. But one of the attributes that can be edited is another object of my system, called a configuration, and this configuration has an id, which is loaded when you edit the registry. The problem is that when I click on the icon of the grid that lets you edit, the first time the id is retrieved, the second the id does not appear anymore, and the third time displays the following error:'
Uncaught TypeError: Cannot read property 'id' of undefined Grid.js:36
Ext.define.columns.items.handler Grid.js:36
Ext.define.processEvent
Ext.define.processEvent Table.js:755
fire ext-debug.js:8583
Ext.define.continueFireEvent Observable.js:352
Ext.define.fireEvent Observable.js:323
Ext.override.fireEvent EventBus.js:22
Ext.define.processItemEvent Table.js:844
Ext.define.processUIEvent View.js:475
Ext.define.handleEvent View.js:404
(anonymous function)
Ext.apply.createListenerWrap.wrap
My code is (when I click edit icon):
icon : Webapp.icon('editar.png'),
tooltip : 'Editar',
handler: function(view, rowIndex, colIndex, item, e) {
var record = Ext.getStore('EstacaoStore').getAt(rowIndex);
var form = Ext.create('PanelNovaEstacao');
record.set('modoIgnorar', record.data.modoIgnorar);
record.set('latitude', record.data.latitude);
record.set('longitude', record.data.longitude);
record.set('reiniciar', record.data.reiniciar);
record.set('configuracaoCombo', record.data.configuracao.id);
record.set('ativar', record.data.ativar);
record.set('tipoColetor', record.data.tipoColetor);
form.loadRecord(record);
Ext.create('Ext.window.Window', {
title : 'Cadastro',
layout : 'fit',
modal : true,
width : 500,
height : 350,
items : [ form ]
}).show();
And 'PanelNovaEstacao' code is:
Ext.define('PanelNovaEstacao', {
extend : 'Ext.form.Panel',
title : 'Painel',
initComponent : function() {
var combo = Ext.create('ComboBoxConfiguration', {
name : 'configuracao'
});
Ext.apply(this, {
bodyPadding : '10 0 0 10',
items : [ {
xtype : 'hiddenfield',
name : 'id'
}, {
xtype : 'hiddenfield',
name : 'numeroSerieAntigo'
}, {
xtype : 'numberfield',
fieldLabel : 'Número de série',
name : 'numeroSerie',
minValue : 0,
allowBlank : false
}, combo
{
xtype: 'numberfield',
fieldLabel: 'Latitude',
name: 'latitude'
}, {
xtype: 'numberfield',
fieldLabel: 'Longitude',
name: 'longitude'
},{
xtype: 'radiogroup',
fieldLabel : 'Estado',
items : [ {
boxLabel : 'Ativo',
inputValue : true,
checked: true,
name : 'ativar'
}, {
boxLabel : 'Inativo',
inputValue : false,
name : 'ativar'
} ]
}, {
xtype : 'checkbox',
fieldLabel : 'Modo ignorar',
name : 'modoIgnorar'
}, {
xtype : 'checkbox',
fieldLabel : 'Reiniciar',
name : 'reiniciar'
}, {
xtype : 'button',
text : 'Salvar',
textAlign : 'center',
action : 'salvar'
} ]
});
this.callParent(arguments);
}
});
ComBoxConfiguration code:
Ext.define('ComboBoxConfiguration', {
extend : 'Ext.form.ComboBox',
store : 'ConfiguracaoStore',
fieldLabel : 'Configurações',
displayField : 'id'
});
Anyone know what might be happening ??
Thanks!
This line is likely causing the issue: record.set('configuracaoCombo', record.data.configuracao.id);
The data that is coming back from the proxy does not have a configuracao property, so accessing it evaluates to undefined, at which point trying to access the sub-property id will lead to the error you are seeing.
Take a look at the data in the EstacaoStore and what's being returned by the store's proxy (or however you load it). You'll likely find a problem there.
When I click in line and run the code:
var record = Ext.getStore('EstacaoStore').getAt(rowIndex);
console.log(record);
The object that return is: (configuracao is synonymous to configuracaoEstacao)
I am using superboxselect for one of my projects. I need to perform some additional filtering. Therefore i need to be able to do it in the keyup event.
But i can not get it to work.
var test = new Ext.ux.form.SuperBoxSelect( {
applyTo : 'testId',
id : 'test',
allowBlank : true,
msgTarget : 'title',
xtype : 'superboxselect',
resizable : true,
hiddenName : 'statesHidden[]',
width : 300,
store : somestore,
mode : 'local',
displayField : 'name',
valueField : 'code',
classField : 'cls',
styleField : 'style',
extraItemCls : 'x-flag',
extraItemStyle : 'border-width:2px',
stackItems : true,
listeners : {'keyup' : testFunction}
});
function testFunction(){
alert("hola");
}
set enableKeyEvents property as true.
enableKeyEvents: true
I create a panel that must show the data of a store but it shows nothing.
This is my panel:
pnl = new Ext.form.FormPanel({
id : 'profile',
renderTo : 'itemselector',
items:[{
xtype : 'itemselector',
name : 'itemselector',
fieldLabel : 'Gestion des groupes:',
imagePath : 'ext/examples/multiselect/images/',
multiselects: [{
width : 275,
height : 220,
store : store1,
displayField: 'text'
},{
width : 275,
height : 220,
store : [['10','Ten']]
}]
}],
});
and this is my store:
store1 = new Ext.data.GroupingStore({
id : 'StoreGroupe'
,url : 'st1.php'
,reader : new Ext.data.JsonReader({
root : 'data',
totalProperty : 'rows',
id : 'ReaderGroupes',
fields : [{name:'Gname'}]
})
});
It works only when I use a static store like this:
store1 = new Ext.data.ArrayStore({
data : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],['6', 'Six']],
fields : ['value','text']
});
The FormPanel is configured to display the "text" field as a multiselect. However, the JsonReader in the GroupingStore does not include a "text" field. The ArrayStore works because a "text" field is defined for the store.
Define a "text" field for the JsonReader and make sure that the server returns a "text" field and it should work.
I have this code:
var comboStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '../cxf/rest/CustomerService/getGroups'
}),
reader : new Ext.data.JsonReader({
fields : [ 'id', 'name' ]
}),
autoLoad : true
});
and
var groupsCombo = new Ext.form.ComboBox({
name : 'GroupsCombo',
fieldLabel : 'Groups',
mode : 'local',
store : comboStore,
displayField : 'name',
triggerAction : 'all',
valueField : 'groupID',
selectOnFocus:true,
width : 130
});
When the page is loaded the values are populated successfully in the combo box.
However, when I'm trying to select a value from the combo, the first value is always selected. I'm not talking programatically here, but even on the browser the first value would be selected.
Thanks
Sorry :S I don't know how I didn't notice this, but the the id in Json data store should be groupID istead of 'id'.. I changed this and it's working now.
Have you tried just using a JsonStore? Try doing something like this:
var comboStore = new Ext.data.JsonStore({
id: 'JsonStore',
idProperty: 'id',
autoLoad: true,
idProperty: 'id',
root: <root of your JSON>,
fields: [ 'id', 'name' ],
proxy: new Ext.data.ScriptTagProxy({
api: {
read: '../cxf/rest/CustomerService/getGroups',
}
})
});
Then use that is the Store for the ComboBox. A JsonStore automatically creates a JsonReader, which I think is where the conflict in your code is.
hi i have grid with store and i add record dynamically to the store for most times the data being added to the store gets reflected on the grid but sometimes the record dont seem to get reflected on the grid..please help me solve this problem
var entityGrid = new Ext.grid.EditorGridPanel({
ddGroup : 'gridDDGroup',
layout : 'fit',
store : gridStore,
closable : true,
enableDragDrop : true,
enableColumnMove : false,
enableColumnResize: true,
columnLines : true,
stripeRows : true,
colModel : new Ext.grid.ColumnModel({
columns:cols
}),
expandable : true,
autoExpandColumn : 'name',
tbar : gridToolBar,
view : new Ext.grid.GridView({
enableRowBody : true,
ignoreAdd : true,
deferEmptyText: false,
emptyText : 'No Record found.',
getRowClass : function(record, rowIndex, rp, ds){}
}),
id : id,
selModel : new Ext.grid.RowSelectionModel({
singleSelect : true
})
var store =new Ext.data.JsonStore({
fields : [
{
name : 'name',
mapping : 'name'
}, {
name : 'displayName',
mapping : 'displayName'
}
],
root : masterData.
})
I am not sure it makes a difference but this code always worked for me:
var r = new store.recordType({ field1: '1', field2: '2' });
r.commit();
store.add(r);
store.commitChanges();
grid.store.sort('field1', 'ASC');
Try adding commitChanges() and refreshing.
I'm not sure if you're still plagued by this problem, but I found the code at:
http://www.sencha.com/forum/showthread.php?141982-commitChanges-and-rejectChanges-for-the-Store-in-ExtJS-4
to be very useful as things changed moving to EXTJS-4. Which version of EXTJS are you using? Since you're using an EditorGridPanel, I'm guessing it's ExtJS 3. If you'd like, I can contribute a code fragment that uses the above architecture successfully to update a record on a grid.