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.
Related
I am new to Ext JS and I have tried the Example from the Ext JS docs, but I am unable to get pagination.
I have designed my application using MVC architecture.
Here is my Code:
title : 'Trade Data',
store : 'RamDataStore',
id:'tradedatagrid',
dockedItems:[{
xtype:'pagingtoolbar',
store:'TradeDataStore',
displayInfo:true,
id:'tradepage',
itemId:'tradepage',
displayMsg:'{0}-{1} of {2}',
emptyMsg:'no topics to show',
dock:'bottom'}
],
columns : [
{
xtype : 'gridcolumn',
width : 85,align : 'center',
dataIndex : 'tradeid',
text : 'TradeId'
},
{
xtype : 'gridcolumn',
width : 120,
dataIndex : 'instrumentType',
text : 'InstrumentType'
},
{
xtype : 'gridcolumn',
width : 103, align : 'center',
dataIndex : 'tradeBook',
text : 'TradingBook'
},
{
xtype : 'gridcolumn',
width : 120, align : 'center',
dataIndex : 'otherBook',
text : 'CustomerBook'
},
]
Here my paging tool bar store and my grid store are the same.
Store:
I defined my store with some default properties and I created an instance for the same store in the controller to dynamically bind.
Ext.define('Myapp.store.RamDataStore', {
extend: 'Ext.data.Store',
requires: ['MyApp.model.ram.RamDataModel'],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'tradedata',
autoLoad: false,
pageSize: 4,
model: 'MyApp.model.ram.RamDataModel',
proxy:{
writer:{
type:'json'
},
reader:{
type:'json'
},
enablePaging: true
},
sorters: [{
property: 'tradeid',
direction: 'ASC'
}]
}, cfg)]);
}
});
Model:
Ext.define('MyApp.model.ram.RamDataModel', {
extend : 'Ext.data.Model',
fields : [{
name:'tradeid',
type:'int'
}, {
name : 'tradeBook',
type : 'string'
}, {
name : 'otherBook',
type : 'string'
}, {
name : 'tradeDate',
type : 'auto'
}, {
name : 'tradedDate',
type : 'auto'
}});
Controller:
I wrote a function that will call on button clicks, and I got a JSON result from the server:
data = [{"tradeid":1,"tradingbook":"ram"},{"tradeid:2,"tradingbook":"testbook"}] //(etc)
Here is my controller code:
var datastore = Ext.create('MyApp.store.RamDataStore',{
model:'Myapp.model.ram.RamDataModel',
data:Ext.decode(result,true),
pageSize:4,
start:0,
limit:4,
enablePaging : true,
proxy:{
type:'memory',
reader:{type:'json'},
writer:{type:'json'},
},
listeners:{
beforeload:function(store,operation,eOpts){
store.proxy.data.total=Ext.decode(result,true).length;
//store.proxy.data=Ext.decode(result,true);
}
},
});
Ext.getCmp('tradedatagrid').getDockedComponent('tradepage').bind(datastore);
Ext.getCmp('tradedatagrid').getView().bindStore(datastore);
Ext.getCmp('tradedatagrid').getView().loadMask.hide();
}
});
With this code, I can add data to my grid, but can't add store to my paging tool bar.
Please help on this. If you have any examples, please suggest & I will follow.
Thanks.
You specify the store for paging toolbar as string what means that Store Manager assumes the string is storeId and tries to find the instance of it. But it cannot because the store is probably created later. Also, the store must be same for both the grid and paging toolbar.
You have two options:
declare the store in your controller: stores:['RamDataStore']
create it manually during grid initComponent where you would also create the paging toolbar and assign the store to it.
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.
I'm trying to make a combobox that dependent from other combobox with default values but into the listeners of combobox must loading data of itself . I have the problem when using this.store.loadData(todoItems) with todoItems as an array of four positions.
This's store:
var cmb_items = new Ext.data.SimpleStore({
fields : ['itemId', 'item'],
data : itemsMenu
});
I dont know why. Here is my code, can anyone lend me a hand?
{
xtype : 'combo',
store : cmb_items,
hiddenName : 'id_item',
valueField : 'id_item',
mode : 'local',
allowBlank : false,
value : nombreItem,
fieldLabel : 'items',
disabled : true,
name : 'items',
triggerAction : 'all',
emptyText : 'Seleccione un item',
editable : false,
id : "items",
anchor : '90%',
displayField : 'item',
listeners : {
select: function () {
idSistema = Ext.getCmp("sistemas").getValue();
selectedMenu = Ext.getCmp("menus").getValue();
todoItems = getItemsMenu(selectedMenu,idSistema);
//alert(todoItems)
this.store.loadData(todoItems);
idItem = this.getValue();
alert(idItem); // RETURN UNDEFINED
for(i=0;i<this.store.getCount();i++){
if(todoItems[i][0]==idItem){
nombreItem = todoItems[i][1];
outItem = todoItems[i][2];
}
}
}
}
},
Thank you!
I'm not much clear with code, but if you're looking for combo depends another means, try my example.
var countryStore = new Ext.data.SimpleStore({
fields: ['alpha2code','name'],
data: [["BE","Belgium"],["BR","Brazil"],["BG","Bulgaria"]]
});
function getState(stCode){
var data=[];
switch(stCode){
case 'BE':
data=[["BE","Belgium1"],["BR","Brazil1"],["BG","Bulgaria1"]];
break;
case 'BR':
data=[["BE","Belgium2"],["BR","Brazil2"],["BG","Bulgaria2"]];
break;
case 'BG':
data=[["BE","Belgium3"],["BR","Brazil3"],["BG","Bulgaria3"]];
break;
}
return data;
};
var statesStore = new Ext.data.SimpleStore( {
fields: ['statecode','name']
});
var stateForm = new Ext.form.ComboBox({
fieldLabel : 'Country',
id : 'countryCombo',
name : 'country',
msgTarget : 'side',
triggerAction : 'all',
lazyRender : true,
store : countryStore,
mode: 'local',
valueField : 'alpha2code',
emptyText : 'Create or Select an partment',
displayField : 'name',
editable : true,
listeners:{
'select': function(combo,value,index){
debugger;
var input = combo.getValue();
var stateCombo=Ext.getCmp('statesCombo');
//stateCombo.clearValue();
//stateCombo.store.baseParams.countryID=input;
stateCombo.store.loadData(getState(input));
}
}
});
var stateForm1 = new Ext.form.ComboBox({
fieldLabel : 'States',
id : 'statesCombo',
name : 'states',
mode: 'local',
msgTarget : 'side',
triggerAction : 'all',
lazyRender : true,
store : statesStore,
valueField : 'statecode',
emptyText : 'Create or Select an Department',
displayField : 'name',
editable : true
});
var formPanel = new Ext.form.FormPanel({
title: 'World',
labelWidth: 120,
width: 350,
padding: 10,
items:[stateForm,stateForm1]
});
formPanel.render(document.body);
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 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.