I have a grid panel with JSON store, if I give alert (myGrid.model.prototype.fields.keys), it is showing all fields name ending with id, for example if I have two fields a1, a2, in alert it is showing as ('a1','a2','id'). I don't know how this Id is getting appended to the fields. If I do the same in extjs4.0.2, it's working fine, but with extjs 4.1.0 it's showing this problem.
Sample code is:
tbar : [{
text : 'Save',
height : 20,
handler : function(){
var gridColumnIds = component.gridStore1.model.prototype.fields.keys;
// alert(grid1.columns[0].dataIndex)
// console.log(gridColumnIds);
alert("grid ids :"+gridColumnIds);
var gridData = Ext.encode(Ext.pluck(component.gridStore1.data.items,'data'));
alert("grid data is :"+gridData);
}
},{
text : 'Get Record',
height : 20,
handler : function(){
p1.show();
}
}]
Probably it's caused because you used Model with default idProperty value (idProperty == 'id' by default). Try change this property http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-cfg-idProperty.
Related
I am working on dojo enhanced grid view. I am able to display the grid in UI. But AnyColumn option is added as new column.
Example:
Any help will be appreciated...
Here is the Code
var mygrid = new EnhancedGrid({
id: "grid",
store: gridStore, //Data store passed as input
structure: gridStructure, //Column structure passed as input
autoHeight: true,
autoWidth: true,
initialWidth: width,
canSort : true,
plugins: {
filter: {
//Filter operation
isServerSide: true,
disabledConditions : {"anycolumn" : ["equal","less","lessEqual","larger","largerEqual","contains","startsWith","endsWith","equalTo","notContains","notEqualTo","notStartsWith","notEndsWith"]},
setupFilterQuery: function(commands, request){
if(commands.filter && commands.enable){
//filter operation
}
}
}
}, dojo.byId("mydatagrid"));
mygrid.startup();
Thanks,
Lishanth
First, do not use EnhancedGrid, instead use either dgrid or gridx.
I think by default anycolumn is added to the dropdown. If you want to remove then, I would suggest to
Register for click event on the filter definition
Iterate through the drop-down and remove the first entry which is anyColumn
or you can also try something like
dojo.forEach(this.yourgrid.pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
dropdownbox._colSelect.removeOption(dropdownbox.options[0]);
});
Updated answer is. I know this is not the elegant way of doing it but it works.
//reason why I'm showing the dialog is that _cboxes of the filter are empty initially.
dijit.byId('grid').plugin('filter').filterDefDialog.showDialog();
dojo.forEach(dijit.byId('grid').pluginMgr.getPlugin('filter').filterDefDialog._cboxes, function(dropdownbox) {
var theSelect = dropdownbox._colSelect;
theSelect.removeOption(theSelect.options[0]);
});
//Closing the dialog after removing Any Column
dijit.byId('grid').plugin('filter').filterDefDialog.closeDialog();
I am using OnDemandGrid with JSONrest store in my application.For the first time,the grid is loading fine , if i search again for other data,the data already in the Grid is getting overlapped with new data.Can someone tell me how to reset or refresh the OnDemandGrid?
Here is my code,
function (request, Memory, OnDemandGrid,JsonRest) {
var jsonstore = new JsonRest({target: url,idProperty: "srno"});
grid = new OnDemandGrid({
store: jsonstore,
columns: Layout,
minRowsPerPage : 40,
maxRowsPerPage : 40,
keepScrollPosition : true,
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, "grid");
grid.startup();
});
Here's an Example taken from http://forums.arcgis.com/threads/39150-dojox.grid.DataGrid-how-to-clear-results
var newStore = new dojo.data.ItemFileReadStore({data: { identifier: "", items: []}});
var grid = dijit.byId("grid");
grid.setStore(newStore);
}
to clear the Results of a Grid.
We use an similar case to delete our used ItemFileReadStore:
var emptyStore = clearStore();
dijit.byId("selectGemarkung").store = emptyStore;
Hope this helps.
UPDATE 1:
Look at this : delete item from a dojo.store.jsonrest
I think jsonstore.remove() will do it.
Regards, Miriam
Collection data should be set to null; else refresh() wont work. Also collection data should not be assigned blank store object dojo.data.ItemFileReadStore.
grid.collection.setData("");
grid.refresh();
Since we are removing collection from OnDemandGrid internal dstore errors will be logged in console for below js files.
dstore/Trackable.js,
dstore/Memory.js,
dstore/Promised.js
I am using OnDemandGrid virtuall scrolling with JSONRest store.
require([
"dojo/request",
"dojo/store/Memory",
"dgrid/OnDemandGrid",
"dojo/store/JsonRest"
], function (request, Memory, OnDemandGrid,JsonRest) {
var jsonstore = new JsonRest({target: url , idProperty: "id"});
// Create an instance of OnDemandGrid referencing the store
var grid = new OnDemandGrid({
store: jsonstore,
columns: Layout,
minRowsPerPage : 40,
maxRowsPerPage : 40,
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, "grid");
grid.startup();
});
I dont know how to get the rowIndex of the cell.
Can someone tell me how to find the row index?
You may find what you're looking for by using Selection mixin provided by dGrid. Using Selection, you can define your grid like this:
grid = new (declare([OnDemandGrid, Selection]))({
store: Observable(Memory({ // replace with your store of choice
idProperty: 'id'
})),
columns: { /* your columns layout */ },
noDataMessage: 'No results found.',
loadingMessage: 'Loading data...'
});
grid.startup();
In your columns object, you can define a column that uses a function called renderCell that looks like this:
renderCell: function (object, value, node, options) {
// Object is the row; i.e., object's properties are the column names
// value is the value for this cell
// node is the DOM node of this cell
// Not sure what 'options' refers to
}
When a row is selected, you can retrieve the row by using the grid.selection property, which is an object that contains key/value pairs where the the ID's (based on idProperty) are the keys. The value for each key contains a boolean that indicates whether or not that particular row is selected. So, to get each selected row, you could do something like:
for (selectedId in selection) {
if (selection.hasOwnProperty(selectedId) && selection[selectedId] === true) {
var selectedRow = grid.row(selection[selectedId];
... // and so on...
}
}
None of this specifically gives you the row index, but you may be able to figure it out from here using your browser's Development Tools (e.g., Firebug for Firefox, etc).
I am trying to dynamically add list(with its items) to my container.
Instead of simple HTML template, I need list items to contain panel with a title bar, image & few more things.
To do this I am loading store data and within its callback creating List & array of items. Then I add items to the list and list to the container but end result is just last panel visible instead of sliding list of all panels.
Here is my code:
var vLists = [];
this.load({
callback: function(records, operation, success) {
var hccontainer = Ext.getCmp('hccontainer');
this.each(function(record){
var sid = 'styleStore'+record.get('id');
var styleTemplate = eval('tpls.styleTemplate_' + record.get('id'));
vLists.push({
xtype: 'panel',
scrollable: 'false',
layout: 'fit',
cid : record.get('id'),
ctype : record.get('type'),
cname : record.get('name'),
stid : sid,
tp : styleTemplate,
items: [
{
xtype : 'titlebar',
title : record.get('name'),
docked : 'top',
cls : 'x-toolbar-transparent-top'
},
{
xtype : 'image',
src : record.get('image'),
}
]
});
});
//hccontainer.remove(Ext.getCmp('hc'), true);
Ext.getCmp('hc').destroy();
var hc1 = Ext.create('Ext.dataview.List', {
layout : 'fit',
config: {
direction: 'horizontal',
id : 'hc'
}
});
hc1.setItems(vLists);
Ext.getCmp('hccontainer').add(hc1);
},
scope: this
});
Is this right way to add items or I am missing something.
PS Instead of List if I use Carousel, this works fine
Carousel is more of a layout component than List is. It doesn't look like you need to use a list, I don't see any handler for item taps for example. If you want to avoid using templates than you should not use a List. Instead just make a component with a list-like layout. I would use a container with a vbox layout, scretched horizontally and with a static height. You can then put whatever item configuration you want into this.
I have a backend that returns some JSON data that is used by my datastore through an ajax proxy. The data is then displayed in a dataview. What I need to do is perform some transformation on the received data on client side before it is displayed by the dataview.
I tried various approaches and settled on attaching a handler to the datastore's load event:
Ext.getStore('MyStore').on('load', function (store, records, successful, operation, eOpts) {
for (var i = 0; i < records.length; i++) {
var e = records[i];
e.data.myField = "constantPrefix" + e.data.myField;
}
});
The handler fires and records are changed correctly.
Problem is, the dataview still shows unchanged data. Is the whole approach correct? If so, why's it not working; if not - how would you achieve that?
Below is the dataview code:
Ext.define('MyProject.view.MyDataView', {
extend : 'Ext.DataView',
xtype : 'my-dataview',
config : {
store : 'MyStore',
baseCls : Ext.os.deviceType === 'Phone' ? 'my-dataview-phone' : 'my-dataview-tablet',
mode: 'MULTI',
allowDeselect: true,
selectedCls: 'tick-visible',
triggerEvent: 'itemdoubletap',
itemTpl : [
'<img class="my-photo my-dataview-photo" src="',
'{myField}"></img>'
].join('')
}
});
instead
e.data.myField = "constantPrefix" + e.data.myField;
use
var value = "constantPrefix" + e.get('myField');
e.set('myField', value);
model.set() is responsible to trigger necessary events, which the dataview does catch.
cheers, Oleg
You just need to inform the store listeners about the modified fields. Try:
Ext.getStore('MyStore').afterEdit(e, ['myField']);
This has the advantage, that the dataview or grid will now show the fields as modified (with these red triangles in the field).