1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Answers
    4
    Vote Rating
    0
    clarose is on a distinguished road

      0  

    Default Unanswered: Expanding list item on itemtap event with an animation

    Unanswered: Expanding list item on itemtap event with an animation


    Hi,

    I have a list component in my Sencha Touch application for which I want to have the items expand (and show more info) when the user taps on them.
    I tried the solution provided in the following post on StackOverflow:

    http://stackoverflow.com/questions/8590966/is-it-possible-to-make-sencha-touch-2-0-list-component-to-have-its-items-expanda

    My item template is the following:

    //-----------------
    itemTpl: '<div class="plus"></div><div class="title">{contactName}\'s role is {contactTitle}</div><div class="detailsDivHide">{address}</div>'
    //-----------------

    But, my handler to animate the display of the details div does not work:
    //-----------------
    handleItemTap: function(dataview, index, item, e) {
    var el = item.select('div.detailsDivHide');
    Ext.Anim.run(el,'slide',{
    out:false,
    direction: 'down',
    from: 'detailsDivHide',
    to: 'detailsDivShow'
    });
    }
    //-----------------

    If I just to do the following:

    //-----------------
    handleItemTap: function(dataview, index, item, e) {
    var el = item.select('div.detailsDivHide');
    el.toggleCls('detailsDivHide'); //remove the hidden class if available..
    el.show(true);
    }
    //-----------------

    it works, but I do not get the animation.

    While debugging, I noticed that in the "Ext.Anim.run" method, we have the following code:

    Ext.Anim.run = function(el, anim, config) {
    if (el.isComponent) {
    el = el.el;
    }


    config = config || {};


    if (anim.isAnim) {
    anim.run(el, config);
    }
    else {
    if (Ext.isObject(anim)) {
    if (config.before && anim.before) {
    config.before = Ext.createInterceptor(config.before, anim.before, anim.scope);
    }
    if (config.after && anim.after) {
    config.after = Ext.createInterceptor(config.after, anim.after, anim.scope);
    }
    config = Ext.apply({}, config, anim);
    anim = anim.type;
    }


    if (!Ext.anims[anim]) {
    throw anim + ' is not a valid animation type.';
    }
    else {

    if (el && el.dom) {
    Ext.anims[anim].run(el, config);
    }

    }
    }
    };

    Now, the way I am calling the "Ext.Anim.run" method, I would assume that only this section should get executed:

    //-----------------
    if (el && el.dom) {
    Ext.anims[anim].run(el, config);
    }
    //-----------------

    But when inspecting my "el" object, I see that the "dom" property is "undefined", so the "Ext.anims[anim].run" method is never executed. But I do not understand why, since I am successfully getting the "Ext.dom.CompositeElementLite" object when calling:

    var el = item.select('div.detailsDivHide');

    So, I do not know if I am either doing something wrong when using the Anim class or if there is a bug in the Ext.Anim.run method.

    Does anyone have an idea how I can get my animation working ?
    I hope I was clear enough in my explanation.
    I am using ST2 PR3 btw.

    Thanks in advance for your help,
    Christian

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you change the height of the element you can use CSS3 to animate:

    Code:
    -webkit-transition : height 300ms ease-in;
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Answers
    4
    Vote Rating
    0
    clarose is on a distinguished road

      0  

    Default


    Thanks, I will try that, but this sounds like a workaround to the Ext.Anim.run method, is this correct ?
    Is this workaround because the Ext.Anim.run method does not work correctly currently or am I not using it correctly ?

    Thanks
    Christian

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just think it's simpler
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Answers
    4
    Vote Rating
    0
    clarose is on a distinguished road

      0  

    Default


    Ok, I tried your solution, but I still get the error that my "dom" property in my CompositeElementLite component is "undefined".

    Here is what I tried in my handler:

    handleItemTap: function(dataview, index, item, e) {
    var el = item.select('div.detailsDivHide');
    el.toggleCls('detailsDivHide');
    el.addCls('detailsDivShow');
    el.setHeight(50);
    }

    I get the "undefined" error at the line:
    el.addCls('detailsDivShow');

    In my CSS:

    .detailsDivHide {
    visibility: hidden;
    display: none;
    }

    .detailsDivShow {
    height: 0px;
    visibility: visible;
    display: inline;
    -webkit-transition : height 300ms ease-in;
    }

    Could you provide some code snippet with your proposed solution ?
    Thanks,
    Christian

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    Ext.create('Ext.dataview.List', {
        fullscreen: true,
        itemTpl: '<div>{from_user}</div><div>{text}</div>',
        store: {
            autoLoad: true,
            fields: ['from_user', 'text', 'profile_image_url'],
    
            proxy: {
                type: 'jsonp',
                url: 'http://search.twitter.com/search.json?q=Sencha Touch',
    
                reader: {
                    type: 'json',
                    root: 'results'
                }
            }
        },
        listeners : {
            itemtap : function(list, idx, el) {
                el.setHeight(200);
            }
        }
    });
    And have CSS:

    Code:
    .x-list-item {
        -webkit-transition : height 300ms ease-in;
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Answers
    4
    Vote Rating
    0
    clarose is on a distinguished road

      0  

    Default


    Thanks for this, it works, but I noticed an odd behavior.
    Let's say that my row height is 50px by default and when I tap/click on the row, I set the height to 75px in my handler. The problem is that the height does not animate from 50 to 75px but rather from 0 to 75px.

    Is there any way to fix this behavior in order to get something similar to the example here (which uses the width instead of height, but the idea is the same):
    http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4

    Thanks again for the quick response,
    Christian

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar