sencha-touch interview questions
Top sencha-touch frequently asked interview questions
We're evaluating Sencha Touch for mobile development. Has anyone used this yet (I realize that it's still in beta), and if so, what are its strengths / weaknesses? How does it compare to alternatives?
It certainly sounds compelling.
Thanks!
Source: (StackOverflow)
I wonder if I were to develop a mobile Web app (now, in two weeks, or in a month), which one should I go for? Which one would you mobile Web developers go for?
If jQM 1.0 were officially released today, I would most likely embrace it (as long as it actually delivers what it promises). Now that it is in alpha, I wonder whether it is worth to jump into it yet for a commercial grade project? Would Sencha Touch be a better alternative?
Source: (StackOverflow)
I read many documents regarding to Phonegap and Sencha Touch. But i still confused with these two.
I have already created one native android application. Now, i want to create same application which run on multiple device. So, i am confused with these two frameworks.
Which is the best one from these two to use and why ?
What is the difference between Phonegap and Sencha Touch ?
What is the difference between sencha touch and sencha touch
2 ?
Source: (StackOverflow)
My startup and I are deciding which mobile touch framework to use to build our mobile web application. I'm having trouble figuring out the difference between Sencha Touch and JQTouch. I understand that both products licensed by Sencha and that Sencha Touch requires a paid license to use it commercially. Besides legal and financial issues, what are the differences, pros and cons between both frameworks.
Thanks.
Source: (StackOverflow)
I found a great tutorial on creating an MVC App from Scratch using Sencha Touch V1.1 but unfortunately it isn't all that applicable to Sencha Touch V2. I want to learn the new/right way to build an MVC app moving forward with their latest framework.
I'm wondering if anyone knows of a good tutorial for building an MVC App using Sencha Touch V2.
Here's a list of places I've already looked.
- Official Docs
- Videos are outdated
- Examples don't show
source snippets, you have to "View Source" and try to wade through the compressed/minified versions of the library.
- Documentation doesn't describe MVC at all (just try searching for "mvc" in their search field... you'll come up empty handed)
- Google Advanced Search
- I tried narrowing down the results by looking for "Sencha Touch" "mvc" where the articles were posted in the last week.
- And of course sencha-touch-2 right here on StackOverflow.
- looks like as of this post, I'm the only person posting with that tag
Thanks in advance.
Source: (StackOverflow)
I have this controller:
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
config: {
},
refs: [
{
ref: 'first',
selector: '#first'
},
{
ref: 'second',
selector: '#second'
}
],
views : [
'TestMain',
'TestSecond'
],
init: function() {
this.getTestMainView().create();
this.control({
'#first': {
tap: function() {
//how do I go to second view here?
}
},
'#second': {
tap: function() {
}
}
});
}
});
and these 2 views:
Ext.define('MyApp.view.TestMain', {
extend: 'Ext.Container',
xtype: 'testmain',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'button',
ui: 'normal',
id: 'first',
text: 'Go To Second Screen',
handler: function() {
//how do I go to second view here?
}
}
]
}
});
...
Ext.define('MyApp.view.TestSecond', {
extend: 'Ext.Container',
xtype: 'testsecond',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
items: [
{
xtype: 'button',
ui: 'normal',
id: 'second',
text: 'Go To First Screen',
handler: function() {
}
}
]
}
});
I would like the second view to load when I click on first button and vice versa when I click on second button. It seems I can add code either in my button handler or in the control section - I would appreciate an example of both (unless they are the same) and maybe an explanation as to which method is best and why.
Note that I do NOT want to use card layout or tabpanel - I want to know how to switch from one standalone view to another (In my app I have a card panel and a tab pabel and I need to switch between both groups using buttons)
Thanks!!
Source: (StackOverflow)
I am looking for resources to develop HTML5 apps for iphone primarily. Are their frameworks and tools that I can use to get started? I am looking for:
- Javascript frameworks that help with UI layout
- Touch based controls for phones
- Articles on iphone development, best practices, etc.
I searched stackoverflow and was not able to come up with a good list of resources. I am looking for examples like these http://jqtouch.com/
Source: (StackOverflow)
I've got a pretty simple problem whose solution turns out not to be that simple at all.
I want to add images in front of each option of a selectfield. To be more accurate, I want to add images to the picker it triggers, and also to the selectfield's current value.
For the sake of simplicity, I'll create a little example:
Let's say, you want a user to choose between one of the four playing card suits Diamonds, Hearts, Spades and Clubs. To support visual recognition, you want to prepend the corresponding symbol to each suit name, so it could look something like this:
My first choice of a sencha touch component, that enables selecting from a given set of options naturally was selectfield. Unfortunately, it only seems to be able to display pure text, and nothing more. After digging into the sencha touch sources, I finally came up with half a solution. Basically, I pass the selectfield a custom defaultPhonePickerConfig, in which the corresponding picker(that is used by the selectfield to display the options) gets assigned a custom itemTpl. The itemTpl does the rest, namely adding some html to display the image:
defaultPhonePickerConfig: {
listeners: {
initialize: function() {
var slots = this.query('pickerslot');
Ext.each(slots, function(slot) {
slot.setItemTpl('<img src="someImage.jpg"> {text}');
});
},
change: function() {
// reconstruct the selectfield's change handler,
// since it gets overwritten
var iconSelect = Ext.Viewport.query('#IconSelect')[0];
iconSelect.onPickerChange.apply(iconSelect, arguments);
}
}
}
A working fiddle for this solution can be found here.
My solution isn't that bad, but there's a slight cosmetical problem, that's just not acceptable to me: The icons are only displayed in the picker (lower part of the screenshot above), but not the selectfield itself (upper, grayed out part) when the option was selected. And there seems to be no good way to add an icon to the selectfield's current value aswell.
And that's the main concern of my question: What good way is there to add an icon to both the picker's options and also to the selecfield's current value? Do I maybe just have to add relatively little code to my existing solution or should I take a whole nother approach?
Every contribution is appreciated. Thank you!
Update:
After some hacking around, I found a way (an ugly one) to prepend an icon to the selectfield itself. It is mostly based on brutal HTML DOM manipulation: I now also define event handlers for the selectfield itself (change and painted). On initialization and every time the value is changed, my handlers search the generated DOM for the underlying <input> and mess around with it. (That bad boy is probably the reason why we can't assign HTML in the first place, since the framework changes its value attribute. And value on the other hand can only contain plain text.)
This is how I define the selectfield's listeners:
listeners: {
change: function () {
var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]');
PickerIcons.app.prependIconToSelectfield(arguments[1], pickerDOM);
},
painted: function () {
// Initialize an icon on creation
var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]');
PickerIcons.app.prependIconToSelectfield(this.getValue(), pickerDOM);
}
}
The corresponding function prependIconToSelectfield() just defines some CSS:
prependIconToSelectfield: function (optValue, domElement) {
var iconUrl = this.getIconUrl(optValue);
domElement.style.backgroundImage = 'url(' + iconUrl + ')';
domElement.style.backgroundSize = '20px 20px';
domElement.style.backgroundRepeat = 'no-repeat';
domElement.style.backgroundPosition = 'left center';
domElement.style.paddingLeft = '30px';
}
Check out this fiddle for a working example.
This is still no good solution to me, since doing this kind of hackish DOM manipulation is way too rogue for my taste. I don't know what the side effects of actively messing around in the DOM could be in bigger projects, and don't want to learn it the hard way. So, I'm still looking for a cleaner solution.
Source: (StackOverflow)
The following issue occurs in Android 4.4 devices and above.
This is what our iframe looks like:
<iframe frameborder=0 id="myIFRAME"></iframe>
The following is the way we are getting iframe programmatically:
if(document.getElementById("myIFRAME")){
me.setMyIFRAME(document.getElementById("myIFRAME").contentWindow);
}
This is causing a security error related to Protocol mismatch:
"Uncaught SecurityError: Blocked a frame with origin
"https://www.google.com" from accessing a frame with origin "file://".
The frame requesting access has a protocol of "https", the frame being
accessed has a protocol of "file". Protocols must match.
We are using Sencha touch with Cordova to develop our project.
Source: (StackOverflow)
I'm writing a web app for the iPad using HTML5 and SenchaTouch. The app uses cache manifest to function offline. Once it has been added in the home screen and opened without Safari, it will refresh itself every time it is opened, even if just navigating to the home screen and back. The desired behavior is to leave the app, do something else, and then come back to the app with everything untouched.
An example of a similar app that displays the same (undesired) behavior can be found here: http://ignitedmediadesign.com/WebApp/index.html
I've read that using a cache manifest should have solved this problem on iPhone ( http://www.stevesouders.com/blog/2011/06/28/lack-of-caching-for-iphone-home-screen-apps/ ), but doesn't seem to have done the trick for either iPhone or iPad.
Is there another way to fix this? Is there some secret to cache manifest files that stops this that I may have missed?
Source: (StackOverflow)
I would like to use Ext's String method on some text that will be output to the view.
For example:
itemTpl: [
...
'<tpl switch="post_type">',
'<tpl case="new_user">',
'<p>{post_text_teaser}</p>',
'<p>{timestamp}</p>',
'<tpl default>',
'<p>' + Ext.String.ellipsis( + '{post_text_teaser}' + \, 4) + '</p>',
...
].join(''),
but of course the concatenation in line 10 is illegal.
Do you know if it's possible or how to do this correctly?
Source: (StackOverflow)
Is there a better webview for android? Google's own documents mention not to rely on the webview object.
But for using webkit it seems strange that it is so limited, compared to other webkit browsers used on mobile devices with comparable hardware.
This is evident in jquery mobile implementations, or similarly sencha touch implementations for web apps. The Android version suffers slowdowns, rendering issues, and a poor user experience, where other mobile devices - like an iphone - will run it fine. they both use webkit. and outside of an app, the actual android browser runs just fine.
Is there a way to really address android's problem, on a lower level? Has anyone made a more comprehensive web object for Android?
Thanks for any insight
Source: (StackOverflow)
I am trying to use the alert method, so the native iOS like alertView will popout. Everything works fine, and the alert gets displayed. But the Heading of the Alert is always index.html.
How can i edit the heading of the alert method
Source: (StackOverflow)
I'm working on a Sencha Touch application, and have a list of contacts. When a list item is tapped, an ActionSheet is displayed showing some basic functions (such as call, delete and ignore). Unfortunately, when the user taps and the ActionSheet is fired, the List item remains selected underneath the overlay (see the screenshot below):
Here's the function bound to the itemTap event:
itemTap: function(list, index)
{
// Deselect the selected record:
var currentRecord = list.getStore().getAt(index);
currentRecord.forename = currentRecord.get('forename');
currentRecord.surname = currentRecord.get('surname');
currentRecord.phoneNumber = currentRecord.get('phoneNumber');
currentRecord.shortFullName = currentRecord.forename + ' ' + currentRecord.surname[0];
list.getStore().deselect(index, true);
callButton.setText('Call ' + currentRecord.shortFullName + ' (' + currentRecord.phoneNumber + ')');
unfriendButton.setText('Remove ' + currentRecord.shortFullName + ' as friend');
friendActionSheet.show();
}
Unfortunately, list.getStore().deselect(index, true) returns the following error: Object [object Object] has no method 'deselect'
Any ideas on what I could be doing wrong, or how I can achieve this?
Source: (StackOverflow)