Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Two Way Data Binding Between Two Components

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    69
    Answers
    1

    Default Answered: Two Way Data Binding Between Two Components

    I was wondering if there is a way to bind ViewModel data between two different view components in which one is not the child of the other. For example, there is an application using border layout which has some interesting view in the center region that can be customized using a configuration form that resides in the east panel. What would be the best way to glue the config form and view together? Is there a way to leverage newly introduced two-way data binding in ExtJS 5?

  2. I was able to bind an arbitrary instance of a component to the ViewModel of another arbitrary component using ComponentQuery, getViewModel and setViewModel.Thanks for the prompt response guys.

  3. #2
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,425
    Answers
    20

    Default

    Here's an example of two-way data binding.

  4. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    69
    Answers
    1

    Default

    Quote Originally Posted by LesJ View Post
    Here's an example of two-way data binding.
    Thanks for the prompt reply, but I am aware of this. In this example, the two components that are bound with the shared data are in the same view hierarchy, i.e., "textfield" is a child components of the "binding-two-way" panel. What if the the two components are in the two different view hierarchy?

  5. #4
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,425
    Answers
    20

    Default

    Quote Originally Posted by ibnesayeed View Post
    What if the the two components are in the two different view hierarchy?
    I didn't try it, but you can write code to bind to a different ViewModel, see the doc

  6. #5
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Atlanta
    Posts
    39
    Answers
    2

    Default

    You can place this definition in the view model of a common ancestor for these 2 views. This will ensure both of them are working with the same config, and they both can also have their own view models and controllers.
    Happy coding!

  7. #6
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,425
    Answers
    20

    Default

    This is a very good point, Carun, and actually it's documented.

    The ViewModel, like ViewController is owned by the view that references it. Because ViewModels are associated with a view, they are also able to link to a parent ViewModel owned by ancestor components in the component hierarchy. This allows child views to inherit the data of their parent ViewModel.

  8. #7
    Sencha User
    Join Date
    Jul 2009
    Posts
    69
    Answers
    1

    Default

    Thanks @Carun and @LesJ, I am aware of these documents and have gone through these quite a few times. Putting data on a parent container in the view hierarchy that contains both components will work, but my use case is little more complex than that. Let me explain with an example.

    Think of a photo editor like GIMP or PhotoShop that has canvas in the middle which may have one or more layers in it. On the side bar, there is a layer configuration panel that gives controls to operate on each layer on the canvas to change its properties. Having ViewModel data on a parent element, say the ViewPort, will require us to have data for each layer in an array and I don't see an easy and clean way to dynamically create them. On the other hand if we define a View class for layer with corresponding ViewModel, then every layer object will have its own ViewModel object. Now for every layer on the canvas, if we create a layer config view and put it in the side bar, and some how instruct the layer config to bind with the ViewModel of the corresponding layer on the canvas, that will work.

    So, in summary, I want to know if there is a way to instruct a view component (e.g., panel or form panel) to bind with the ViewModel "instance" of another arbitrary component other than its own.

  9. #8
    Sencha User
    Join Date
    Jul 2009
    Posts
    69
    Answers
    1

    Default

    I was able to bind an arbitrary instance of a component to the ViewModel of another arbitrary component using ComponentQuery, getViewModel and setViewModel.Thanks for the prompt response guys.

  10. #9
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Atlanta
    Posts
    39
    Answers
    2

    Default

    Hmm, the only way (that I know of) to share a view model is to be in the same hierarchy. Unless you can open those sidebars from within the Canvas view, it cannot share the same instance of the view model. :-(

    May their view controllers can interact through the app Controller (or a parent View Controller) and sync up the data. Although this will solve the problem at hand, I do see a need to easily share data across components not immediately related to each other.

    Hopefully someone whose dabbled on this a bit more can shed some light on this topic.
    Happy coding!

  11. #10
    Ext JS Premium Member
    Join Date
    Jul 2011
    Location
    Atlanta
    Posts
    39
    Answers
    2

    Default

    That works too! :-)

    Quote Originally Posted by ibnesayeed View Post
    I was able to bind an arbitrary instance of a component to the ViewModel of another arbitrary component using ComponentQuery, getViewModel and setViewModel.Thanks for the prompt
    response guys.
    Happy coding!

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •