TableGrid selector

[alemonnier]

As far as I know, the Ext:TableGrid selects its target table by id only.

I would like to propose a new feature allowing to select tables by css class or any other selector alowed in Ext.select().

This would allow to convert multiple tables in one operation, even all tables in one page. For instance, I could add this control to the master page.

Could it be done?

Thank you in advance

[Daniil]

Hi,

Please clarify do you want to use single <ext:TableGrid> for multiple tables? If so, no, this control applies only one table.

Regarding to the css selector.

Internally Ext.get(Mixed el) method is used to retrieve table element. In accordind to ExtJS docs:
http://dev.sencha.com/deploy/dev/docs/?class=Ext&member=get

it can apply

The id of the node, a DOM Node or an existing Element.

So, it doesn't apply css selector and return only one element.

But you should be able to use Ext.select() to retrieve table elements and pass these elements to <ext:TableGrid> controls as Table property.

[alemonnier]

Proposed syntax could be something like

<ext:TableGrid runat="server" Table=".cssclass" StripeRows="true" />

or even better

<ext:TableGrid runat="server" Selector="#containerDiv .targetTableClass" StripeRows="true" />

I understand that it could be necessary to change tablegrid.js to use

table = Ext.select(config.selector); //instead of Ext.get(config.table)

and then loop results.


Anyway, if you think this feature should not be part of Ext.net a workaroud will be welcome. In my scenario, i need to unify look and feel for tables redered dinamically using a third party component, so it is imposible to determine their Id.

Thank you

[geoffrey.mcgill]

Hi,

I think at this point the best we could do is add as an official Feature Request for future review and/or implementation.

[Daniil]

Feature ticket has been created.
https://extnet.lighthouseapp.com/pro...res/tickets/69

[Vladimir]

Hi,

You can easly to do it via javascript code

Ext.select("#containerDiv .targetTableClass", true).each(function(item){
      Ext.grid.TableGrid({
                stripeRows:true,
                table: item
      });
});