I have defined a container called header and using it on every page as header, but I am getting the following warning message.
"[Ext.Component#constructor] Registering a component with a id
(header) which has already been used. Please ensure the existing
component has been destroyed (Ext.Component#destroy()."
Need a help guys. Thanks in advance.
Instead of using id property, you'll be safe if you use itemId
Ext.create('Ext.Component',{itemId: 'header'});
Otherwise, you'll need to destroy() already instantiated component before instantiating a new one with the same id.
This is because you hard-coded id: 'header' in config of your class definition, so when you initiate it the second time, the warning will be shown.
A better approach is to create that id only when you really need through this way:
Ext.create('your-class-name',{id: your_desired_id})
Related
I'm losing track of reactivity overhead best practices in a Vue 2 Component. I need to generate a one time string with genId() and assign it to the component' id attribute. It seems like overkill to have any watching going on after that.
Is :id="myID" the right way to insert this into the html id?
And then when setting up the source where do I put the non-reactive data? I had 3 thoughts:
Add property myID: genId() to data. But doesn't that add it to the watchlist automatically even though it won't change? Causing overhead?
I read on Vue Forum from a year old answer that myID: genId() should go in the created hook. Are using hooks for this kind of thing a best practice? I thought hooks were discouraged.
Or I could put it in the component methods and then call it directly with :id="genId()
Is there a Vue way to do this?
Use method 2 for non-reactive data (and you use that component many many times on the page that the small overhead of adding the change listeners has any impact.)
created() {
this.myId = genId()
}
The 3 methods behave differently:
Method 1: data
This will call the genId() when the data object is created and add change listeners.
Method 2: created hook
This will call the genId() when the component object is created and doesn't add change listeners.
Method 3: method
This will call the genId() every time the template re-renders. Which happens every time a change is detected on a variable the view is listening to or a $forceUpdate() is called.
Ps. Vue objects already have a unique id: this._uid
but this is a private property and might change in a future version of Vue.
It's come up several times that I have wanted to access a property of a component which is bound to another property. I've spent days trying to figure out how to do this and failed. Below is a simple example of what I'm trying to do.
TabView {
Component.onCompleted: console.log(style.frameOverlap)
// OR tvStyle.frameOverlap
style: TabViewStyle {
id: tvStyle
frameOverlap: 5
}
}
Nothing like this works. I'm completely baffled about how to access these members either statically or as an instance. Can someone please explain to me whether something like this is possible?
Thanks.
The short answer is that you need to write:
Component.onCompleted: console.log(__styleItem.frameOverlap)
The longer answer is that the 'style' property is a Component. Component is something that remembers a tree of declarations, and can create objects as needed. However, it does not expose that remembered declaration, so when you try to access the frameOverlap property, it's not there.
In theory, you can call style.createObject to create an object, and examine its properties, but that would create another unnecessary instance, so you can look at TabView.qml, notice that it creates an instance already using Loader, and stores that in a property called __styleItem, and so use the code I gave above.
Of course, accessing internal properties is not a particularly good idea, but might be OK in practice. Ideally, one should be able to instantiate TabViewStyle and bind the instance to the style property, with TabView figuring out whether it's Component or object, but I'm not sure it's possible.
I have generated fieldset (textboxes,selectfield etc) inside panel. After login done i display this panel using bellow code from my controller.js
Ext.Viewport.add({xtype: 'IntakePanel'});
Ext.Viewport.setActiveItem({xtype: 'IntakePanel'});
But after this if i try to inspect i can found two panels are there
And due to this if i try to access fields of panel i got array with length 2/4 etc.
I try to remove it using
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
but doesn't help much.
Please help me on this.
Thanks
I think the framework is reinstantiating your component because when you pass only the xtype, it can't know you are trying to reference the same instance as before. try adding an id to your instance and instead of passing an xtype to setActiveItem, give it the result of a component query.
Ext.ComponentQuery.query('#yourCompoId'):
I have a component I created that extends Ext.window.Window, I've given it an alias of 'widget.customereditor'. Once I've created an shown an instance of this component both of the following pieces of code seem to be getting a reference to the same thing:
Ext.ComponentQuery.query('customereditor')[0];
Ext.widget('customereditor');
The problem is when I try to execute the close method on the returned object. So the following does work and closes the window:
Ext.ComponentQuery.query('customereditor')[0].close();
While this does not work:
Ext.widget('customereditor').close();
I'm wondering what the difference is between the two ways of querying?
After reading the API docs I found the answer. It turns out that Ext.widget does not actually query for an existing instance of a component in the DOM but instead creates new instances of components by their xtype. Ext.ComponentQuery should be used to find existing instances of components.
I'm trying to add tooltips to a Dojo application that I recently inherited. The problem I'm having is that everything is created with dojoAttachPoint identifiers instead of with id's , such as :
so, I can't use "connectId= " when defining the tooltip, until I get a hold of the element's id that I want to connect to. Basically my question is, how can I find the id based on the dojoAttachPoint?
Thanks much for any suggestions!
The attach point is either going to be a domNode or a Widget based on whether it has a dojoType or not so if you have an attachPoint to a widgit then you can access connectid with this.myAttachWidget.connectid assuming that the attachPoint is in a widgets template.