Sencha Touch 1.1 Lists, Store, "animating" store updates in the view (fade/blink in) - sencha-touch

When I update the store using storeObj.insert(modelObj) the List-panel updates itself, as it should. However, Id like to see the newly added item "animate" when it appears in the view. Is there a way to accomplish this?

In your model, have an extra field called newItem. So your model will be:
Ext.regModel('Product', {
fields: [
**{name: 'newItem', type: 'boolean'},**
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'price', type: 'float'},
{name: 'image_url', type: 'string'},
{name: 'in_stock', type: 'boolean'}
]
});
When you insert item into store with
storeObj.insert(modelObj)
you must have modelObj.newItem=true before inserting.
Also, before inserting any new item in, you have to mark all the old items as "NOT NEW". For that you may have to use a dummystore.
Now use EXt.xTemplate like following: (for your Ext.List)
itemTpl: '<tpl for=".">'
+ '<tpl if="newItem==1">'
+ ' <p color="red"> this item is new</p></tpl>'
+ '<tpl else >
+ ' this item is old</tpl>'
+ '</tpl>',

Related

Data is not sorting properly on page load

I am having trouble sorting a data table on entry. My code:
$('#CommentsOnAuthors').DataTable({
ajax: {
url: '/authors_comments',
data: {
author_id: "#{author_id}",
book_id: "#{book_id}"
}
},
columns: [
{title: 'Date', data: 'created_at', type: 'date'},
{title: 'Book', data: 'book'},
{title: 'Author', data: 'author'},
{title: 'Comment', data: 'comment'}
],
order: [[1, 'desc']]
});
However, when the page loads, the second column (Book) is sorted in ascending order (and the down arrow for that column is bolded), not the first. If I click on the arrow of the first column (Date), it sorts it properly. I believe I am following the documentation. I would like the table to load, sorted by Date, in descending order. Any ideas?
The columns are zero-based, like arrays. So if you want to sort by the date you need to do
order: [[0, 'desc']]

Q: How to display radio horizontally and not vertically on Circuit

I am sending a form to Circuit. But I would like the radio buttons to be displayed horizontally and no vertical.
... form.controls.push({
type: 'LABEL',
text: '<b>' + intents + '</b>'
},{
name: intents,
type: 'RADIO',
options: [
{text:'1', value:'1'},
{text:'2', value:'2'},
{text:'3', value:'3'},
{text:'4', value:'4'},
{text:'5', value:'5'}
]
}) ...
That is not supported to keep the visual design simple and predictable.

Populate data with custom function

How can I add custom filter options AND all the other data to a custom function?
Below is my code. I would like to have Yes and No filters, but also filters for all the other values in the column.
{column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},
You should use the append_data_to_table_data option for your filter
From docs:
append_data_to_table_data
Required: false
Type: string
Default value: undefined
Possible values: before / sorted
Description: Use 'before' to place your data array before the values that yadcf grabs from the table
use 'sorted' to place the data array sorted along with the values that yadcf grabs from the table
Note: 'sorted' option will have affect only if you data is an array of primitives (not objects)
So eventually your code will look like this
{
append_data_to_table_data: 'before',
column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},

What is Datastructure of LazyTreeGridStoreModel?

I am working with LazyTreeGridStoreModel .
And need to form a json datastructure with child parent relationship that can support LazyTreeGridStoreModel.
I saw the sample given in the dojo site but couldn't find the relationship between parent child.The below sample provided on dojo site.
data = {
identifier: 'id',
label: 'name',
items: [
{id: 'AF', name:'Africa', children: true},
{id: 'EG', name:'Egypt' , children: false},
{id: 'KE', name:'Kenya',
children:[
{id: 'Nairobi', name:'Nairobi', type:'city'},
{id: 'Mombasa', name:'Mombasa', type:'city'}
]
},
...
]
}
Where i can declare the children of
{id: 'AF', name:'Africa', children: true},
Abhisek
You will need to implement the mechanism in your JSON data and in your datastore.
Typically, an attribute is added to the JSON data to indicate the parent-id.
For example:
{id: 'EG', name:'Egypt' , children: false, '$ref': 'AF'}
Here '$ref' is referring to the parent's id for this child.
The LazyTreeGridStoreModel will call store.fetch() with a query object {parentId: value} and you can extend your store (QRS for example) and implement isItemLoaded(), loadItem(), and getValues() to return the children items appropriate for your data
The following URL has a nice example on how to implement this with queryreadstore:
http://www.ibm.com/developerworks/web/library/wa-dojotreegrid/index.html
Also see:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_treegrid_model_lazy.html
View the source to see how the children in the JSON data are using a "$ref" attribute to indicate their parent

Adding new node to Dijit.Tree at a particular place in the tree

I am running into a strange error while adding a new Tree node to dijit.Tree.
var rawdata = [{
label: 'Date',
id: '1',
children: [{
label: 'Life',
id: '1.1'
}, {
label: 'Liberty',
id: '1.2'
}]
}, {
label: 'Some links (note: the link is <b>not</b> clickable)',
id: '2',
children: [{
id: '2.1',
label: 'Dojo Toolkit'
}, {
id: '2.2',
label: '<img src="http://dojofoundation.org/media/img/dojo.logo.png" alt="greatest ever" height="32px" />'
}, {
id: '2.3',
label: 'my blog'
}]
}];
var store = new dojo.data.ItemFileWriteStore({
data: {
identifier: 'id',
label: 'label',
items: rawdata
}
});
And in order to add item to the tree, I am using the following:
store.newItem({id:'3', label:"New tree node label"});
However, this only seems to work for the first time I add an item to the tree. When trying to add a second item, I get an Error: assertion failed in ItemFileWriteStore ?
Also, currently the node is added at the very first level in the tree. How could I add it in one of the subtree, say the second tree with id:2 ?
Thanks!
The assertion error may be due to having conflicting id values. Is the second item added with a different id than the first?
If you add an item to the store it will be added at top level, unless you add the item to one of the children arrays - the tree has to know where to put the item, if you add it to a store it assumes (correctly) that it is a top level item. If you add the new item as a child of an existing item, then again, the tree knows where it should go.