I have a problem with OpenLayers + GeoExt2: I created a FeatureStore which features (downloaded via an API) contain an id attribute. When I try to represent the features in a grid panel, all the other attributes are properly represented (name, description, etc.) but the id is somehow overridden by the OpenLayers object's id, for instance "OpenLayers_Feature_Vector_363", instead of the "original" int id.
My store is defined as follows:
areaStore = Ext.create('GeoExt.data.FeatureStore', {
layer: areaLayer,
fields: [
{type:'string', name: 'note'},
{type:'int', name: 'node' },
{type:'string', name: 'description'},
{type:'bool', name: 'enabled'},
{type:'int', name: 'id'}
],
autoLoad: false,
});
The columns that I put into my grid panel are defined as follows:
var areaColumns = [
{ dataIndex: 'id', header: 'ID', flex:1 },
{ dataIndex: 'description', flex: 1, header: 'Description' },
{ dataIndex: 'node', flex: 1, header: 'Node' },
{ dataIndex: 'enabled', flex: 1, header: 'Enabled'},
{ dataIndex: 'note', flex: 1, header: 'Note' }
]
Has anyone got the same problem when downloading features from a database via API?
Thank you!
Have you tried using
{type:'int', name: 'recordId', mapping:'id'}
and
{ dataIndex: 'recordId', header: 'ID', flex:1 },
to check whether the id is read correctly from the data?
Have you played around with idProperty config option of the store, i.e. set it to someNonExistentIdProp?
#Alexander: thank you for your answer, I tried right now with no luck, it actually seems like the id is undefined. That's odd, because all the other fields are read correctly and I'm sure the type of that field is integer.
[EDIT] Since I didn't get to find out why OpenLayers overwrites the properties' id and it happened before I could make any mapping to the original id attribute, I tried and managed to edit my GeoJSON format in order to add a recordId attribute to the features' properties and set it equal to the original id.
In other words I edited the downloaded JSON before it was parsed and added as a OpenLayers feature vector, I added the recordId attribute, then used this one instead of 'id'.
I hope my solution will help someone who is having the same problem!
Related
I am using Ext JS 3.4 and in the composite field, there are three fields, code is as below:
xtype: 'compositefield',
name: 'comboField',
fieldLabel: 'Partner with',
width: 400,
cItems:[{
xtype: 'combo',
name: 'partnerTypeCombo',
value: 'ProviderName',
mode: 'local',
store: new Ext.data.ArrayStore({
fields: ['id', 'displayValue'],
data: [
['ProviderName', 'Provider Partner Name'],
['OtherProvider', 'Other Provider Partner']
]
}),
valueField: 'id',
displayField: 'displayValue',
listeners: {
scope: this,
select: function(combo, record, index) {
var providerField = this.formPanel.getForm().findField('comboField_providerPartnerNameField');
var otherProviderField = this.formPanel.getForm().findField('comboField_otherProviderPartnerNameField');
if (combo.value == "OtherProvider") {
providerField.setVisible(false);
otherProviderField.setVisible(true);
}
else {
providerField.setVisible(true);
otherProviderField.setVisible(false);
}
}
}
}, {
xtype: 'spacer',
width: 10,
flex: 0
}, {
xtype: 'modellinkfield',
name: 'providerPartnerNameField',
modelLevelType: 'Organization',
modelType: 'Organization',
pickerReport: {
reportName: 'TMS.SupplierVendorOrgPicker',
targetLevelType: 'Organization'
}
}, {
xtype: 'textfield',
name: 'otherProviderPartnerNameField',
hidden: true
}]
By using the above code and without hiding any field, I got the below result
But My expectation is
By default third field (which is text field) should be hidden
On selecting Combobox values, the next two fields should be visible/hidden.
Like if dropdown field value is "Provider Partner Name" then only second
field (modeling field) should be visible (shown as below)
And if dropdown field value is "Other Provider Name" then only third
field (i.e text field) should be visible.
But I am unable to achieve this third objective. I am getting the following output for this (the field is getting overridden)
And I am expecting the following output.
Looks like this may be some layout issue or maybe I need to apply some CSS style to handle this. Can someone please help me to solve this issue.
Able to solve this issue by using below code :
otherProviderField.ownerCt.doLayout();
I'm trying to edit an open source program (and learn Extjs meanwhile) and I encountered a problem about models. I don't want to put code here since it is too long but I can provide if necessary.
So I got a a class which extends Ext.form.Panel and model "PartModel" assigned to it. This model has a string field called "partNumber" along with many other fields.
In this panel I want to choose a part number from a combobox from predefined values at database and assign it to "partNumber".
The problem is I want to assign value that is "displayed" in the combobox.(Not one of store fields, I'm using a custom XTemplate for it)
How can I do it?
Edit: Adding combobox code. I thought adding "dataIndex: 'partNumber'" would be sufficient to do job but this code isn't working at all. I can see Part Numbers strings from combobox but when I choose one and hit save button it doesn't save. (There are many other fields working well with that save button maybe I just need to add another button to save part number?)
{
xtype: 'combobox',
dataIndex: 'partNumber',
fieldLabel: "Part Number",
labelWidth: 150,
flex: 1,
store:{
xtype: 'store',
autoLoad: true,
model: 'PartGroupsClasses',
proxy: getPartGC()},
queryMode: 'local',
renderTo:Ext.getBody(),
tpl:Ext.create('Ext.XTemplate','<tpl for="."><div class="x-boundlist-item">{code}-{descr}-{ccode}-{cdescr}</div></tpl>'),
displayTpl:Ext.create('Ext.XTemplate','<tpl for=".">{code}{descr}{ccode}{cdescr}</tpl>')
}
Edit2: Figured out save button is basically calling following function.
Ext.override(Ext.data.Model, {
setDataWithAssociations: function(data) {
for (var i in data) {
if (this.fields.containsKey(i)) {
this.set(i, data[i]);
}
if (this.associations.containsKey(i)) {
var store = this[i]();
store.add(data[i]);
}
}
}
});
I would do something like this... in your combobox's model, add an extra field that makes use of the convert function to create your displayValue, and then in your combobox, just use that value for your displayValue property.
Model
Ext.define('MyComboModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'code',
type: 'string'
},
{
name: 'desc',
type: 'string'
},
{
name: 'ccode',
type: 'string'
},
{
name: 'cdesc',
type: 'string'
},
{
name: 'displayValue',
type: 'string',
convert: function(value, record) {
return record.get('code') +
record.get('desc') +
record.get('ccode') +
record.get('cdesc');
}
}
]
});
Combo
xtype: 'combobox',
name: 'Field2',
valueField: 'displayValue',
displayField: 'displayValue',
fieldLabel: 'Field2',
queryMode: 'local',
Full example.
I dont thing your question is clear enough for a clear answer...
I am unclear on your objective but if you want to have something display on store and behind it have the value on the file please take a look see if this examples helps
Store
this.data = Ext.create('Ext.data.JsonStore', {fields: ['id', 'data'],
data: [{id: 1, data: 'data1'},
{id: 2, data: 'data2'},
{id: 3, data: 'data3'},
{id: 4, data: 'data4'}]});
Combo
xtype:'Combobox',
name:'wtv',
displayField: 'data',
valueField: 'id'
It will display the combo with data but if you get the combo with the selection path and do for example
Selector
refs: [{
ref:Combo
selector:'Panel Combobox[name=wtv]'
}]
Later you can do something like
Panel.getCombo().getValue() and it will not
give you back the displayed field (Data) but it will give the id.
Sorry for bad formating! Hope it helps
Can u help me with rest store, please. I want my store become REST, I saw some samples where HttpProxy was used and tried to do the same, but it dosn't work.
As i noticed in samples store was always created like: var store = Ext.create...
If problem in this, then i don't know where to invoke Ext.create, and previously I always used storeId in grid and it worked well.
P.S. why grid couldn't be created without store data just with blank fields?
Here is my 'TestStore' code:
Ext.define('MVC.store.Notes', {
extend : 'Ext.data.Store',
requires : [
'MVC.model.Note'
],
storeId : 'TestStore',
model : 'MVC.model.Note',
autoLoad: true,
proxy: {
type: 'rest',
url: 'rest/notes',
reader: {
type: 'json',
rootProperty: 'data'
},
writer: {
type: 'json'
}
}
});
And Grid:
Ext.define('MVC.view.NotesGrid', {
extend: 'Ext.grid.Panel',
xtype: 'notesGrid',
title: 'Note-list',
// store: 'Notes',
store: 'TestStore',
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Creation Date',
xtype: 'datecolumn',
format: 'd-m-Y',
dataIndex: 'createDate',
flex: 1
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'd-m-Y',
dataIndex: 'modifiedDate',
flex:1
}, {
text: 'Text',
dataIndex: 'noteText',
flex: 3
}
]
});
Not answering the main question, only your side question:
When you Ext.define() a store, you define the class.
When you Ext.create() a store, you define the instance.
The class won't be able to hold any data, only an instance can.
If you add your store's class name to the stores array in your application definition in the main Application.js file, you tell your application to create one global store instance of that class.
From a store class with a fixed store Id, you can only create one instance per application; from a store class without a fixed storeId, you can create multiple instances (e.g. one per grid).
I am using Ext Js 4.1, and I need to put a comboBox in a grid cell to user choose the parameter that gonna be saved, however the available parameters coming from a store, but it does not working, I am already using editing plugin, as specified in docs, can anyone provide a insight ??
storeParameter = Ext.create('ParameterStore');
{
header: 'Parameter',
flex: 1,
sortable: true,
dataIndex: 'parameter',
field: {
type: 'textfield'
},
editor: {
xtype: 'combo',
store: storeParameter
}
},
you should define the editor parameter on the grid cell where you want it to appear. Seems like you are trying to defining the editor in the store itself.
I solved the problem. I needed to add the attribute in grid:
selType: 'cellmodel',
And instead of to put a store directly, I replaced for comboBox, which has the store.
var comboParameter = Ext.create('ComboBoxParameter');
And the column replace to:
{
header: 'Parameter',
flex: 1,
sortable: true,
dataIndex: 'parameter',
editor: comboParameter
},
i am using ext js designer with ruby on rails.
i want to delete a record from my grid and database on button click event.
can anyone help me?
thanks...
following is the code of my grid.
xtype: 'grid',
title: 'Products',
store: 'productMaster',
height: 176,
id:'mygrid',
name:'mygrid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("myform").getForm().loadRecord(rec);
}
}
}),
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
header: 'name',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
dataIndex: 'price',
header: 'price',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
dataIndex: 'category',
header: 'category',
sortable: true,
width: 100
},
and following is my code of delete button
bbar: {
xtype: 'toolbar',
height: 30,
items: [
{
xtype: 'button',
text: 'Delete',
width: 100,
height: 30,
id:'btnDelete',
handler: function() {
//alert('trying to delete the record...');
var store = Ext.getCmp("mygrid").getStore();
store.removeAt(store.getCount()-1);
}
due to this handler function the last record id deleted but it is deleted from the store not fro the database.i want the record to be deleted from the database also...
thanks...
Before we start: I noticed the configuration object for your grid has
xtype:'grid'
This, by itself, forbids any editing capability and server interactions (besides reading the store), because you are instancing an Ext.grid.GridPanel, while (I think) you need an Ext.grid.EditorGridPanel. For all of the following to run properly, you should change this line to:
xtype:'editorgrid'
First thing I would check is that the store has an id configuration attribute, and it is a configured column of the store reader. If the store cannot identify the record, it will think that the record does not exist, and will not generate a request to the server.
Second thing to check: has your store been configured to generate server requests? That is, is there a line like this in your store config object?
proxy: new Ext.data.HttpProxy({
api:{
read:'readscript.url',
create:'insertscript.url',
update:'updatescript.url',
destroy:'deletescript.url'
}
})
Next, have you defined the "writer" attribute in your store configuration object?
The store config object should have a proxy and a writer attribute to generate proper server requests upon deletion.
To specify a writer for the store you may simply write (for a common Json writer):
writer: new Ext.data.JsonWriter()
and the store will send all the appropriate write requests to the server.
Another painful (not well documented, I think) issue could be the presence of mandatory fields in the store reader. All columns are mandatory by default; to mark a column as "non-mandatory" you must specify (in the store reader column array):
{name:'column_name', allowBlank:true, /* other stuff like 'type' etc. */ }
Probably, when you add a new record to the grid, not all of the columns will be populated.
The store will not generate a server create request until all mandatory columns are populated. Then, if you delete an unsaved record, the store will not generate the destroy request because it will assume that the record "does not exist".