PDA

View Full Version : My PagedJsonView attempt



BernardChhun
25 Jan 2007, 1:12 PM
:roll: I think I started this the wrong way...It's my first time ever so please don't be too mean :oops:

PagedJsonView attempt url: http://explorer.waka.ca/PagedJsonView.html

What you guys will see on that page:
a working JsonView on the left and a broken PagedJsonView on the right. Both have the same Json url and data. There's a link to my extension javascript file in the bottom region.

What I've managed to do until now:
1. inserting an almost working toolbar at the bottom of the region where the JsonView is.
2. incrementing the page number and making the buttons work.
3. Appearance of the loading message.

What I've screw up until now:
1. The PagedJsonView won't show up.

I must say that I didn't try to find any posts about this as I want to learn it by myself. There must be a better way than this. I've tried to mimic the PagedGridView code for the paging toolbar build up but as y'all can see I can't manage it.

any ideas or suggestions?

Bernard

jon.whitcraft
25 Jan 2007, 1:52 PM
Nice start. To me it looks like it's not running the render function after it returns the data.

I dont have time to play with it now but I will certaintly take a look into it as I'm going to need something like this soon.

Jon

jon.whitcraft
25 Jan 2007, 4:30 PM
ok i found the problem.


you need to change the name of your refresh button.



this.refresh = jsonViewToolBar.addButton({
tooltip: this.refreshText,
className: 'ygrid-loading',
disabled: false,
click: this.onPaginationClick.createDelegate(this, ['refresh'])
});


this.refresh is using the code and when you over write it it doesn run the proper code to insert the templates.

hope that helps.

JohnT
25 Jan 2007, 6:10 PM
sidhighwind:




I dont have time to play with it now




It was extremely curteous of you to find the time to help out on this.

I just thought you , and others, might want to know that people actually are reading your posts, and studying your code solutions.

Regards,

John T.

Animal
26 Jan 2007, 1:15 AM
Is PagedJsonView a new yui-ext class from 0.40? Or is it your extension? I don't see it in http://www.yui-ext.com/deploy/yui-ext.0.40-alpha/source/ It's a good idea!

I have no idea why its not working though. The XHR is pulling back well formed JSON according to Firebug.

I did notice that the load function creates a new pagination toolbar every time you load a page, so they build up and up!



load : function(){
var um = this.el.getUpdateManager();
um.update.apply(um, arguments);
this.arguments = arguments[0];
this.createPaginationToolbar();
},


Check Firebug's HTML view to see the toolbar elements proliferate!

BernardChhun
26 Jan 2007, 4:44 AM
ok i found the problem.


you need to change the name of your refresh button.



this.refresh = jsonViewToolBar.addButton({
tooltip: this.refreshText,
className: 'ygrid-loading',
disabled: false,
click: this.onPaginationClick.createDelegate(this, ['refresh'])
});


this.refresh is using the code and when you over write it it doesn run the proper code to insert the templates.

hope that helps.

thanks a bunch sidhighwind!! That's exactly what was messing up the rendering!


Is PagedJsonView a new yui-ext class from 0.40? Or is it your extension? I don't see it in http://www.yui-ext.com/deploy/yui-ext.0.40-alpha/source/ It's a good idea!

I have no idea why its not working though. The XHR is pulling back well formed JSON according to Firebug.

I did notice that the load function creates a new pagination toolbar every time you load a page, so they build up and up!

Check Firebug's HTML view to see the toolbar elements proliferate!

nahh it's not in SVN Animal. I actually had the idea to make it up since I've seen JohnT's gallery widget. I'll correct that load function problem right away!

infinite thanks for every replies!

cheers,
Bernard

jon.whitcraft
26 Jan 2007, 5:49 AM
Bernard,

The one other thing that i noticed was that i was not pulling putting in the correct number of pages but instead pulling the length of the json data that was returned. you might want to look into that some more. If i get a chance to day i'll do the same if you have not already done that.

Jon

BernardChhun
26 Jan 2007, 5:58 AM
Bernard,

The one other thing that i noticed was that i was not pulling putting in the correct number of pages but instead pulling the length of the json data that was returned. you might want to look into that some more. If i get a chance to day i'll do the same if you have not already done that.

Jon

Yea I know. It's because I wasn't able to fetch that data out of the JsonView has it was only keeping the specified root data. I changed a bit of code to use a dataModel to load the PagedJsonView instead.

The grid's JsonDataModel has a getTotalPages() function that I am now calling to get the last page. Its schema is where I specifie the Json Node that contains the total count that is used in that function.

