View Full Version : Extending Panel gives no updateBounds function error

22 Sep 2010, 4:18 PM
I'm not sure where in my code is triggering this error so I'm not sure what code to paste here. If someone is willing to help me, I will put all the code here.

So I'm extending Ext.Panel but scrolling is not working (I'm not setting the scroll config to anything). When I am testing on Chrome or Safari and I change the browser size, I'm getting this error:

Uncaught TypeError: Object [object Object] has no method 'updateBounds' in ext-touch-debug.js:16321

You can test the code here: http://www.simoens.org/Sencha-Projects/Ext.ux.GridPanel/

Once again, if you want to see the code here on this post, let me know. I'm just wondering if anyone has seen this error or knows what could trigger it and I will figure it out myself.

22 Sep 2010, 5:00 PM
Component has a scroller property that controls scrolling. You're overwriting it with a DOM element.

22 Sep 2010, 5:04 PM
Awesome! Fixed the error by renaming my scroller property. However scrolling is not working even if I set the scroll config.

23 Sep 2010, 3:02 PM
Porting Ext 3's GridView to Sencha Touch I see... This is not the approach that I would recommend.

If you are looking for a GridView type implementation for an iPad or other tablet device I would rely on all of the cool HTML5/CSS3 features that we get from a WebKit based browser! The markup that you've ported is implemented that way because we support IE6+. You can significaly trim this down to be optimized on a tablet device.

23 Sep 2010, 3:04 PM
Understand... was hoping to get something working then optimize it.

23 Sep 2010, 4:49 PM
Row selection model using CSS3:

CSS3 code:

.x-grid3-row[selected=true] {
-webkit-transform: translate3d(0, 0, 0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #7fb6e7), color-stop(2%, #2986d6), color-stop(100%, #1d5e96));
background-image: linear-gradient(top, #7fb6e7 0%, #2986d6 2%, #1d5e96 100%);
color: #fff;
border-color: #103656;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);

JS code:

var target = e.getTarget(),
row = Ext.get(this.findRow(target)),
selected = row.getAttribute("selected"),
newSelect = (selected === "true") ? false : true,
deselect = (newSelect === false) ? "de" : "",
r = this.store.getAt(index);

if (this.fireEvent("beforerow"+deselect+"select", this, index, r) !== false) {
if (this.selModel.singleSelect) {
if (this.selModel.selected !== null && this.selModel.selected !== row) {
selected : false
this.selModel.selected = row;

selected : newSelect
this.fireEvent("row"+deselect+"select", this, index, r);
this.fireEvent("selectionchange", this);

I have the selected property as I think it's fast this way instead of going through all the nodes.