1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    26
    Vote Rating
    0
    achapman is on a distinguished road

      0  

    Default Is it possible to pinch and zoom a panel or a picture in the html of a panel?

    Is it possible to pinch and zoom a panel or a picture in the html of a panel?


    I tried using the pinch example, but I am pretty new to javascript and I am having some trouble trying to get pinch to work on a panel with a picture in its html.

    Does anyone have any examples that could help me out?

    Thanks.

  2. #2
    Ext User
    Join Date
    Jul 2010
    Posts
    26
    Vote Rating
    0
    achapman is on a distinguished road

      0  

    Default


    Anyone?

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    Ext.setup({
        onReady: function(){
            var img = Ext.getBody().createChild({
                tag: 'img',
                src: 'http://www.sencha.com/assets/images/logo-sencha-sm.png',
                style: 'width: 400px; height: 400px;'
            });
            
            img.on('pinch', function(e){
                var dimensions = img.getSize(),
                    factor = 5;
                if(e.deltaScale < 0){
                    factor *= -1;
                }
                img.setSize(dimensions.width + factor, dimensions.height + factor);
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    26
    Vote Rating
    0
    achapman is on a distinguished road

      0  

    Default


    I got that code working, but it places the image behind everything in my app. Is there a way to add the image to only a specific panel?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It was only intended to be an example, just grab the appropriate image element, for example:

    Code:
    myPanel.body.child('img.foo');
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    Jul 2010
    Posts
    26
    Vote Rating
    0
    achapman is on a distinguished road

      0  

    Default


    Ok, gotcha. Thanks.

  7. #7
    Ext User
    Join Date
    Jul 2010
    Posts
    26
    Vote Rating
    0
    achapman is on a distinguished road

      0  

    Default


    Sorry, I am starting to feel really stupid about this, but the image I have is being added to a panel dynamically by using an html img tag. I can't seem to get the myPanel.body.child('img.foo'); code to see it.

    I tried creating an Image object with the picture and tried to set the pinch event, but I get an undefined error.

    So basically, I have a panel, mypanel, that on a button click I add image.png to the panel

    Code:
    mypanel.add({
        html: '<img src="image.png"></img>'
    });
    And I want to be able to pinch and scroll this image. Should I be doing this a different way?

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Are you familiar with css selectors? Basically what the above code was doing was finding an image in the body of the panel with a class name of foo.

    With your code:

    Code:
    mypanel.body.child('img').on(....);
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Ext User
    Join Date
    Jul 2010
    Posts
    26
    Vote Rating
    0
    achapman is on a distinguished road

      0  

    Default


    When that line of code runs, I get an 'undefined' error. I guess it can't find the img in the panel. I tried this code before and after the mypanel.doLayout() line, but it fails either way.

    Here is simple version of what I am doing. The pinch code is in the makeGraph function.

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function(){
          
            var getWellData = function(){  
           
       if (Ext.getCmp('wellsList').getValue() == 0) {
        alert("Please select a well");
       }
       else {     
        var carousel = Ext.getCmp('carousel'), 
         temp = '0~0~1~2~3', 
         seperatedString = temp.split("~"), 
         i = 2, 
         len = seperatedString.length, 
         myAnswer, 
         card;
        
        carousel.removeAll();
        
        if (len < 2) { //bad return
         carousel.add({
          title: 'Card 1',
          html: 'Error',
          scroll: 'vertical'
         });
        } else {
         for (; i < len; i++) {
          myAnswer = seperatedString[i];
          
          if (i > 2) {
           carousel.add({
            dockedItems: [{
             dock: 'top',
             xtype: 'toolbar',
             ui: 'dark',
             items: [{
              text: 'Back',
              ui: 'back',
              maxWidth: '80',
              handler: backToMain
             },{
              xtype: 'spacer'
             },{
              text: 'Graph',
              handler: showGraph
             }],
            }],
            id: 'card' + i,
            title: 'Card ' + i,
            scroll: 'vertical',
            html: "<ul><li>" + myAnswer + "</li></ul>"
           });
          } else {
           carousel.add({
            dockedItems: [{
             dock: 'top',
             xtype: 'toolbar',
             ui: 'dark',
             items: [{
              text: 'Back',
              ui: 'back',
              handler: backToMain
             }],
            }],
            title: 'Card ' + i,
            scroll: 'vertical',
            html: "<ul><li>" + myAnswer + "</li></ul>"
           });
          }
         }
        }
        
        Ext.getCmp('mainNav').setCard(1);
        carousel.doLayout();
        carousel.setCard(0);
       }
            };
      
      var makeGraph = function(tableNum) {
       try {     
        var graph = Ext.getCmp('graph');
        
        graph.removeAll();
        
        graph.add({
         title: 'Graph',
         html: "<img alt='loading graph' width=100% style='padding:10px 10px 10px 10px;' src='chart.png'></img><br />"
        });
        
        graph.body.child('img').on({
         pinchstart : function(e, t) {
          this.startScale = this.scale;
         },
        
         pinch : function(e, t) {
          this.scale = e.scale * this.startScale;
          t.style.webkitTransform = 'scale(' + this.scale + ')';
         },
        
         scope: {scale: 1}
        });
        
        graph.doLayout();    
      
        Ext.getCmp('mainNav').setCard(2);
       }
       catch (err)
       {
        alert("Error graphing: " + err.description);
       }   
      };
            
            var backToMain = function(){
                mainNav.setCard(0);
            };
            
            var backToData = function(){
                mainNav.setCard(1);
            };
      
      var showGraph = function() {    
       //get the current card number
       var temp = Ext.getCmp('carousel').getActiveItem().id.replace("card","");
       makeGraph(temp - 2); 
            };
              
            var mainNav = new Ext.Panel({
                id: 'mainNav',
                fullscreen: true,
                layout: 'card',
                items: [{
                    xtype: 'form',
                    items: [{
                        xtype: 'fieldset',
                        title: 'Select an Item',
                        items: [{
                            xtype: 'select',
                            id: 'wellsList',
                            name: 'wellsList',
                            options: [{
           text: "test", value: "1"
          }]
                        }]
                    }, {
                        xtype: 'button',
                        text: 'Submit',
                        maxHeight: '40',
                        ui: 'round',
                        handler: getWellData
                    }]
                }, {
                    xtype: 'carousel',
                    id: 'carousel'
                }, {
        xtype: 'panel',
        scroll: 'vertical',
        dockedItems: [{
         title: 'Emit',
         dock: 'top',
         xtype: 'toolbar',
         ui: 'dark',
         items: [{
          text: 'Back',
          ui: 'back',
          handler: backToData
         }],
        }],
        items: [{
         xtype: 'panel',
         id: 'graph',
         html: "<div id='picture'></div>"
        }]
       }]
            });
        }
    });

  10. #10
    Ext User
    Join Date
    Jul 2010
    Posts
    26
    Vote Rating
    0
    achapman is on a distinguished road

      0  

    Default


    Any ideas?

Similar Threads

  1. Replies: 3
    Last Post: 26 Jan 2012, 3:48 AM
  2. Pinch to Zoom
    By tobinharris in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 19 Jul 2011, 4:14 AM
  3. Help me! overlap ---menu and panel, see the picture
    By doyourbest in forum Ext 2.x: Help & Discussion
    Replies: 11
    Last Post: 8 Mar 2009, 11:45 PM

Thread Participants: 3