What's weird now is that the Json data gets inserted properly in the dataModel but it doesn't render in the view! My guess for now is that the template I'm using is messing it up...so I'm currently working on it as you can see!

thanks for the helping hand Jon! Be assured that I will help you the same way when you'll run into some trouble.

Bernard

EDIT: I'm almost there. The only thing is I don't know what's the proper moment to build the toolbar! I'm using firebug to trace every event it goes to before the rendering... For now, once the page loads, the only toolbar button that is enabled is the refresh one. Once you click on it, you'll be able to navigate properly. :evil:

EDIT #2: Victory is miiine! I finally nailed it. There's some annoyances left:

1. I don't know how to make that loading icon rotate while the data gets from the php page to my PagedJsonView.

2. there's a CSS one too and it's concerning the toolbar in IE. It seems the toolbar's position is influenced by the View's content.

3. Another CSS one: if the panel that contains the PagedJsonView gets real small, the paging toolbar will move over the PagedJsonView container..which is very likely to happen once in a while.

4. the fourth one is concerning the template we use for the rendering of the data. It seems I have to use the column index number to access a column's data...

like so...

var pjvTemplate = new YAHOO.ext.Template(
'<div class="thumb-wrap" id="{1}">' +
'<div class="thumb"> {4} </div>' +
'<div style="align:left;"> Ville: {6}
Prix: {5} </div>' +
'</div>');
pjvTemplate.compile();
instead of something like this:

var thumbnailTemplate = new YAHOO.ext.Template(
'<div class="thumb-wrap" id="{id_annonce}">' +
'<div class="thumb"> {thumbnail} </div>' +
'<div style="align:left;"> Ville: {ville}
Prix: {prix} </div>' +
'</div>'
);
thumbnailTemplate.compile();


I'll look into it more deeply this weekend. anyways, I feel this PagedJsonView can be much better as I've only patched some of the holes lying around while I built it. Jon, if you ever get into these upgrades on the PagedJsonView, please tell me as I will be using it also in my main work project.

jon.whitcraft
26 Jan 2007, 2:10 PM
I'll take a look into this this weekend as i'm heading out here real soon but i'm also very instersted is this working as i need it for a photo view that has close to 207k of image in it.

anyways. I'll let you know what i find and set up an example on my machine.

Jon

jon.whitcraft
28 Jan 2007, 2:22 PM
1. I don't know how to make that loading icon rotate while the data gets from the php page to my PagedJsonView.

I'm not too sure on this one..I'm sure i can find it but i never even noticed that it moved on the girds.



2. there's a CSS one too and it's concerning the toolbar in IE. It seems the toolbar's position is influenced by the View's content.

The only problem i get is with the x-axis scroll bar moving it up and down when it thinks it should be there.



3. Another CSS one: if the panel that contains the PagedJsonView gets real small, the paging toolbar will move over the PagedJsonView container..which is very likely to happen once in a while.

I think this has to do with the height issued. I'm not sure why it's not fixing it's self when you append a child. I'm still looking into this.



4. the fourth one is concerning the template we use for the rendering of the data. It seems I have to use the column index number to access a column's data...

like so...

var pjvTemplate = new YAHOO.ext.Template(
'<div class="thumb-wrap" id="{1}">' +
'<div class="thumb"> {4} </div>' +
'<div style="align:left;"> Ville: {6}
Prix: {5} </div>' +
'</div>');
pjvTemplate.compile();
instead of something like this:

var thumbnailTemplate = new YAHOO.ext.Template(
'<div class="thumb-wrap" id="{id_annonce}">' +
'<div class="thumb"> {thumbnail} </div>' +
'<div style="align:left;"> Ville: {ville}
Prix: {prix} </div>' +
'</div>'
);
thumbnailTemplate.compile();


That's the way it's going to have to be becuase of using the data model. It's fine for what i need it for but i'm sure it's not a final solution. maybe jack can comment on this to see if we are doing it the right way or if he has some other ideas.

Here is mine. It's not much different than yours right now as i'm not feeling the code right now. maybe it will come to me this week..

http://code.bombdiggity.net/PagedJsonView/

Animal
29 Jan 2007, 12:36 AM
You don't make the icon rotate, you have to, on begin of the load operation, assign a different CSS class to that toolbar button which has an animated gif as the background image. And on completino of teh load operation, you change the class back.

kd21
30 Jan 2007, 5:47 AM
Hi to all,

Thanks for giving details for adding pagging toolbar in grid ...
but now i want to set this toolbar in center of grid and

How to add any form element in grid ...
is it possible??? if yes plz help me

Thanks
Kd21