From the dojo documents on dijit.registry, I see the forEach method accepts a last parameter thisObject. But it doesn't way what that object is. Is it a dijit widget or a dojo object?
I want to destroy all widgets inside an element (that will be replaced by AJAX) so they can be parsed again without conflicting id's.
dijit.registry.forEach(function(w) {
w.destroyRecursive();
}, dojo.byId("ajaxElement"));
But this destroys ALL widgets on the page...
The thisObject is the scope object to invoke the function passed in as the first parameter of forEach.
A couple of solutions you can use in this case:
1) Use dijit.findWidgets to find all the dijits in a DOM node and destroy them one by one.
dijit.findWidgets returns array of widgets which takes domnode as a parameter
2) dojo.parser.parse returns an array of all the dijits that it creates, store that array and destroy the dijits before you call dijit.parser.parse again.
3) Use dijit.registry.filter to filter out the dijits you want to keep.
Related
I have got a rather large template at the moment for my component. I want to separate aspects of this into it's own component.
However i'm struggling to pass data to this component. I still want to be able to manipulate the data within the child and have the data in the parent update. So for example if I pass in an object, and then use v-model within the child on a textbox, the changes should reflex within the parent.
So, i'd assume as I loop through the list of objects I would v-model them into my child component, like so:
Main.vue
<card v-for="quote in quotes" v-model="quote"></card>
And then of course accept the input within the new model:
Card.vue
export default {
props: [ 'input' ]
}
However i'm getting the following error and I can't really make sense of it.
You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-mode
l on an object property instead.
I have a list of collapsible’s in a v-for, and a QDataTable component inside with multiple selection as below.
<q-collapsible :label="req.label" v-for="(req, index) in requisitions" :key="index" class="collapsible-no-padding requisitionContainer" #open="openRequisition('Requisition' + req.reqId)" #close="closeRequisition('Requisition' + req.reqId)" :id='"Requisition" + req.reqId'>
<q-list>
<q-item link class='ordersContainer'>
<q-item-main>
<q-data-table
:data="req.filteredOrdersList"
:config="orderConfigs"
:columns="orderColumns"
#selection="selectOrders">
</q-data-table>
</q-item-main>
</q-item>
</q-list>
</q-collapsible>
It looks like this
However, since there are more than one table, if a selection is made on any of the tables, it does call the selection method with the selected item, but I have no way to tell which table it is a part of. This is a problem when a selection is removed and you are returned an empty array, for which I need to distinguish between each tables selection event. Is there a way to do it?
You can pass the reference to the req object to the method in the #selection handler.
Since you also need the reference to the array of selected items currently being implicitly passed to the selectOrder method, you'll now need to explicitly pass that value. Normally, you could do that via the $event variable accessible inline.
However, contrary to the documentation, the <q-data-table> component's selection event is emitting two variables: the count of the elements in the array of selected items, and the array of selected items itself, in that order.
To get a reference to the array of selected items, you'll need to access the second argument being emitted via arguments[1]:
#selection="selectOrders(arguments[1], req)"
I am working on ExtJS 4.2 now. There are 3 ways to access DOM elements - get, select, query.
I want to know the difference between them. Why three separate methods?
we have a question here: SVO
But it doesn't give me any clear answers. Looking for something specific / detailed answer.
Will be grateful if you can help with the explanation.
Thanks in advance :-)
EDIT based on answer below:
I am not much into jQuery so can't understand through comparison. Can anyone help me with the difference between an Ext.element and a composite element?
EDIT 2:
What is Ext.dom.Element? Any different from Ext.element? and if anyone could throw some light on "Ext.fx.Anim" package?
Ext.get
Ext.get is analogous to document.getElementById in that you can provide the ID of a DOM node and retrieve that element wrapped as Ext.dom.Element. You can also provide a DOM node or an existing Element.
// Main usage: DOM ID
var someEl = Ext.get('myDivId');
// Wrap a DOM node as an Element
var someDom = document.getElementById('myDivId');
someEl = Ext.get(someDom);
// Identity function, essentially
var sameEl = Ext.get(someEl);
Ext.query
Ext.query allows you to select an array of DOM nodes using CSS/XPath selectors. This is handy when working with custom components or data views and you need a more robust selection mechanism than DOM IDs.
// Get all DOM nodes with class "oddRow" that are children of
// my component's top-level element.
var someNodes = Ext.query('.oddRow', myCustomComponent.getEl().dom);
Ext.select
Ext.select is essentially Ext JS's answer to jQuery's selectors. Given some CSS/XPath selector, it returns a single object representing a collection of Elements. This CompositeElement has methods for filtering, iterating, slicing the collection.
Most importantly, the CompositeElement supports chainable versions of all methods of Ext.dom.Element and Ext.fx.Anim that operate on each element in the collection, making this method very powerful.
Edit 1: An Ext.Element represents a single DOM node, while an Ext.dom.CompositeElement represents a collection of DOM nodes that can be affected through a single interface. So, given the following example:
// Set the height of each table row using Ext.query
var tableRowNodes = Ext.query('tr', document.getElementById('myTable'));
Ext.Array.each(tableRowNodes, function (node) {
Ext.fly(node).setHeight(25);
});
// Set the height of each table row using Ext.select
var compositeEl = Ext.select('#myTable tr');
compositeEl.setHeight(25);
You can see how much easier it is to work with Ext.dom.CompositeElement.
Edit 2: Ext JS supports the concept of alternate class names. Think of them as shortcuts for commonly used classes. Ext.Element is the alternate class name for Ext.dom.Element and can be used interchangeably.
Ext.fx.Anim is a class representing an animation. Usually not used directly, it is created behind the scenes when performing animations on elements or components. For example, the first parameter of Ext.Component#hide is the animation target.
I'm creating a "wrapper" widget which is essentially a way of creating a custom widget rather than extending a certain widget.
I want to modify the params passed in the constructor
Example:
constructor : function(params) {
// do stuff
params['id'] += '-container';
}
The problem is that in the next step of the _Widget lifecycle, create or postMixInProperties, the id will be back to it's originally passed in value...
EDIT:
I'm trying to modify the given id for the parent widget which will be a "container" of multiple other widgets. I want to use the given id on one of those specific child widgets. By the time the widget lifcycle gets to postCreate the dijit has already been registered.
Alternatively if I can't modify the params from the constructor, what would be a good way to override the create method to modify the arguments and call the remaining functions in the lifecycle?
I am not getting that how to differentiate same element name for eg City,Area in two different trees. So help me for this in parsing the same element name in iphone.
<Contacts id="1">
<Fname>Siddharth</Lname>
<Lname>Chopra</Lname>
<Currentaddress>
<Area>Aundh</Area>
<City>Pune</City>
<Phone>8796xxxx</Phone>
</Currentaddress>
<Permanentaddress>
<Area>Bhatar</Area>
<City>Surat</City>
<Phone>989825xxxx</Phone>
</Permanentaddress>
</Contacts>
In your class create an mutable array, that you'll use as a stack.
if a new element starts, create a object representing it (a custom (managed) object, or a dictionary) and add it to the array. In didFoundCharacter: alter the object, that is last on the array. If didEndElement: is called, save it either to core data, a file, sql or in memory to another array. and remove it from the array.
If the elements <Area>,<City> or <Phone>are handled, you'll know, that the object on the second last position is the address, they belong to. either <Currentaddress> or <Permanetaddress>.
You have to set a flag in didstartElement, the value of the flag will let you know, which parent tree is under parsing process.