在Ext JS中获取GridPanel的HTML

Question

I have a GridPanel which is completely ready and working. It is currently rendered to the DOM by calling the render(id) method of Ext.grid.GridPanel .

This results in the GridPanel beeing rendered right before the html element with the given id.

For programming in my API i now need the rendered HTML of the table in my JavaScript to pass it to another function which can just act on HTML code and i can't change it for compatibility reasons. So the render function doesn't return anything and i don't know how to get the html or at least a reference to the DOM-node of the rendered HTML in JavaScript.

any suggestions?

Answer 1

You can get the HTML of the DOM node of the body of the grid by doing:

gridObject.body.dom.innerHTML

but it is not a table... it is markup styled to look like a table...

The best way to get grid data in HTML would be to add a method to the grid that renders its data into a template.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.XTemplate

Answer 2

Create a dom element, say d. Then do: Ext.fly(d).replaceWith(yourGrid.getEl())

This should replace your created dom element's contents with grid's contents. This also retains all the state, since ext component is still there.

Answer 3

I dont think you can actually a "String" of the HTML and pass it on to a function. But you should be able to get reference to the document element, simply by getElementById since you will know the element id (pass it into the config of the GridPanel). You'll simply get reference to the top-level element.

Have you seen the kind of HTML generated by ExtJS? They are not that nice to work directly with, it's simpler if you work with the GridPanel objects.

Answer 4

Its just not possible to render the table before the element exists AND IS ADDED TO THE DOM in which the grid should be rendered. That's really unflexible i think. But i am forced to use it by the project so i will have to change the API to generate some entrypoint - DIVs for the EXT grid before rendering.