PDA

View Full Version : Anatomy of the Grid in 1.0 Alpha1



aconran
20 Feb 2007, 9:03 PM
After building an interface with the 1.0 Alpha1 Grid today and understanding how all of the components and classes relate to each other I put this together:
http://divergingpath.com/uploads/GridAnatomy.gif

It follows the following example quite closely:
http://yui-ext.com/deploy/ext-1.0-alpha1/examples/grid/paging.html

Follow along, let me know if there are any errors and if its helpful to anyone.

Aaron

seno
20 Feb 2007, 9:54 PM
great work!

GridView render gui and Grid assemble all things together

jack.slocum
20 Feb 2007, 10:55 PM
Aaaron that's great. I am going to sticky this. That would be great for the new grid tutorial as well.

aconran
20 Feb 2007, 11:00 PM
Thanks Jack.

Could you tell me how to retrieve the index of the currently selected row?


var deleteRow = sm.getSelected();



Now I'm Lost.... :cry:

jack.slocum
20 Feb 2007, 11:32 PM
How come you need the index? The idea was to eliminate dependencies on the grids rows and columns since both are now variable (columns can be moved, rows can be split).

Animal
21 Feb 2007, 12:52 AM
A small comment. And note that I am not an expert on the 1.0 Grid by a long way, so take with a pinch of salt...

A very minor issue, but the graphic slightly blurs the client/server separation. It might be misunderstood to imagine that the ?Reader? component is on the server side since it is immediately below the ?Server Side Technology? header.

It should be clear that the ?Reader? is a javascript, client side component. I think it should also be at position 3. The Proxy is used by the "Ext.Store" to perform the network I/O and uses an Ext.Reader of appropriate type to read a data record and convert it to an object that can be processed by Ext.Store.loadRecords(). The output from a Reader is passed into Store.loadRecords() as param 1, and looks like

{
records: [[?row1col1?, ?row1col2?],[?row2col1?,?row2col2?]], totalRecords: 2
}

I think we should mention the server side components which are required to provide the data, but we should use care in the naming of these. I suggest ?Provider? as a term. And then make a visual split between the two sides of the network connection.

aconran
21 Feb 2007, 7:46 AM
Animal:
I agree with your comments and will try to update the graphic accordingly.

Jack:
The user clicks on a row on the grid. Then they click a "Delete" button on the toolbar. I can immediately determine what row is being deleted by:

var rowDelete = ds.getSelected();

I can also retrieve any data out of this Row/Record with

rowDelete.get(propertyName)

However I need to delete the row from the datastore and update the grid accordingly.

What I believe to be a work-around and not a particularly elegant solution is to listen to the rowselection event and store the index in a private class variable. Then I always know what row is selected and can use it for operations in my toolbar.

What's the best way to approach this?

aconran
21 Feb 2007, 8:03 AM
I thought this would work after looking through the code:

deleteFinding : function() {
var deleteRow = sm.getSelected();
alert('Deleting: ' + deleteRow.get('title'));
ds.remove(deleteRow);
},

However, I get the error "row has no properties" in the GridView after removing

jack.slocum
21 Feb 2007, 9:10 AM
That's fixed. I will be putting up a new build shortly.

aconran
21 Feb 2007, 10:24 AM
Jack:

I downloaded the build you just posted (Server time 21-Feb-2007 10:28) and still getting the same error.

After removing the row I get the error:

row has no properties
https://10.222.187.151/javascripts/ext-all.js
Line 200

Subsequent clicks on a grid row:

Index or size is negative or greater than the allowed amount" code: "1
https://10.222.187.151/javascripts/ext-all.js
Line 200

Aaron

jack.slocum
21 Feb 2007, 10:57 AM
Sorry about that. Grab it again. :)

aconran
21 Feb 2007, 12:31 PM
Awesome! works :-)

Seem to have a display problem with a double button with all my buttons, (there is an inner button in all the buttons). Not anything thats going to stop development though.

Anyone have any suggestions/experiences with the new data marshalling/modified/dirty aspect of the grid?

jack.slocum
21 Feb 2007, 12:34 PM
It's in there to define the interface. Look for auto marshalling of changes in a future release.

aconran
21 Feb 2007, 1:01 PM
Just teasing us to show what's to come eh? :D

Can't wait!

aconran
22 Feb 2007, 10:36 AM
Jack:

In response to why I need the index... or perhaps I'm overlooking something.

When deleting a Record:

deleteTest : function() {
var deleteRow = sm.getSelected();
ds.remove(deleteRow);
sm.selectPrevious();
// TODO if deleteRow was 0 how do we know to selectFirstRow
},

How do I know to call selectFirstRow if the user had clicked the first row?

tryanDLS
22 Feb 2007, 11:10 AM
Can you do that by looking at the index of the deleteRow? (untested)


if (ds.indexOf(deleteRow)) == 0) {
sm.selectFirstRow();
}

aconran
22 Feb 2007, 11:32 AM
Thanks Tim!

Code:

var deleteRow = sm.getSelected();
var deleteRowIdx = ds.indexOf(deleteRow);
ds.remove(deleteRow);
if (deleteRowIdx === 0)
sm.selectFirstRow();
else
sm.selectPrevious();

Readers should note that the index has to be looked up before you delete it. Otherwise you will get -1 as it's already been deleted.