Question

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?

Answer 1

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>',