I'm using a NestedList with a underlying TreeStore. Now I want to add items to the NestedList as leafs.
How can I do this?
Currently my code (Controller, onAddButtonTapped) looks like this:
var store = Ext.getStore('menuStore');
var customerAreaNode = store.getRoot().getChildAt(1);
customerAreaNode.appendChild({name: "text", leaf:true});
customerAreaNode.expand();
store.sync();
This code results in two new empty listentries on leaf level (behind the correct node) and one new listentry on node level.
Every new entry has no names shown in the NestedList but every item contains "text" in their name field. Curiously one of the new entries at leaf level is not typed to the underlying Model. So the model-corresponding methods could't be found:
Uncaught TypeError: Cannot call method 'getSelectedName' of undefined
Does anybody know a easy tutorial how to add data into NestedList/TreeStore? I could not find one good example in the sencha touch docs.
The default display field for leaf items is "text". You can get the information from here. If you want to use "text" as display field, then you need to change this line to
customerAreaNode.appendChild({text: "text", leaf:true});
Or you can change your nested list's display field, so your model do not need to change for this time.
yournestedlist.setDisplayField('name');
Hope this helps.
In my case i used to update root and child nodes like the following way
Ext.getStore('Contactsstore').getAt(1).getChildAt(0).set('Email',contactemail);
Ext.getStore('Contactsstore').getAt(1).set('ContactTitle',contacttitle);
Related
I have a Vue instance whose data contains an array of objects. I display this data in a table without issue.
Upon clicking the table rows, I set a "selected" property on the corresponding data object using:
key.$set('testing', testing);
Upon setting this value, I add a custom css class the the table row, without issue.
However, if I do a simple output of the entire array of objects at the bottom of the page (such as below), it doesn't get updated to reflect the new "testing" attribute I have added.
{{ gridData | json }}
I was able to reproduce my question using some modified vue.js example code in this JSFiddle:
https://jsfiddle.net/wdmatl/531axrtt/
Notice when you click on rows of data, you either see "testing" or "not testing". But this new object data isn't reflected in the json at the bottom of the page. Why not?
I have a scrollableView with several views inside and I'd like to add item to some of these view if they meet a certain criteria, like if they have data attached or not. Also I'm using Alloy, here's my markup
<ScrollableView id="scrollableView">
<View id="view" class='coolView'></View>
...
</ScrollableView>
To know if there are data attached I check the currentPage attribute like so:
function updateCurrentView(e) {
currentView = e.currentPage;
}
But I have no idea how to add an item to the current View.
Edit: To add some clarification, I have a label which when clicked allow me to choose two currencies, when chosen these currency pairs are saved in the database and should be displayed instead of the label. So my guess was to check whether the current view has currency pair saved.
There are 2 things to take care of here:
1.Whenever a currency is selected,immediately label on that particular view will change.
2.Whenever the scrollableView is loaded,it must always refer to the database if a currency is selected.
First one can be done as:
1.Get the instance of scrollableView using the getView method of alloy controller.Pass the id of the scrollableView to it.Lets call it myScrollableView.Refer this for more info.
http://docs.appcelerator.com/titanium/latest/#!/api/Alloy.Controller
2.Use var currentView=myScrollableView.getCurrentPage() to the get the current page which will be a number.
3.Now use the scrollableView instance to get all the views.
var viewArray=myScrollableView.getViews();
4.viewArray[currentView] will give you the view of current page.After you have got the view you can change the desired label using:
viewArray[currentView].children[positionOfTheView]
The "positionOfTheView" can be obtained by printing the viewArray[i].children array using Ti.API.info.
Second thing can be accomplished as follows:
1.Get the instance of scrollableView using the getView method of alloy controller.Pass the id of the scrollableView to it.Lets call it myScrollableView.Refer this for more info.
http://docs.appcelerator.com/titanium/latest/#!/api/Alloy.Controller
2.Now use the scrollableView instance to get all the views.
var viewArray=myScrollableView.getViews();
3.This is a JavaScript array of all the views in the scrollableView. Now iterate through this array and according to the data in the database,change the concerned view using:
viewArray[i].children[positionOfTheView]
The "positionOfTheView" can be obtained by printing the viewArray[i].children array using Ti.API.info.
I've scoured the dojo documentation, stack overflow, as well as thoroughly explored the EnhancedGrid object itself with firebug, and I'm not finding answers.
I have an enhanced grid that I populate with values for the user to sort on and basically create a selection set (using indirectSelection plugin). They then have a button to zoom to the selected items on a map.
The problem is, when sorting columns, it doesn't change the order of the items in the store itself, where I'm keeping an object inside each item that tells me how to zoom on the map, so I have no way to reconcile the grid.selection.selected array indices with the store._arrayOfAllItems indices.
edit: Note that I'm stuck using Dojo 1.6 as it's baked into the API I'm using.
Have a look at Dojo Object Store Tutorial.
You can set an idProperty to a Store, e.g.:
var employeeStore = new dojo.store.Memory({data:employees, idProperty: "name"});
Then you can operate the store with that id property using the get method like this:
// add a new employee
employeeStore.add({name:"George", department:"accounting"});
// remove Bill
employeeStore.remove("Bill");
// retrieve object with the name "Jim"
var jim = employeeStore.get("Jim");
Instead of using store._arrayOfAllItems. That way your grid.selection object will contain your id's values instead of array indexes (provided that your grid's store property is your store). This is the part that I'm guessing will work because I know for sure that the new dojo's dgrid does it that way, which I encourage you to use it BTW.
Hope it helps,
I am trying to add children tree nodes to a non-Root node dynamically when it's selected.
This is how I implemented it:
First, I populate my tree with a TreeStore then to dynamically add children tree nodes, I handle it on the itemexpand event in tree Controller.
//pThis is a NodeInterface obj of the selected node
itemexpand: function (pThis, pEOpts) {
//type is an attribute that I added so that I know what type of node that got selected
if (pThis.raw.type === 'Staff' && !pThis.hasChildNodes()) {
var staffNodeAry = [{text:"Teachers", type:"ChildStaff", leaf: false},
{text:"Principals", type:"ChildStaff", leaf: false}];
pThis.appendChild(staffNodeAry);
}
}
This worked quite good because I am able to see both "Teachers" and "Principals" node under "Staff" type but there are 2 issues that I found so far:
1) There's this error on the console:
Uncaught TypeError: Cannot read property 'internalId' of undefined
I don't know why but if anyone could enlighten that would be great.
2) When I expand either "Teachers" and "Principals", the NodeInterface obj that's returned by itemexpand has an undefined raw object.
So I couldn't do this: pThis.raw.type
From my understanding, I don't need to create a new TreeStore to add any new children nodes, I thought that by creating an array of objects that adhere to NodeInterface should be enough but I might be wrong.
If anyone could point me to the right direction, that would be great.
Handi
More info:
What I did was actually following the ExtJs 4 documentation so I believe this is a bug on ExtJs 4 framework.
I also tested this with Extjs-4.1.0-rc3 and it also produced the same error.
I have resolved this issue changing the event itemexpand with the event afteritemexpand. I have no documentation to justify this. The debugger says to me that the view listen for the itemexpand event and do something that goes wrong if add a node manually...
For the question number 2: you have no raw object because it is created by the reader of the store after the load operation. So if you add a node by hand the raw object does not exists.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-property-raw
The documentation for .appendChild() functions says:
node : Ext.data.NodeInterface/Ext.data.NodeInterface[]
The node or Array of nodes to append
And you are trying to append an array of 2 objects, but they are not "NodeInterface" instances. So you should create them properly like so:
var nodeToAppend1 = pThis.createNode({text:"Teachers", type:"ChildStaff", leaf: false});
pThis.appendChild(nodeToAppend1);
I remember making the same mistake a year ago, so I hope this helps.
I think it happens because your Ext.TreePanel working asyncroniously. So add process is:
Append Child, add virtual child leaf to your tree, with red mark in corner
Call store's create api
Receive response, if it success=true, change with virtual
The goal of changing is set internakId property, so you can add new child only after this change happens. I think better is write some recursive function and bind it to store's added event
tree.getStore().on('update', addChild);
or
tree.getStore().load({
success: function() {
addChild()
});
I want to add a new node to a dijit.ree as a sibling of the currently selected node. I've found sample code (I'm new to dojo) that adds a new item to the tree using the newItem method of ItemFileWriteStore, but the new item always appears at the bottom of the tree. How would I add to the store at a specified position, in particular the position corresponding to the current selection? Pointers to sample code would be welcome :)
Thanks,
Larry
You need to find the parent item of current selected node and use that item as the parent of the newly created item.
store.newItem(itemObj, {parent : parentItem, attribute : children});
Normally an item in the store doesn't have a back pointer points to its parent. So you may need to maintain that yourself. For example, you can store the parent item's id in the child item and use fetchItemByIdentity to get the parent item.
I figured it out; here's the answer for future searchers. Use newItem as Alex suggested. Then use model.pasteItem to reposition the new item. pasteItem takes a parent (selectedNode.item.parent[0]) and a position (selectedNode.getIndexInParent()+1)
Larry
store.newItem is giving an error (Uncaught Error: dojo.data.ItemFileReadStore: Invalid attribute argument. ). Could not really find a fix for this so far and my store does not have duplicate id's.
Hence i tried using model.newItem(newItem, parentItem).
This works perfectly alright.
Thanks,
Srilatha.