Controller Issues with 0.67

[cgauthier]

I've built a nice desktop app OS using ExtJS 411.

It works great.

My plan was to use DeftJS to load my module instances into my windows dynamically.

That works, but..
My desktop is designed in a way that it can have multiple instances of the same module in different windows.

In order to avoid the duplicate id conflict, I figured I could hack something as follows;

init: function() {
    var idPrx = this.view.id;
    debugger;
    this.control[idPrx + '-modButton'] = {
        click : 'myClickFunc'
    }

},

Now this works in the sense that I can instantiate a window and get no errors, but, the event doesn't fire as I would have expected it.

However, if I spawn a second window. I get a nasty error. My desktop OS actually has a nice Error / Msg system, so it generated the following:

ID: Error1
Date: 2012-08-17
Time: 17:22:45
Error Message: Error locating component: no component found with an itemId of 'module2-1-AppModule-modButton'.
sourceMethod: "locateComponent"
sourceClass: "Deft.mvc.ViewController"

Now, to understand this in context, my first window is named 'module-2-1-AppModule' and the button is named 'module-2-1-AppModule-modButton'.

The second window is named 'module-2-2-AppModule'. the button is named 'module-2-2-AppModule-modButton'.

So, I've not had a chance to dive into the inner workings of Deft, but I suspect it don't like the way I'm using it.

But to me, and my understanding of Deft. I want to be able to inject any module I wish and any amount and ensure that I'm not dealing with duplicate IDs issues when I have multiple instances.

I have a few workaround ideas, but hoping that I can stick to DeftJS.

Any ideas?

[johnyanarella]

Claude,

If I understand what you're trying to do correctly, I have some good news. You don't need to jump through any of those hoops to avoid duplicate ids.

The selectors supplied in the control configuration for a Deft.ViewController are evaluated relative to the view. If you use itemId rather than id, you can completely avoid the duplicate id issue. You can have multiple components in the same application at different levels of the view hierarchy with the same 'itemId' (unlike with 'id').

So if you have a view like this:

Ext.create('MyApp.view.MyView', {
  extend: 'Ext.Container',
  mixins: ['Deft.Controllable'],
  controller: 'MyApp.controller.MyViewController',

  items: [
    {
      xtype: 'button',
      itemId: 'submitButton'
    },

    ...
  ],

  ...
});

And a ViewController like this:

Ext.create('MyApp.controller.MyViewController', {
  extend: 'Deft.ViewController',

  control: {
    submitButton: {
      click: 'onSubmitButtonClick'
    }
  },

  ...
  onSubmitButtonClick: function() {
     // TODO: Do something.
  }
});

You can create as many independent instances of MyApp.view.MyView as you want.

Each will get its own instance of MyApp.Controller.controller.MyViewController backing it.

Each of those MyViewController instances will evaluate the selectors provided via the control annotation relative to that view instance. In the example above, the selector is implicit - it will query for '#submitButton' within that view instance. (You can provide explicit selectors if needed through more verbose syntax, as shown on http://deftjs.org/)

So, that's an important distinction - Ext.Controller selectors are global, whereas Deft JS View Controller selectors are relative.

The problem of displaying multiple copies of the same view (each backed by independent view-specific controllers) is one of the problems Deft JS was built to solve.

Let me know if I understood your issue correctly, and if this helps resolve the problem you were having.

Best regards,

-J

[cgauthier]

Perfect John! exactly what I wanted.. using itemId is the solution.. whoo hoo! :)