Multiple IDs and partial views clarification

[millenovanta]

Hi,

I have a partial view, which should be rendered many times inside an index page.

If i don't set any id, all is rendered nice.
Then I need to set IDs, for example to buttons inside the partial view, to be able to enable/disable them dinamically.
But If I set IDs, buttons are generated only once inside a window. When I render the partial view the second time, the button disappear from the first window and is rendered in the second. (It seems to be a correction of the old "multiple id" exception).

I would have ids on buttons, and i would have javascript to act on controls of the same partial view/window, not different window. So I logically removed the problem of multiple ids, because I would work only from a control to others controls in the same partial view/window.

Without explicitly set IDs, how can i have js functions working on controls?

How can I manage to do it?
How should I set IDmode on window and on buttons?

@(

 Html.X().Window()
    .Title("WINDOW 1")
    .IDMode(???)
    .CloseAction(CloseAction.Destroy)
    .Icon(Icon.Application)
    .Height(600)
    .Width(800)
    .BodyStyle("background-color: #fff")
    .BodyPadding(5)
    .Modal(false)
    .Items(items =>
                        {

                            items.Add(Html.X().Button()
                                .ID("btn1")
                                .IDMode(???)
                                    .Text("Open Window")
                                    .Icon(Icon.Application)
                                    .Listeners(listeners =>
                                    {
                                        listeners.Click.Handler = "#{btn2}.disable();";
                                    })
                                    );

                            items.Add(Html.X().Button()
                                .ID("btn2")
                                .IDMode(???)
                                .IDMode(IDMode.Parent)
                                    .Text("Open Window")
                                    .Icon(Icon.Application)
                                    );
                        }
        )

)

And and an Index.cshtml with a button who renders the partial view.

@Html.X().ResourceManager()

    @(Html.X().Button()
        .Text("Show window")
                    .DirectEvents(de =>
                    {
                        de.Click.Url = Url.Action("RenderWindow");
                    })
     )

Thank you.

[Vladimir]

In your particular case, you can use

listeners.Click.Handler = "this.next().disable();";

I suggest to investigate Ext.ComponentQuery functionality in ExtJS online API

[millenovanta]

Mani thanks.
This seems to be a great solution.

If I use component query to inspect, for example, by the name of the button, does it work if I have the same button in different container?
Does componentQuery filter for current container only, isn't it?

Thanks again!

UPDATE:

I found the final solution, using element properties of extjs.
My new listener on the button is:

listeners.Click.Handler = "this.up('window').down('component[itemId=35]').disable();";

By this way I go up until I find the window container, then i go down searching for the lement by itemId. This parameter doesn't throw any exception if not unique.

Thank you. :)