How to update enhanced grid with new data - dojox.grid.datagrid

I have an enhnaced grid connected to a JSONRest and i have it populating after the grid starts up.
I'm confused as to how to update the Grid store when a new query is performed, can anyone help ?
var store = new JsonRest({
target: "rest/search"
});
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,
plugins: {
pagination: {
pageSizes: ["10", "25", "50"],
description: true,
pageStepper: true,
maxPageStep: 4,
defaultPageSize: 5,
sizeSwitch: true,
position: 'bottom'
}
}
}, document.createElement('div'));
grid.setQuery({
term: "term",
category: "category"
});
grid.startup();
Doing a store.query does hit my back end, but how do i repopulate the Grid with the results?
store.query({term: "newterm", category: "newcategory"},
{
start: 10,
count: 10,
}).then(function(data){
});

In order to populate the grid, you shouldn't be performing a store query directly - you should be instructing the grid to use the store, and it will query it itself.
You already appear to be assigning the store instance in your call to the DataGrid constructor, and you're properly wrapping it with dojo/data/ObjectStore (since dojox grid doesn't support dojo/store), so it's not clear to me why you are even attempting to perform a query beyond that. You should see a network request to your service as soon as you call grid.startup().
If you're seeing a network request being made when you create the grid but you're not seeing results in the grid, chances are your service does not actually follow the conventions that dojo/store/JsonRest expects. See http://dojotoolkit.org/reference-guide/1.9/quickstart/rest.html for information on what is expected in requests and responses.
If you're actually asking how to tell the grid to use a different store at some point in the future, call grid.setStore(newstore).

Related

how to make simple paging extjs4

