CODEWITHSUNDEEP
extjssencha-touch
user3603766
user3603766

Reputation: 25

How to call other view in Sencha Touch

How can I call a new view on image tap which is defined in tpl.

Code:

tpl: Ext.create('Ext.XTemplate','<tpl for="sample">',
           '<div> {tittle}</div>
    <div><a href="{link}"><img src="{photo}"/></a></div>',
            '</tpl>',

/////////////////////////////////////////

After your directions, I'm sure I have something wrong. I just want to know how to link an image to puncture it take you to another view. Let me explain better? Thank you very much for your time and dedication.

//MyController

Ext.define('DemoApp.controller.ControllerR', {
    extend: 'Ext.app.Controller',
        config: {
        refs: {
            res: 'res',

        },
        control: {
            'rest list': {
                itemtap: 'showR' },


        }
    },

          onCreateNewView: function() {
   if(document.getElementById('something')) {
      Ext.Viewport.setActiveItem(Ext.create('DemoApp.view.DetalTwo'));
   }
}, 


});

//My Template

Ext.define('DemoApp.view.ViewR', {
    extend: 'Ext.Panel',
    xtype: 'res',
    config: {
        title: 'Res',
        iconCls: 'info',
        scrollable: true,
        data: {
            res: [ model: 'DemoApp.model.ModelR',
                   autoLoad: true,
                   storeId: 'resStore',
        proxy: {
            type: 'ajax',
           url: 'data/res.json',
             reader: {

                type: 'json',
                rootProperty:'wha.res'     

            }
        }]


        },
       tpl: Ext.create('Ext.XTemplate','<tpl for="sample">',
           '<div> {tittle}</div>
    <div><img id="something "src="{photo}"/></div>',
            '</tpl>', 
            {
                join: function(value) {
                    return value.join(', ');
                }
            })
    }
});

Upvotes: 0

Views: 233

Answers (2)

Naitik
Naitik

Reputation: 105

First thing first... you should do some google before putting such question in Stack.Your Code is totally wrong as well as it contains major syntax errors. And we are not here to solve some stupid syntax errors.Anyways Let me explain something..

1.) In your controller you are trying to bind 'itemtap' event.You can only bind 'itemtap' event if there is a list in your view. Here, in your case there is no list.

2.) And in controller it's look like something this: 

refs: {
        imageList: '#imageList',
      },
      control: {
       'imageList': {
          itemtap: 'onCreateNewView'
        },
     }

3.) Create a list in your view:

config: {
      items: [
               {
                   xtype: 'list',
                   id: 'imageList',
                   itemId: 'imageList',
                   tpl:'Your tpl code'
               }
      ] 
   }

Upvotes: 0

Naitik
Naitik

Reputation: 105

You can give an id to image tag i.e. <img id = "something"/> and if tpl is defined for list then go to that list's handling function in controller or in view(where you defined a list and listeners) and write this code:

if(document.getElementById('Your img tag id')) {
    // create a view and active it
}

For Example: 

onCreateNewView: function() {
   if(document.getElementById('something')) {
      Ext.Viewport.setActiveItem(Ext.create('DemoApp.view.NewView'));
   }
}

Upvotes: 1

Related Questions