I am trying to zoom on a Panel with HTML inside of it.
Ext.define('Sencha.view.Detail_content', {
extend: 'Ext.Panel',
xtype: 'detailcontenttpl',
config: {
layout: { type: "fit" },
scrollable: true,
styleHtmlContent: true,
id: 'detail_content_wrap',
tpl : [
"<p class='detail_contentDate'>{date}</p>",
"<div class='messageWrap'>{message}</div>"
],
listeners: {
pinchstart: {
element: 'innerElement',
fn: function(e, t) {
this.startScale = e.scale;
}
},
pinch: {
element: 'innerElement',
fn: function(e, t) {
e.preventDefault();
this.scale = e.scale * this.startScale;
var p = t.parentNode;
Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')');
}
}
}
}
});
It kind of works, but doesn't work as intended. It breaks the scroller, and it doesn't work all the time.
I am thinking Ext.fly(p).setStyle('-webkit-transform', 'scale('+this.scale+')'); should be set on something else, but I have tried every parent element, still failed.
I understand there are some examples available, but most of them deal with images, not Panel with HTML.
What am I doing wrong?
Related
I am new to sencha touch. I am creating a app in which i am using a html . When that span is clicked a function in controller should be called . I have attached the view and controller with this question.
View
Ext.define('SlideNav.view.Viewport', {
extend: 'Ext.Container',
xtype: 'app_viewport',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
layout: 'hbox',
items : [
{
docked: 'top',
xtype: 'panel',
height: 40,
style:'background:white ;height:40px;color:black',
items:[
{
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}
],
listeners: {
initialize:function(){
this.fireEvent('onPopulateDashBoardData', this);
}
/* tap: {
fn: function(event, el){ console.log("tapped!");
this.fireEvent('onPopulateDashBoardData', this);
},
element: 'element',
delegate: '#TopNews'
}*/
}
},
{
xtype : 'main',
cls: 'slide',
// Needed to fit the whole content
width: '100%'
}, {
xtype : 'navigation',
width : 250
}]
}
});
controller.js
Ext.define('SlideNav.controller.App',{
extend: 'Ext.app.Controller',
config:{
refs:{
app_viewport: 'app_viewport',
main : 'main',
navigation : 'navigation',
navBtn : 'button[name="nav_btn"]',
},
control : {
app_viewport:{
onPopulateDashBoardData:'toggleNav'
},
navBtn : {
tap : 'toggleNav'
},
navigation : {
itemtap : function(list, index, target, record){
this.toggleNav();
console.log(record);
alert(record._data.title);
}
}
}
},
/**
* Toggle the slide navogation view
*/
toggleNav : function(){
var me = this,
mainEl = me.getMain().element;
console.log('hai');
if (mainEl.hasCls('out')) {
mainEl.removeCls('out').addCls('in');
me.getMain().setMasked(false);
} else {
mainEl.removeCls('in').addCls('out');
me.getMain().setMasked(true);
}
}
});
In the above question , i want to click a text with id TopNews from and want to call a function toggleNav in controller. I tried to fire a event with the name onPopulateDashBoardData and tried to use that event in the controller. But it is also not working . What should you know.
The way you are referring the text is wrong.
Do this:-
items:[{
name: 'top_news', // add this name for referring
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}]
Controller:-
refs:{
menu: container[name='top_news']
},
control : {
menu : {
initialize: function(container) {
container.element.on({
tap: 'toggleNav',
scope: this,
delegate: '#TopNews'
});
}
}
}
I am currently setting view titles in a sencha touch 2 view like so:
initialize: function() {
this.callParent();
var translator = Ext.create('MyApp.util.Translation');
this.config.title = translator.translateData('pagetitle.detail');
}
The translation class just looks up a string from a javascript object based ont the key provided in the translator.translateData function.
With this approach when the view has loaded the title shifts slightly to right (40 px or so).
I have also tried placing this in a view listener activate with similar results.
What is the correct method for dynamically setting a view title in ST2?
You can do this way via the Controller
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
titlebar: {
autoCreate: true,
selector: '#mytitlebar',
xtype: 'titlebar'
}
},
control: {
"titlebar#mytitlebar": {
initialize: 'onTitlebarInitialize'
}
}
},
onTitlebarInitialize: function(component, options) {
var me = this;
me.getTitlebar().setTitle("Second Title");
// OR IN YOUR CASE:
var translator = Ext.create('MyApp.util.Translation');
me.getTitlebar().setTitle(translator.translateData('pagetitle.detail'));
}
});
Views:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
itemId: 'mytitlebar',
title: 'First Title'
}
]
}
});
i have four separete view, adding these four view in single tabview as shown below.
Tab View Code:
Ext.define("SLS.BRND.WEB.view.MainTabbarView", {
extend: 'Ext.tab.Panel',
xtype: 'MainTabbarView',
requires: ['Ext.data.proxy.JsonP', 'Ext.TitleBar', 'Ext.Video', 'SLS.BRND.WEB.view.GallerysView', 'SLS.BRND.WEB.view.FloorView'],
config: {
tabBarPosition: 'bottom',
items: [
{
xclass: "SLS.BRND.WEB.view.GlobalNavigationView",
docked: "top",
scrollable: false
},
{
xclass: 'SLS.BRND.WEB.view.ApartmentView'
},
{
xclass: 'SLS.BRND.WEB.view.SpecificationView'
},
{
xclass: 'SLS.BRND.WEB.view.FloorView'
},
{
xclass: 'SLS.BRND.WEB.view.GallerysView'
}
]
}
});
In controller onbuttontap function i am calling above 'MainTabbarView' page as shown below. i have set setActiveItem(0); to display first tabitem among four i.e (xclass: 'SLS.BRND.WEB.view.ApartmentView'). when i set like this setActiveItem(0) it will dispaly first view page but without data(blank screen).if i set like this setActiveItem(1), it will dispaly second view page with data. then i thought may be problem in first page, so i have changed order of page view in 'MainTabbarView'. again i set setActiveItem(0) then it showing active page but without data. i have keep on changed setActiveItem(0) to 1,2,3 its working fine and also data displaying. but for the setActiveItem(0) data is not displaying. can any help me . how to resolve this issue. thank you
Controller Code :
Ext.define("SLS.BRND.WEB.controller.ApartmentController", {
extend: "Ext.app.Controller",
requires: ['Ext.data.proxy.JsonP'],
config: {
refs: {
projectsPage: "projectspage",
mainTabbarView: "MainTabbarView",
},
control: {
projectsPage: {
BtnApartments: "onAptButtonTap"
}
}
},
onAptButtonTap: function () {
var ApartmentTabbar = this.getMainTabbarView();
ApartmentTabbar.setActiveItem(0);
Ext.Viewport.animateActiveItem(ApartmentTabbar, this.slideLeftTransition);
},
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getHomepage(), this.slideRightTransition);
},
slideRightTransition: { type: 'slide', direction: 'right' },
slideDownTransition: { type: 'flip', direction: 'down' },
slideLeftTransition: { type: 'fade', direction: 'left' }
});
Your onAptButtonTap function is not in the right place, you put it in the config as you should put it after the config like so :
...
config: {
refs: {
projectsPage: "projectspage",
mainTabbarView: "MainTabbarView",
},
control: {
projectsPage: {
BtnApartments: "onAptButtonTap"
}
},
...
},
onAptButtonTap: function () {
var ApartmentTabbar = this.getMainTabbarView();
ApartmentTabbar.setActiveItem(0);
Ext.Viewport.animateActiveItem(ApartmentTabbar, this.slideLeftTransition);
},
...
The view doesnt render properly . It only shows the button . What am i doing wrong here ?
Ext.application({
name: 'App',
models: ['Picture'],
stores: ['Pictures'],
views: ['Picture'],
requires: [
'Ext.carousel.Carousel',
'Ext.data.proxy.JsonP'
],
launch: function() {
var titleVisible = false,
info, carousel;
carousel = Ext.create('Ext.Carousel', {
store: 'Pictures',
direction: 'horizontal',
listeners: {
activeitemchange: function(carousel, item) {
info.setHtml(item.getPicture().get('title'));
}
}
});
info = Ext.create('Ext.Component', {
cls: 'apod-title',
top: '50',
left: 0,
right: 0
});
var view = Ext.create('Ext.NavigationView', {
title:'Paramore',
items: [carousel,info,{xtype:'button',text:'help'}]
});
Ext.Viewport.add(view);
--- some code ----
});
}
});
.I also tried this
var view = Ext.create('Ext.NavigationView', {
title:'Test',
items : [
{
xtype : 'container',
title : 'test',
scrollable : 'vertical',
items : [carousel,info]
}
There are a few issues with your code:
Ext.Carousel does not support the store configuration. You can learn how to do this here.
The items specified in a navigation view is the initial stack of items when released. So if you put in 3 items, the last item will be visible and the Back button will be visible. When you press the back button, it will remove that last item and there will be 2 items in the items stack.
You probably shouldn't put a Ext.Button directly inside a NavigationView. Doing this will make the button stretch to the size of the NavigationView, making it look pretty bad.
If you remove the reference to a store and listeners from your Carousel, your example works as expected. Here is the code I used to make it work. I just commented out broken code:
Ext.application({
name: 'App',
// models: ['Picture'],
// stores: ['Pictures'],
// views: ['Picture'],
requires: ['Ext.carousel.Carousel', 'Ext.data.proxy.JsonP'],
launch: function() {
var titleVisible = false,
info, carousel;
carousel = Ext.create('Ext.Carousel', {
// store: 'Pictures',
direction: 'horizontal',
items: [{
html: 'one'
}, {
html: 'two'
}, {
html: 'three'
}]
// listeners: {
// activeitemchange: function(carousel, item) {
// // info.setHtml(item.getPicture().get('title'));
// }
// }
});
info = Ext.create('Ext.Component', {
cls: 'apod-title',
top: '50',
left: 0,
right: 0
});
var view = Ext.create('Ext.NavigationView', {
title: 'Paramore',
items: [carousel, info,
{
xtype: 'button',
text: 'help'
}]
});
Ext.Viewport.add(view);
}
});
Please check the code below, what I am doing wrong? I want to output to console when tap event on body.
Ext.define('iApp.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginViewPanel',
config: {
style: "background-color: #3f3f3f;",
html: 'hello world',
listeners: {
el: {
tap: function() {
console.log('tapped');
}
}
}
}
});
no output to console...
You are using an old version of adding an element listener.
If you use the compat version fo Sencha Touch 2, it should give you a warning in the console like this:
So your code should look something like this:
Ext.define('iApp.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginViewPanel',
config: {
style: "background-color: #3f3f3f;",
html: 'hello world',
listeners: {
tap: {
element: 'element',
fn: function() {
console.log('tapped');
}
}
}
}
});
You can find out more information about the changes on the Sencha Forums.
Update
If you want to delegate to a child of the item, you must still target element, and then within your function check if the tapped element is the one you want:
var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
tap: {
element: 'element',
fn: function(e) {
var element = Ext.get(e.target);
if (element.id == "test") {
alert('tap!');
}
}
}
}
});
If you want to select an element by class or id, it's cleaner to use the delegate option:
var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
tap: {
element: 'element',
delegate: '#test',
fn: function(e) {
alert('Element with id "test" was tapped!');
}
}
}
});
Ext.define('app.view.Card', {
config : {
layout : 'card',
items : [{
xtype : 'panel',
docked : 'top',
html : "<img width='320px' id='image1' src='images/im.jpg'/>",
listeners : {
touchstart : {
element : 'element',
fn : function() {
console.log('tapped')
}
}
}
}]
},
initialize : function() {
// if recording/handling the event in the controller.
this.relayEvents(this.element, ['tap']);
}
});
A simpler and cleaner way of getting Tappable Panels
Ext.define('My.component.TappablePanel', {
extend: 'Ext.Panel',
initialize: function () {
this.element.on('tap', function(){
this.tap();
}, this);
},
tap: function() {
console.log('I heard the tap!');
}
});
And it can be overridden in child classes like so...
Ext.define('My.view.TestPanel', {
extend: 'My.component.TappablePanel',
config: {
html: 'Tap this panel',
style: 'background-color: #5E99CC'
},
tap: function() {
console.log('I handled the tap');
}
});