Good day everyone, I'm new user to Extjs 4. Right now, I have a problem in creating a simple paging (a test run just to familiarized on this). Please take a look at the example below.
//creating a store data first
var itemsPerPage = 2;
var productivity = Ext.create('Ext.data.Store',{
fields : ['name','aht','numberOfCalls'],
pageSize: itemsPerPage,
autoLoad: true,
data:{'items':[
{name: 'Magelyn Cunanan', aht:'6:00', numberOfCalls:'50'},
{name:'Martin Dejaresco', aht:'7:30', numberOfCalls:'40'},
{name:'Emerson Dela Pena', aht:'8:00', numberOfCalls:'45'}
]},
proxy: {
type: 'ajax',
url: 'pagingstore.js',
reader: {
type: 'json',
root: 'items',
totalProperty:'total'
}
}
});
productivity.load({
params:{
start:0,
limit: itemsPerPage
}
});
then on my paging,
//... some code here. by the way this is a viewport container
region: 'center',
xtype: 'tabpanel',
autoScroll: true,
activeTab: 2,
items: [{
title: 'Agent\'s Productivity',
xtype: 'gridpanel',
store: productivity,
//for flex, indicates the amount of space this component will take up in its parent container. eg. if 1 this will take 100% of the container
columns: [
{text: 'Agent name',dataIndex: 'name', flex: 1},
{text: 'Handling Time',dataIndex:'aht',flex:1},
{text: 'Number of calls' ,dataIndex: 'numberOfCalls',flex:1}
],
dockedItems:[{
xtype: 'pagingtoolbar',
store: productivity,
dock: 'bottom',
displayInfo: true
}],
all of these codes that I mentioned earlier are inside in app.js. The problem is when I run the program. The data that I stored doesn't appeared on the grid. It shows only no results plus 0 displays on the dockedItems.. I'm using this just to familiarize on how the extjs works and I need to use this extjs for my programming project in the future.
your answer and explanations to your answer is highly appreciated :)
thank you
What is apparent from your code:
you use inline data plus ajax proxy. These two are mutually exclusive - you either want some inline data or you want to pull data from a server via ajax.
proxy url points to a file (at least I guess it from the name pagingstore.js. This is not going to work as server side has to honor start and limit parameters, it has to return only matching recors and it has to return total number of records for paging to work.
you must never fiddle with start and limit yourself when loading the store. Store already knows what to do and sends these parameters automatically.
For inline paging just need to code this
pageSize: itemsPerPage
proxy: {
type: 'memory',
enablePaging: true
}
oh boy.. I made myself difficult on this one :) but thanks for the reference

gridx with JSONRest - Creating and querying

Just wondering if anyone can help me with this issue. I have a Gridx connected to a JSONRest store. It works but when the grid starts up it seems to make a call to my server. I dont want this to happen. The server call takes two parameters and i only want this to be called when i query the store.
my code:
var restStore = new
dojo.store.JsonRest({target: "search"});
grid = new Grid({
id: 'grid',
cacheClass: Cache,
store: restStore,
autoHeight:true,
pageSize: 10,
modules: [
Pagination,
PaginationBar
],
paginationBarSizes: [10, 25, 50],
paginationBarVisibleSteppers: 4,
paginationBarGotoButton: false,
paginationBarDescription: true,
structure: [
{id: "description", field: 'description', width: '100%',
formatter: formatter,
}
]
});
query to the store which works
grid.model.clearCache();
grid.store.query({term : term, category : category}).then(function(results){
});
Also if i have the gridx inside another widget, it gets called again when the other widget starts up.
Any body any ideas how i get around this?
Gridx takes a 'query' parameter in it's initialization arguments, which sets initial query for the store. gridx queries the store on startup to populate itself for the first time. just specify
.......
query: {term : term, category : category},
......
in gridx initialization and it will perform that query for you on startup to populate your grid

Sencha Touch 2: Loading pushed data into form

I got some problems loading data into a form which I pushed onSelect.
(loading details for a specific list item)
onProductSelect: function(_dataView, _record)
{
Ext.getCmp('products').push({
title: _record.data.name,
data: _record.data,
styleHtmlContent: true,
xtype: 'productDetails'
});
}
I am pushing another view (productDetails) onto my productView (which is a navigationView). The data (_record.data) is available in the new pushed view via
tpl: '{someField}'
Now I'd like to know how to get this data (the fields data) into a textfield or a button (or sth like this) of a form.
If someone has a better idea how to get the data into the view/form or how to change the views (from list to detail) please let me know :)
here are some suggestions to your code:
1.use of underbar ('_') inside Sencha Touch is meant for variables which have get/set/apply/update. Although you are using local variables, it is best practice.
2.the word '_record' hopefully is a record. If so then you should use:
name = _record.get('name');
data = _record.getData();
The best way to fill a form is to use a formpanel and add the values to the formpanel, while all fields have a popper name assigned:
If your data are:
data = {name: 'Kurt001', password: '12er51wfA!'}
You could use this:
Ext.define('App.view.ProductDetails', {
extend: 'Ext.form.Panel',
xtype: 'productdetails',
config: {
cls: 'product-details',
scrollable: null,
layout: 'vbox',
defaults: {
labelAlign: 'top',
clearIcon: false
},
items: [{
xtype: 'textfield',
name: 'name'
}, {
xtype: 'passwordfield',
name: 'password'
}, {
xtype: 'button',
itemId: 'btnLogin'
}]
}
});
And to add the data simply use:
Ext.Viewport.down('.productdetails').setValues(data);
Alternative:
var view = Ext.Viewport.down('.productdetails')
view.down('.textfield').setValue(data.name);
view.down('.passwordfield').setValue(data.password);
Alternative
view.down('.field[name=name]').setValue(data.name);
view.down('.field[name=password]').setValue(data.password);
To get the data from one view to the next you can follow different options:
1.Set the data to the current view and grab them from that view. It looks like you have a list. So you can apply the data to the list:
view.down('.list').myData = data;
Extended version would be to create a custom list with myData inside the config.
That way you could use:
view.down('.list').setMyData(data);
or in your case
_dataview.setMyData(data);
2.Use a store. As you are passing a record already you might want to add a selected field to your store model and simply set the flag.

jqGrid dataUrl not loading when grid is loaded

