We Keep Coding

Custom HTML - Rally TreeGrid

Hello i am receiving an error from the code below, and not sure why because i thought i was defining it. I want to make sure my code is working properly before i add complexity to the report.
launch: function() {
this._createGrid();
},
_createGrid: function() {
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['PortfolioItem/Initiative'],
autoLoad: true,
enableHierarchy: true
}).then({
success: function(store) {
var myGrid = Ext.create('Ext.Container', {
items: [{
xtype: 'rallytreegrid',
columnCfgs: ['Name', 'Owner'],
store: store
}],
renderTo: Ext.getBody()
});
}
});
this.add(myGrid);
},
});
"Error: success callback for Deferred transformed result of Deferred transformed result of Deferred threw: ReferenceError: myGrid is not defined"
I am new to this so any help would be greatly appreciated!

You issue you're running into is probably due to some confusion in how components and containers behave in ExtJS combined with the this scoping issue mentioned in the answer above.
Here's how I would write it:
_createGrid: function() {
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['PortfolioItem/Initiative'],
autoLoad: true,
enableHierarchy: true
}).then({
success: function(store) {
//The app class is already a container, so you can just
//directly add the grid to it
this.add({
xtype: 'rallytreegrid',
itemId: 'myGrid',
columnCfgs: ['Name', 'Owner'],
store: store
});
},
scope: this //make sure the success handler executes in correct scope
});
}
You also don't need to feel like you need to keep a myGrid reference around since you can always find it using the built-in component querying feature of ExtJS:
var myGrid = this.down('#myGrid');

You're defining myGrid inside of the success function scope, then trying to use it at the end of the _createGrid function, where it is undefined. I assume you're trying to do it that way because this is not bound correctly inside the success function. Try this instead:
_createGrid: function() {
var self = this;
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['PortfolioItem/Initiative'],
autoLoad: true,
enableHierarchy: true
}).then({
success: function(store) {
var myGrid = Ext.create('Ext.Container', {
items: [{
xtype: 'rallytreegrid',
columnCfgs: ['Name', 'Owner'],
store: store
}],
renderTo: Ext.getBody()
});
self.add(myGrid);
}
});
},

extjs Grid is not showing expected data even when store, and colums are present in grid object

I'm new to extjs and I'm having some trouble loading json data to a grid. In the debugger I can see the grid's store and columns are being populated accurately the way I want. But the data is not displaying in the grid. I'm not sure why. But my grid is not loading the data.
What am I doing wrong?
Thank you in advance.
the grid view:
Ext.define('searchadmin.view.reports.DynamicGrid' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.dynamicGrid',
title : 'Results',
columns: [],
columnLines : true,
sortableColumns : false,
autoScroll : true,
viewConfig : {
stripeRows : false,
loadMask:true
}
});
The store:
Ext.define('searchadmin.store.DynamicGridStore', {
extend : 'Ext.data.Store',
model: 'searchadmin.model.DynamicGridModel',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data'
}
}
});
The model:
Ext.define('searchadmin.model.DynamicGridModel', {
extend: 'Ext.data.Model',
fields: []
});
The view config for the page on which the above grid is in this gist:
Reports.js
The Reports controller that contains the code to dynamically compose the model and store is in the handleSelectQueryResult() in: ReportsController

You will have to use reconfigure method of grid instead of just assigning columns and store like this in handleSelectQueryResult function of ReportsController.js.
grid.columns = _columns; //will not work
grid.store = queryStore; //will not work
Also note that ComponentQuery.query returns an array.
Try this way.
var grid = Ext.ComponentQuery.query('#dynamicGridId')[0]; //or var grid = Ext.getCmp('dynamicGridId');
grid.reconfigure(queryStore, _columns);

EXTJS GRID and store

I have EXT JS 4.2 Grid and store.
Now one page load grid get data from store and display on UI.
I have date drop down filter on page. on date selection of date filter one request should go to server fetch data from db and reload store with updated data, and grid should update with updated store value.
My issue is how can i unbind exiting store from grid load, set store params with date, then fetch new data in store and bind to grid. and show updated data on grid?
thanks in advance
this is code where grid is created , one button is created on click of which new params needs to pass to server
{
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 152px;',
width: 960,
height: 'auto',
cls: 'portlet full',
items: Ext.getCmp('grid')
}, { //Create Button to fetch Grid Checked Data//
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 163px;padding-top: 20px;padding-bottom: 59px;',
items: [
Ext.create('Ext.Button', {
name: 'Click me',
width:'40px',
handler: function() {
update =============================================
Ext.create('store', {storeId: 'storetest2'}).load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
// To Perform some call back operations
}
});
scndStore = Ext.data.StoreManager.lookup('storetest2'),
Ext.getCmp('grid').reconfigure(scndStore);
update =============================================
})
],

After getting data into the new store,you can use
grid.reconfigure(store, [columns])
to change which store is bound to the grid..Please have a look docs.
A simple working fiddle
Update:Try this
var store2 = Ext.create('Ext.data.Store', {
model : 'store2Model', //Don't miss to mention model
storeId: 'storetest2',
proxy : {
type : 'ajax',
url :'someUrl'
reader : {
type : 'json',
root : 'items' // depends
}
}
});
store2.load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
grid = Ext.getCmp('grid'); //First check whether you are getting this comp properly
grid.reconfigure(store2);
}
});

