PDA

View Full Version : NestedList, change Proxy-URL, store loaded twice



torsten.t
13 Oct 2010, 7:55 AM
I would like to change the URL when I click on an item in a nestedList. Then the store should load again once with the new URL.
The problem:
- I can not change the URL of the original proxy.
- The store loads twice

I am working with the nestedList example from sencha-touch-beta-0.96


Ext.regModel('File', {
idProperty: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'fileName', type: 'string'}
]
});


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){

var store = new Ext.data.TreeStore({
model: 'File',
proxy: {
type: 'ajax',
url: '/cgi-bin/nested.cgi',
reader: {
type: 'tree',
root: 'children'
}
}
});


var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'src/',
displayField: 'fileName',
// add a / for folder nodes in title/back button
getTitleTextTpl: function() {
return '{' + this.displayField + '}<tpl if="leaf !== true">/</tpl>';
},
// add a / for folder nodes in the list
getItemTextTpl: function() {
return '{' + this.displayField + '}<tpl if="leaf !== true">/</tpl>';
},
// provide a codebox for each source file
getDetailCard: function(record, parentRecord) {
return new Ext.ux.CodeBox({
value: 'Loading...',
scroll: 'both'
});
},
store: store
});


nestedList.on('itemtap', function(subList, subIdx, el, e) {
var ds = subList.getStore(),
r = ds.getAt(subIdx);

Ext.Ajax.request({
url: '/cgi-bin/nested.cgi?id=abc' ,
success: function(response) {
},
failure: function() {
}
});
});

}
});

The first loading of the page is fine. The page is loaded with /cgi-bin/nested.cgi?_dc=1286984054853&node=root".

I click on the first item and am now seeing two requests:
/cgi-bin/nested.cgi?id=abc and
/cgi-bin/nested.cgi?_dc=1286984064897&node=locale

The first request is fine, the second is alien.
My line of thought is to
- disable the second request
- changing the url of the second request from /cgi-bin/nested.cgi?_dc=1286984064897&node=locale to /cgi-bin/nested.cgi?id=abc

But as I am new to this stuff I have no idea how to do it.
I just want to reload the store with a different URL after clicking on an item.
I am looking forward to pushes in the right direction.
Torsten.

steve1964
13 Oct 2010, 8:08 AM
You have to redefine the store proxy url and then reload the store:


store.proxy.url = '/cgi-bin/nested.cgi?id=abc';
store.read();

torsten.t
13 Oct 2010, 8:52 AM
I changed the itemtap-event to


nestedList.on('itemtap', function(subList, subIdx, el, e){
store.proxy.url = '/cgi-bin/nested.cgi?id=abc';
store.read();
});

Thank you Steve.
The first request looks good.
But I still have the second request.
After I click on the first item I have now the following requests:
- /cgi-bin/nested.cgi?id=abc&_dc=1286988072928&node=root
- /cgi-bin/nested.cgi?_dc=1286988072895&node=locale

As the first request looks good, how can I stop the second request from firing?
Torsten.

steve1964
13 Oct 2010, 9:03 AM
I dont understand what you mean with second request, can you post full code?

torsten.t
13 Oct 2010, 9:35 AM
My complete code is now:


Ext.regModel('File', {
idProperty: 'id',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'fileName',
type: 'string'
}]
});


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){

var store = new Ext.data.TreeStore({
model: 'File',
proxy: {
type: 'ajax',
url: '/cgi-bin/nested.cgi',
reader: {
type: 'tree',
root: 'children'
}
}
});


var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'src/',
displayField: 'fileName',
// add a / for folder nodes in title/back button
getTitleTextTpl: function(){
return '{' + this.displayField + '}<tpl if="leaf !== true">/</tpl>';
},
// add a / for folder nodes in the list
getItemTextTpl: function(){
return '{' + this.displayField + '}<tpl if="leaf !== true">/</tpl>';
},
// provide a codebox for each source file
getDetailCard: function(record, parentRecord){
return new Ext.ux.CodeBox({
value: 'Loading...',
scroll: 'both'
});
},
store: store
});


nestedList.on('itemtap', function(subList, subIdx, el, e){
store.proxy.url = '/cgi-bin/nested.cgi?id=abc';
store.read();
});

}
});

When the page is loaded, I see the request in Firebug in the network tab.
/cgi-bin/nested.cgi?_dc=1286990235577&node=root

The response from this request is:
{"text":".","children":[{"fileName":"locale","id":"locale","cls":"folder"},{"fileName":"data","id":".\/data","cls":"folder"},{"fileName":"core","id":".\/core","cls":"folder"},{"fileName":"widgets","id":".\/widgets","cls":"folder"},{"fileName":"util","id":".\/util","cls":"folder"},{"fileName":"layout","id":".\/layout","cls":"folder"},{"fileName":"platform","id":".\/platform","cls":"folder"}]}

When I now click on the item "locale/" in my nested list, two requests are startet.
In Firebug, network tab I have:
.../cgi-bin/nested.cgi?_dc=1286990484788&node=locale
which gives me back
{"text":".\/locale","children":[{"fileName":"ext-lang-en.js","id":"locale\/ext-lang-en.js","leaf":true,"cls":"file"}]}

and the second request
.../cgi-bin/nested.cgi?id=abc&_dc=1286990484857&node=root
with the response
{"text":".\/locale","children":[{"fileName":"Neu!!!.js","id":".\/locale\/ext-lang-en.js","leaf":true,"cls":"file"}]}

But on the screen I have now:
"ext-lang-en.js" instead of the desired "Neu!!!.js"

How can I tickle my store into showing the result from the second request and
how can I avoid the first request?
Torsten

christythomas
29 Apr 2011, 1:14 PM
I have been wondering something very similar b/c I'm trying to figure out how to force my store for my NestedList to reload as the first time you click on an item it requests the next list, but the second time I click it does not make the request. If you did get anymore insight into how to tie into the NestedList before it makes the request I would love to know.

I have been able to change the url without double requests by using the beforeload listener on an extended TreeStore object I use for the NestedList. My beforeload only gets called the first time I click on the item though and I want it to happen everytime. :(



exec.stores.ExecTreeStore = Ext.extend( Ext.data.TreeStore, {
/**
* @constructor
* @param config {Object}
*/
constructor: function(config) {
config = Ext.apply(config || {}, {
model: 'Menu',
autoLoad: true,
listeners: {
beforeload: function(store, operation){
var proxy = store.getProxy();
proxy.url = "your new url";
}
},
scope: this
},
proxy: {
type: 'ajax',
url: config.url,
method:'GET',
reader: {
type: config.readerType,
root: config.rootElement
}
}
});

exec.stores.ExecTreeStore.superclass.constructor.call(this, config);
}
});

exec.stores.dashboardsMenu = new exec.stores.ExecTreeStore( {
url: '/restfulapi/resources/menus/dashboards',
storeId: 'exec-stores-dashboardsmenu',
rootElement: 'response.resGrouping',
readerType: 'execresponsereader'
} );



I hope this helps if you haven't already found a solution.