I am using inlineNav (successfully due to assistance here!).
Now using dataUrl in a select statement, I do not understand the behavior.
The select options are not loaded when the grid is loaded. The select HTML request is not made until either edit or add a record is pressed.
Can I get it to load as soon as the grid is loaded?
$("#navgrid").jqGrid({
sortable: true,
rownumbers: true,
url: 'cms.dbw?action=ajaxgrid&sessionid=3d70a780-d6ec-102f-bd56-0015171f0bcc&subaction=jq&tableid=carepln',
editurl: 'cms.dbw',
datatype: 'json',
mtype: 'GET',
pager: '#navgrid_bottompager',
rowNum: 10,
rowList: [10,50,100],
width: 750,
height: '100%',
shrinkToFit: false,
toolbar: [false,'top'],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
gridview: true,
altRows: false,
toppager: true,
caption: 'Care Plan Detail',
colNames: ['ID','Act','Resident Code','Care Code'],
colModel: [
{name:'id',index:'id',width:50,align:'center',search:false,key:true,hidden:true},
{name:'active',width:30,align:'center',editable:true,edittype:'checkbox',editoptions: {value:'Y:N'},formatoptions:{disabled:false,value:"Y:N"}},
{name:'resid',align:'left',editable:true,width:70},
{name:'classid',align:'left',editable:true,edittype: 'select',editoptions: { dataUrl: 'cms.dbw?action=ajaxgrid&sessionid=3d70a780-d6ec-102f-bd56-0015171f0bcc&subaction=jqsubtable&tableid=careserv&field1=classid&field2=description'} ,width:70}
]
});
{"page":1,"records":4024,"total":403,"rows":[{"id":"1","cell":["1","Y","100243","22020"]},{"id":"2","cell":["2","Y","100220","22020"]},{"id":"3","cell":["3","Y","100193","22020"]},{"id":"4","cell":["4","Y","100082","22020"]},{"id":"5","cell":["5","Y","100068","22020"]},{"id":"6","cell":["6","Y","100241","22020"]},{"id":"7","cell":["7","Y","100215","22020"]},{"id":"8","cell":["8","Y","100059","22020"]},{"id":"9","cell":["9","Y","100240","22020"]},{"id":"10","cell":["10","Y","100009","22020"]}]}
The dataUrl does not resolve until the edit is started. And does not display after the edit.
I see no disadvantage from the loaded of dataUrl at the start of editing. On the contrary I see such behavior as the advantage. First of all one should not load optional data. It's better to load the data on demand. Second advantage is that you get the current data from dataUrl. On start of editing the current data from dataUrl will be loaded. So if the data will be changed on the server you can have different values on every row editing.
If you need load the data only once you can don't use dataUrl at all. Instead of that you can make separate Ajax call to set editoptions.value with respect of setGridParam.
I have the same issue - I have a foreign key in my data, and I'd like the grid to show some understandable value for this column, rather than some random key that the user will not know. Like you, I've used dataUrl to get the options, and would like to use formatter:'select' to have it display these values even when not editing the row. The problem is that this ajax request only happens when the row is edited, so it doesn't know the values until editing happens. The only solution I've found is just to do some manual ajax loading of these values before setting up the grid, and using these values to set editoptions: {value: ... } as you did for one of the other columns. This is the only way that the grid formatter can know these values before editing occurs.
This answer provides an example of loading the options before the gird, but leaves out the formatter:'select' part - here's a link to the documentation about that.

Extjs grid with multiselect feature to retrieve value of selected lists

Let's say I have a grid with multiselect option on, when user selects 4 lists and wants to get the values ( alerted on screen) how would I do that? And how would I disable buttons untill at least one list is selected?
All questions you've asked are answered many times already. Also there are good ExtJS examples on sencha.com. For example list view grid shows multiple select and editable grid with writable store shows button enable on click. But THE MOST important is documentation! Let me explain functionality on following code. Most of it is from list view example.
This grid gets JSON from list.php which has following structure
{"authors":[{"surname":"Autho1"},{"surname":"Autho2"}]}
And the grid:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
]);
Ext.onReady(function(){
// Here i've definned simple model with just one field
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['surname']
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'list.php',
reader: {
type: 'json',
root: 'authors'
}
}
});
store.load();
var listView = Ext.create('Ext.grid.Panel', {
id: 'myPanel', // Notice unique ID of panel
width:425,
height:250,
collapsible:true,
renderTo: Ext.getBody(),
store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No authors to display'
},
columns: [{
text: 'File',
flex: 50,
// dataIndex means which field from model to load in column
dataIndex: 'surname'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
// This button will log to console authors surname who are selected
// (show via firebug or in chrome js console for example)
text: 'Show selected',
handler: function() {
// Notice that i'm using getCmp(unique Id of my panel)
// to get panel regerence. I could also use
// this.up('toolbar').up('myPanel')
// see documentation for up() meaning
var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection();
for (var i=0; i < selection.length; i++) {
console.log(selection[i].data.surname);
}
}
},{
text: 'Disabled btn',
id: 'myHiddenBtn', // Notice unique ID of my button
disabled: true // disabled by default
}]
}]
});
// Here i'm waiting for event which is fired
// by grid panel automatically when you click on
// any item of grid panel. Then I lookup
// my button via unique ID and set 'disabled' property to false
listView.on('itemclick', function(view, nodes){
Ext.getCmp('myHiddenBtn').setDisabled(false);
});
});
I didn't knew how to do this from top of my head, but I used documentation and the result works ;-). See Grid panel docs for more information.