Dojo Enhanced Grid with JSONREST issues - dojo

I'm trying to use a enhanced grid with Dojo JSONREST and i'm running into some issues.
I've been looking up some examples but can't figure out how to do what i need.
In the code below my rest service takes two parameters, and the query on the service works.
The problem is that when grid.startup() is called it seems to call the Rest service again, since there are no parameters passed the rest service falls over. What am i doing wrong here?
Also is there any way to update to the store so that is only contains the queried results?, so that when the grid appears it just contains these values?
Appreciate any help or pointers..
ready(function(){
var grid;
var store = new JsonRest({
target: "rest/search"
});
store.query({term: "test", category: "category"},
{
start: 10,
count: 10,
}).then(function(data){
// how do i update store with queried results?
});
dataStore = new ObjectStore({ objectStore: store });
/*set up layout*/
var layout = [[
{'name': 'Name', 'field': 'col1', noresize: true, 'width': '100%'},
]];
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true
}, document.createElement('div'));
grid.startup();
}

Have you tried setting the query parameter of the grid? A link to the docs. And a link to an example.
And by looking at the code in the question, it seems that the grid should display chunks/pages of data - an example using the pagination plugin for the grid.
The filter plugin might also be of interest to you.

when you define a new grid you have to pass it to dojo:
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true
}, document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
grid.startup();

Related

Not able to add checkboxes to last column in dojo enhanced grid

I am creating the dojo Grid as below and I am using the indirectSelection plugin for creating a checkbox, as below, but by default the checkboxes will come at the first column of the grid. How do I make it to come at the last column?
var grid = new dojox.grid.EnhancedGrid({
id: 'serialsGrid',
style: 'width:auto;height:250px;',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {name:'Requested',headerSelector:true, width:"40px", styles:"text-align: center;"},
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
}, document.createElement('div'));
/*append the new grid to the div*/
//var temp=grid.domNode;
dojo.byId("serialsGridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
serialsGridCopy=grid;
grid.startup();
});
The plugin itself has no capabilities of doing so as far as I know so I started looking at the functions the EnhancedGrid itself has and stumbled upon the function moveColumn() in grid.layout.
The documentation itself (here) was not really usefull, but I used it to move every column one position ahead so that the first column would become the last one.
I also made a working JSFiddle to demonstrate which you can see here. The code that is moving the columns can be found at the bottom of the code:
for (var i = 1;i < grid.layout.cells.length;i++) {
grid.layout.moveColumn(1, 1, i, i-1, grid.layout);
}
What it does is the following: it moves every column starting from index 1, so that means all columns except the indirectSelection column one step ahead (i-1).

How to change data in combo based on other data selected in extjs 4

I am using extjs 4.0.7. I have a requirement wherein I have two combo boxes in the edit mode of a grid and I need to change the data in the second based on the value selected in the first one.
I am using MVC architecture for extjs and a java code that returns json string to populate data in the combo boxes. The code for my first combo box is:
view file:
items: [{
id: 'country',
header: 'Countries',
field: {
xtype: 'combo',
store: [
["USA","USA"],
["India","India"],
],
editable: false,
allowBlank: false,
listeners: {
select: function(combo, records, eOpts){
contactTypeGrid = combo.getValue();
myGrid.fireEvent('LoadStateOnSelect');
}
}
}
},
{
id: 'states',
header: 'Sates',
dataIndex: 'states',
field: {
xtype: 'combo',
store: 'StateStore',
valueField: 'stateDesc',
displayField: 'stateText',
}
}, ....
]
controller:
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
stateStore.load();
},
However, when I run this code, the data in the second store changes in the background but a Loading mask continues to appear in front due to which I cannot select any value.
How should I resolve the issue of connditional data load? Any help will be much appreciated.
Have you tried clearing the selected value in the combobox before reloading the store? You could try calling the clearValue() method on the combo.
I have a temporary fix for this. However, I am still looking for a solution that is more stable and workable.
Solution:
Whenever changing the data in the dependant store you could expand the combo box which loads the new data correctly.
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
statesCombo.expand(); //Here I am assuming that "statesCombo" has a
//reference to the dependant combo box.
stateStore.load();
},
This might save somebody else's time however, In case somebody finds a more viable solution, please let me know as well.
carStore- any store for main combo
carModelStore - store, the content of which should be depended on selection in the carStore
Consider more general and useful example when data is getting from server.
var carModelStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'car-model'],
root: 'rows'
}),
storeId: 'car-model-store',
proxy: new Ext.data.HttpProxy({
url: 'carmodeldataprovider.json?car-name=lamborghini'
}),
autoLoad: true
});
{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
listeners: {
select: function(combo, records, eOpts){
var carName = records.get('car-name');
var carModelStore = Ext.StoreMgr.lookup("car-model-store");
carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
carModelStore.reload();
}
}
}

