Inside a tabpanel,there is a tab,in the tab there is a gridpanel. One of the columns in the grid needs to have a renderer.
The renderer needs to use a property that is defined at the scope level of tabpanel.
So from inside column model, can we access the outer scope of tabpanel?
Thanks.
There are a couple of ways of doing this, however not all are very good to use!
use Ext.getCmp(), but I STRONGLY advise you not to do so
use myComponent.ownerCt to travel up in the hyrarchy of components (from child to parent)
on construction of the child component (where 'this' is the parent's scope) create a delegate handler in the child to update things in the parent
use events to trigger actions, I usually create a singleton eventhandler in my application that allows components to communicate through the Publish-Subscribe pattern
Good luck
Related
I have a Tooltip component that when hovered displays a simple tooltip.
When you mouseLeave the component, a setTimeout fires, and when it ends, the tooltip is closed (setState({ open: false })).
Now I'd like to add a behavior to reflect the one of the native OS tooltips:
When you mouseLeave a tooltip, but instantly mouseEnter a different tooltip, the previous tooltip is instantly closed, and the new one gets opened.
To do so, I need to have a shared state between all the instances of Tooltip component. I could use Redux but it seems a bit overkill for a so simple task (I'd need a container that interacts with the store and makes an action and a property available).
Are there simpler solutions?
The best way to share information between ReactComponent is the Flux architecture. Redux is one of them.
A more simple option is to use the browser native storage used to store temporary information : it is similar to global variable but with particular scope and duration definitions.
Move the shared state into the state of the parent component of all Tooltips, have this parent define a method setWhatever to set the value, and pass this method to Tooltip components via a property. This way, children can call their setWhatever property, which is really the one of their parent, when they need to change the state.
I have an Angular controller CanvasController modelling a canvas onto which "widgets" can be placed.
The controller maintains a simple array, _currentWidgets, of object literals that correspond to the widgets currently on the canvas. e.g. [ {id: 1} ].
A CanvasDirective is tied to CanvasController, with an Angular watch placed on the array currentWidgets in the link function. This means the canvas is re-rendered when widgets are added and removed.
The canvas template contains the following line to render the widgets:
<div ng-include="'widget-template'" ng-repeat="widgetModel in currentWidgets" />
And widget template is defined as follows:
<div ng-controller="widgetController as widgetCtrl">foo</div>
It is my understanding that this means that whenever a new item is added to currentWidgets a new instance of WidgetController is instantiated by Angular for use by the new widget.
My question - how can I share the model created in the CanvasController with the new instance of the WidgetController instantiated when a widget it added? Or would this not be idiomatic and should I simply instantiate a separate model for the widget inside the WidgetController?
In your case it might already be shared already. See prototypal inheritance.
As I understand your widgets should have scopes that are child to the canvas directive, right?
A quick solution is to create a method in the parent, javascript's prototypal inheritance should lookup the method from the child to the parent's.
Or send events...
The controller's role is to extend a scope, perhaps from the $rootScope.
That means your controller's scope is a child of the $rootScope. You can try $rootScope.$broadcast() or scope.$emit(). That's one way, by sending events.
$emit() will send events going upward to the $rootScope from the child scope.
$broadcast() will send events going downward from the parent to the descendants.
I want to have a custom directive that is reusable and creates an isolate scope so it can be used anywhere (as long as the consumer uses the API defined by the directive). Then, I want the consumer to easily be able to mix and match different reusable pieces that fit within the main reusable directive.
The situation I'm working with is a drop down menu. The main directive would isolate the scope and define the API for the dropdown as a whole. The inner directives would allow the consumer to choose whether they want a button that opens the menu, a search box/input field that opens the menu, etc. Then they could also choose what menu style is used:
<dropdown items="..." selected-item="...">
<dropdown-button>(Transcluded button text here)</dropdown-button>
<dropdown-icon-list></dropdown-icon-list>
</dropdown>
The parent directive/controller would handle state/communication for the inner pieces (ie. the button might trigger the "open" state, and the list would respond by opening). In other words, the parent directive would provide a single place for the consumer to define behavior and isolate scope from the rest of the page, while the nested directives would change shared state/respond to changes in shared state based on their role.
I actually had this working by using an isolate scope on the main "dropdown" directive and then inheriting scope with the nested directives (didn't specify "scope: ..." on the nested directives). But, with Angular 1.2, things have changed such that the isolate scope of the parent is truly isolated--the children inherit the scope that exists outside the parent directive, rather than sharing its isolated scope.
What is the Angular way to accomplish such a thing?
I've started retrofitting my existing code to share the controller from the parent directive with the nested children, but I feel that's the wrong way to go once I get into the situation where the children need to listen for changes on the shared scope... The only way I can see to do that would be to pass a callback function from the nested directives into the shared controller which it would bind to a $scope.$on method. Seems like the wrong path to head down.
There’re 3 types of prefixes AngularJS provides.
"#" ( Text binding / one-way binding )
"=" ( Direct model binding / two-way binding )
"&" ( Behaviour binding / Method binding )
All these prefixes receives data from the attributes of the directive element and provide communication between directives. please visit below link for similar question.
Visit https://stackoverflow.com/a/33024209/4348824
What is the best way to let subviews/child views know when they are already in the DOM?
Consider we have following hierarchy of views:
MainView
SubView
ChildView
Here for example MainView is already in the DOM. Then as a part of render process MainView creates SubView which in turns creates ChildView.
As a result ChildView won't be in the DOM until MainView finishes its' rendering. And I need to know (via event or handler) when it is inserted and displayed.
The most straightforward answer is for MainView to trigger some event when it is done rendering. If it were the only case where I needed it - it would be alright. But there are lots of places and in general suddenly subviews dictate their parents what to do, probably not good.
Update:
In what cases this is required? When we are using widgets which expect element to be in the DOM (to get height, etc). In example: Accordion widget, jqGrid. So the correct time to init them when their container is already in the DOM.
I'm not sure what your use case is but I'm assuming its finding a DOM element within the Childview and manipulating it. In this case, it would not matter if its in the DOM or not.
What I typically do is grab the reference to the element - $el
and then find the sub-element
$target = $el.find('.target')
This has the added benefit of only allowing me to grab classes or ids within the ChildView ensuring a proper management of views.
I need to pass some variables from a controller to its view or to another view. How can i do this in extjs4's MVC structure?
If you are creating a object of view from controller then pass that variable directly e.g. Ext.create('view.myview',{id:Ext.id(),myVariable:"someValue"});
and you can access it in view's initComponent method as
initComponent: function() { this.myVariable }
I recommend using Passive View, where the view has as little logic as possible.
Your controller can get access to any of the widgets in the view, via ComponentQuery. You can then write code in the controller to set or read values from the view.
You can also use the form.loadRecord() method to load a model into a view/form.
The widgets in the view communicate with the controller by raising events that are then handled by the controller.
You should load all of your controllers when the application starts.
Your controller should only have event handlers, and should never use the refs array or getView() functions (else you won't be able to control multiple instances of the same view).
Create and destroy your views at will. Pass in callback functions to communicate from parent to child view.