It is fixed with this.getStore().load({ params: {test:'test1'},.. I was using filter and I was not clearing it before second load .this.getStore().clearFilter(true);

Sencha touch reset store start param

I have a store which is attached to a List. The list also uses the ListPaging plugin to enable pagination. After I call the load method (or event) of the store, the store loads the data into the list, sending requests to the following url -
http://localhost/mysite/nodelist.php?_dc=1359309895493
&tids=1%2C4%2C2%2C5%2C67&page=1&start=0&limit=10
After scrolling down the list and pressing the Load More... (which is appended to the list by the plugin), the store sends another request to the same url but with different parameters, enabling pagination -
http://localhost/mysite/nodelist.php?_dc=1359310357419
&tids=1%2C4%2C2%2C5%2C67&page=2&start=10&limit=10
Now I want to reset the value of the start and page parameter of the store. I tried to reset it by using the setExtraParam method on the proxy, but if I do that, then the control doesn't maintain the pagination - meaning that it doesn't automatically changes the page and start parameters when I press Load More....
So How do I do it?
Here is the sample code for my store -
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.reader.Json',
'Ext.data.proxy.Ajax'
],
config: {
autoLoad: false,
model: 'MyApp.model.MyModel',
serverUrl: null,
pageSize: 2,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
url: null,
reader: {
type: 'json'
}
},
listeners: {
beforeload: function () {
console.log('Before load');
},
load: function (store) {
// console.log('load');
}
}
}
});
and this is the list view -
list = {
xtype: 'list',
cls: 'myList',
flex: 12,
itemTpl: '{title}',
store: 'MyStore',
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false
}
],
listeners: {
select: {
scope: this,
fn: this.onSelect
},
swipe: {
scope: this,
element: 'element',
fn: this.onListSwipe
}
}
};

From looking at the source, perhaps you are looking for the currentPage config of the store?
When you load more recording using the ListPaging plugin, all it does is call nextPage in store which then calls loadPage using the currentPage config. If you reset the currentPage config back to 1 on your store, it will just assume the start is back to 0 and the page of course is 1.

ExtJS 4 TreePanel autoload

I have an Ext.tree.Panel which is has a TreeStore. This tree is in a tab. The problem is that when my application loads all of the trees used in the application load their data, even though the store is on autoLoad: false.
How could I prevent autoloading on the tree?
Ext.define('...', {
extend: 'Ext.container.Container',
alias: 'widget.listcontainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
html: "...",
border: 0
}, {
xtype: '...',
flex: 1,
bodyPadding: 5,
margin: '9 0 0 0'
}]
});
Ext.define('...', {
extend: 'Ext.data.TreeStore',
model: '...',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
api: {
read: 'some url'
}
}
});
Ext.define('...', {
extend: 'Ext.tree.Panel',
alias: 'widget....',
id: '...',
title: '...',
height: 400,
collapsible: true,
useArrows: true,
rootVisible: false,
multiSelect: true,
singleExpand: true,
autoScroll: true,
store: '...',
columns: [...]
});
P.S. I've found out if I change rootVisible to true on the tree this problem doesn't happen, but then it shows to root node(which I don't want).

I hit the same problem, and to avoid an implicit request, I specified a root inline in the TreeStore's configuration, like:
Ext.create('Ext.data.TreeStore', {
model: '...',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
},
api: {
read : 'some url'
}
folderSort: true,
rootVisible: false,
root: {expanded: true, text: "", "data": []} // <- Inline root
});
After an explicit .load the inline root is overwritten.

If root is invisible then AJAX tree will automatically load first level of hierarchy (as you already proved by yourself).
I think the best way is to make root visible or create tree after some actions. I wrote code that prevent AJAX request that loads data:
var preventTreeLoad = true;
store.on('beforeexpand', function(node) {
if (node == this.getRootNode() && preventTreeLoad) {
Ext.Ajax.abort(this.proxy.activeRequest);
delete this.proxy.activeRequest;
}
}, store);
var b = Ext.create('Ext.Button', {
text: 'Click me',
renderTo: 'btn',
});
b.on('click', function() {
preventTreeLoad = false;
this.load();
}, store);
But I'm not recommended to use this approach. For example, if javascript wasn't so fast - Ajax request may be send (response will not be read but server will execute operation).

You can put a dummy proxy in place when defining the tree, then set the real proxy when you want to begin using the tree/store. For example:
var store = Ext.define('Ext.data.TreeStore', {
...
// dummy proxy to avoid autoLoad on tree store construction
proxy: {
type: 'ajax',
url: ''
},
...
);
Then, when you want to use it for the first time,
store.setProxy({
type: 'ajax',
url: 'http://some/real/url',
...
});
store.load();

You can solve it with a small override:
Ext.override(Ext.tree.View,
{
setRootNode: function(node)
{
var me = this;
me.store.setNode(node);
me.node = node;
if (!me.rootVisible && me.store.autoLoad)
{
node.expand();
}
}
});
afterlayout you need a load()

Adding to what XenoN said (though many years later when I hit the same issue)
If the expanded property is set to true in the store definition, it will auto load even if autoLoad is set to false. this is unique to a TreeStore.
However, if we do want the store to load and expand we need to
Set expanded = true sometimes in code after creation (when we want) this also fires the loading of the previously created store.
setting store.setRoot({expanded:true}); within the consumer of the store which is Ext.tree.Panel.
This will load the store when you want it to load it.
seems like after that, store.load() is redundant since the expanded = true makes the store's proxy to load up and go to the server. weird, I know.

Simplest way is setting Store's root property
Ext.create('Ext.data.TreeStore', {
....
autoLoad:false,
root: {
expanded: false
}
});

Try with children and autoLoad : false :
root: {
children : []
}