Unable to bind data to XTemplate

I'm trying to display data in a Panel with this simple example with Sencha Touch 2, but it's not working :
var planetEarth = {
name: "Earth",
mass: 1.00
};
var planetInfo = new Ext.XTemplate("<h2>{name}</h2>mass: {mass}");
var profile = Ext.create('Ext.Panel', {
fullscreen: true,
xtype: 'panel',
layout: 'fit',
data : planetEarth,
tpl: planetInfo
});
Ext.Viewport.setActiveItem(profile);
Any idea why ?
Seems to work for me: http://www.senchafiddle.com/#KxGHo
[edit] To clarify, you need to wait until the document has finished loading before defining and executing any code that's used to build the user interface. Place your code in the application 'launch' method.

Extjs4 - Reloading store inside itemselector

I have an itemselecor inside a grid, and i have an combobox that should reload only the store inside the itemselector( the value fields should remain intact)
Here is the itemselector
var grid = Ext.widget('form', {
id: 'grid',
title: '',
width: 600,
bodyPadding: 10,
renderTo: 'itemselectorproduto',
items: [{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemsel',
anchor: '100%',
imagePath: '/ux/images/',
store: store,
displayField: 'Nome',
valueField: 'ID',
value: vitrine,
allowBlank: true,
msgTarget: 'side'
}]
});
I tried to call the normal store.load(), but it have no effect and it shows no error on the console
If needed i will post more of the code, but i think just this should be enough
Thanks,
Looking through the code if ItemSelector it doesn't look like it supports any changes in the store once it's been binded. It basically creates local copies of the data. And if you call bindStore method to assign different store - it will erase your selection.
You can always improve code in ItemSelector to allow such behavior. It should not be a problem. You can subscribe to datachanged or load event of the store when binding to it, and then handle situation when store data is changed.
Actually i think the best way to do such thing is using ItemSelector`s "populateFromStore". Sure except of extending item selector. In case of extending you should look on the "onBindStore" function of the ItemSelector.
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
} else {
me.store.on('load', me.populateFromStore, me);
}
}
}
So as you see in case of the empty store it hooks to the load event. And it should be like this:
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
me.store.on('load', me.populateFromStore, me);
// Add everything to the from field as soon as the Store is loaded
if (store.getCount()) {
me.populateFromStore(store);
}
}
}

Dojo datagrid won't display inside another div

I'm trying to get a Dojo datagrid working - I have replicated the first example on the documentation page (http://docs.dojocampus.org/dojox/grid/DataGrid) & it works just fine.
However, when I try to display the grid inside another div (i.e. putting 'gridContainer4' from the example inside any other div) nothing displays...
Any help would be much appreciated - can't find anything about this anywhere online!
Finally figured it out:
The example text creates the new dojox.grid.DataGrid and applies it to "document.createElement('div')" - changing this to the ID of an existing div fixed the problem (rather than appendChild-ing it to another div)
Original code:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
changes to:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, "gridContainer4");