How to create fiddles for Sencha touch 2.1.1 or 2.2? - sencha-touch-2

Since fiddles are very useful to explain and understand issues on any forum I would like to create fiddle for Sencha touch 2.1.1(which is the version I use) when I post here but http://www.senchafiddle.com/ only oppers Sencha-Touch-2.0.1 and http://jsfiddle.net/ doesn't even have any option for Sencha Touch, so how to make fiddles with latest versions?

You can try sencha playground by WalkingTree. I haven't played with it much but it seems legit.

You can have access to Sencha Touch 2.1 with New Senchafiddle

JSFiddle will work. Just need to specifiy the external resources. Sometimes SenchaFiddle gives me errors when I try to save my code. This is an alternative in case senchafiddle doesn't behave as expected.
Sencha CDN will have the required css and js files.
Eg. 2.2.1 css and js url
http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all-debug.js
http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css
Other versions can be accessed like
http://cdn.sencha.com/touch/sencha-touch-2.1.1/resources/css/sencha-touch.css
http://cdn.sencha.com/touch/sencha-touch-2.1.1/sencha-touch-all-debug.js
Then I put everything I need inside the launch function in the code below.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
launch: function () {
//Your code goes here.
}
});
Here is a demo.

The official Sencha Touch Fiddle now seems to be live:
fiddle.sencha.com
The other fiddle site (new.senchafiddle.com), marked at the answer above, no longer seems to be up and running.

Related

Add JavaScript documentation Sencha Architect

Is it possible to add documentation (not just comments) to your javascript methods in Sencha Architect. I cannot seem to add lines above methods because of the specific method views in Architect.
I am talking about the following documentation:
/**
* this documentation
*/
bla: function() {
//I do know how to add this comment!
}
UPDATE:
Seems that it is not possible :(
http://www.sencha.com/forum/showthread.php?281079-Sencha-Architect-Code-Documentation-%28JSDocs%
I will keep this thread open to see if someone knows a workaround to the problem.
Architect 3.1 or 3.1.1 will add commenting. It's done in prototype form but we are racing to add Ext JS 5 so it's on the back burner until then.

ios7 webapp with appcache,when trigger history.back

my app use appcache, when trigger history.back() in safari(Ios7), it dose not work. After remove appcache minifest, it works, I can console in 'statechange'.
This is due to a bug in Safari 7+ when using AppCache. Only known solution at this point is disabling AppCache.
See history.back() doesn't work in Safari on iOS
it is a terrible bug! I use this fix:
if (
(/\bSafari\//gi).test(window.navigator.userAgent) &&
(/\bVersion\/7/gi).test(window.navigator.userAgent)
) {
window.console.warn('removing appcache');
window.document.documentElement.removeAttribute('manifest');
}
I have some reports of back buttons still not working after this fix, but everywhere I tested it does work. I hope this helps!

WIDTH property is not affected to a dialog box in Simple Modal1 jquery plugin

I've just faced the problem on the SimpleModal1 jquery plugin
I'm studying web programming, and i'm building any pages that I want now.
And I'm using SimpleModal1 plugin, and jquery.modal() works fine.
But... in one of my JS file, giving option containerCSS:{"width":"20%"} doesn't affect the dialog box's horizontal size.
The Problematic JS File
function openLoginDialog(){
$("#dialog_login").modal({
closeHTML:".modalCloseImg",
containerCSS:{
"width":"20%"
}
});
}
Another file that works fine
function openJoinDialog(){
$("#dialog_join").modal({
closeHTML:".modalCloseImg",
containerCss:{
"width":"80%",
"height":"820px"
}
});
}
containerCss is not the same as containerCSS... Your problem might just be a simple matter of misplaced capitals.

Convert from Extjs 4.0.7 to Extjs 4.1

I have been developed one application in extjs 4.0.7. and now if i want to use extjs 4.1. for further implementation of that application.
Is it possible? Plz help me, if answer is yes.
Thank you
Of course an upgrade is possible. Replace your extjs scripts (ext-all.js etc) from 4.0.7 to 4.1. In most cases you should not face any problem as this is mostly a performance focussed release. http://www.sencha.com/blog/whats-new-in-ext-js-4-1
Convert from Extjs 4.0.7 to Extjs 4.1.
Yes you can upgrade your application from extjs 4.0.7 to 4.1.1 For that you need to replace your ext-all.js/ext-debug-all.js (for debug purpose) but after replacing you may get few problems related to syntax such as in editor, previously we were using record, instead of that we need to use e.record.
listeners : {
'edit' : function(editor, e) {
var grid = e.grid;
var record = e.record;
}
}
There are some issues with the ext-all.css if you are using any custom images on the panel header. Be wary of it. And also html property in the panel is not working.

how begin with appcelerator for desktop (and use the API's)

I've a bit experience with qt+ and creating not so complex web pages, but I don't know how begin with titanium...when I run the default app this work...I can change the index.html like a web page...I can include javascript code and jquery too...very nice...but when I try run api functions I don't know how include these...all examples talk about iphone and a app.js file...I'm trying make a desktop app and don't appear any .js...I can create these but don't work
...in the docs I read things like these:
var win = Ti.UI.createWindow(); var view = Ti.UI.createView({backgroundColor:"red"}); win.add(view); win.open();
I don't know where I've put this code...I try put it inside a javascript inside the html (bad practice!) but it don't work...I put it inside a function onload but don't work neither.....there are any "convention" with the names for the files for this work?...I think this is like create a very dynamic web page but I don't know how work with the api....I see the example "kitchen something" but it wasn't so clear to mee...I see a examples like this:
http://mobile.tutsplus.com/tutorials/appcelerator/appcelerator-using-json-to-build-a-twitter-client/
but seems this work different when is an ipod to when it is a desktp app...I create an app.js (like the tuto) and put my code inside it but it never run...I look the source code and only need create a .js and inside my "home.html" link it..but it don't work...I create a index.js too but it don't work neither
please help..I'm very noob...thanks
Aaron:
This reply kindly brought something that could have been a solution but just made me lose more than 15 minutes of my time, as these first online courses have info about how to create a new project with a default html file, not about the original poster's issue.
The original poster's issue is that he has a new project with an index.html file, but no app.js file.
And he then doesn't understand where he could put the sampe code :
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);
win.open();
... as whatever he puts in app.js is not executed.
The documentation in Titanium Dev Center fails to provide accurate information as it only mentions Titanium Mobile app.js and does not speak of index.html in the application structure.
After some starting experience on Titanium Mobile, I had to work on Titanium Desktop andactually just had the same problem as angel_ang, which brought me here.
So, here is the real answer :
Titanium Desktop applications do not need or start with an app.js file, but with index.html.
Deleting or removing this file never works as it will still be launched from the last build if need be.
Adding anything to app.js will never run as only index.html is run as a starting place.
Something that should have been a solution was found that to the following link:
http://www.youtube.com/watch?v=lgGVNB2nkKc&NR=1
This video is two online courses further from the link supplied by Aaron. At 0.19 seconds exactly, we see the starting code he has added to index.html.
You need to put a ... in your HEAD section, and add a function() there.
You may put the sample code inside this function.
Then you may even set the function to run when you click a button ().
Unfortunately, this doesn't work with me either.
I tried with the example code above but also with the other example (notification) mentioned in the online course.
It just seems that something is deprecated here and many documentations are outdated.
Anyone that could answer to this situation would be very helpful to us and many newcomers.
We just have an index.html that we can't use, instead of a running app.js file.