Anatomy of the Grid in 1.0 Alpha1 - Ext JS

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:


It follows the following example quite closely:
http://yui-ext.com/deploy/ext-1.0-al...id/paging.html

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

Aaron

# 2   02-20-2007, 11:54 PM

great work! GridView render gui and Grid assemble all things together

# 3   02-21-2007, 12:55 AM

Aaaron that's great. I am going to sticky this. That would be great for the new grid tutorial as well.

# 4   02-21-2007, 01:00 AM

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:

# 5   02-21-2007, 01:32 AM

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).

# 6   02-21-2007, 02: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.

# 7   02-21-2007, 09: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?

# 8   02-21-2007, 10: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

# 9   02-21-2007, 11:10 AM

That's fixed. I will be putting up a new build shortly.

# 10   02-21-2007, 12:24 PM

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: Quote: row has no properties https://10.222.187.151/javascripts/ext-all.js Line 200 Subsequent clicks on a grid row: Quote: 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