I have set up a simple panel in Sencha Touch with 2 tabs:
ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
title: "home",
iconCls: "home",
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Playlist',
scroll: 'vertical',
html: 'test'
},{
title: 'Comments',
scroll: 'vertical',
autoLoad: {url: 'disqus.html', scripts: true}
}]
});
Ext.reg('homecard', ToolbarDemo.views.Homecard);
On the 'Comments' tab I am trying to include a disqus.html file which is at the same level as the index.html file for my app, but nothing is showing up. From googling about it would seem that I have entered the autoload code correctly, but perhaps I have missed out another step?
Could someone help me on my way?
Thanks,
Nick
Disqus code:
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'monthlymixup'; // required: replace example with your forum shortname
// The following are highly recommended additional parameters. Remove the slashes in front to use.
var disqus_identifier = 'test';
// var disqus_url = 'http://example.com/permalink-to-page.html';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
The "autoLoad" property is only in ext.js and not yet available in sencha-touch.
But you can do something like this (Your mileage WILL vary):
Ext.setup({
onReady: function() {
var tabPanel = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1',
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
},
{
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
Ext.Ajax.request({
url: 'disqus.html',
success: function(response, opts) {
tabPanel.items.get(2).update(response.responseText, true); //2nd parameter is "loadScripts"
}
});
}
});
(disqus.html)
<html>
<head>
</head>
<body>Hello World.</body>
</html>
I'd like to bring a piece of code that I use to get an external html. As you may note, you should use callback, instead of success function. Not sure why, often the result goes to failure function.
Ext.Ajax.request({
url: url,
method: 'GET',
callback: function(options, success, response) {
// do what you need with response.responseText
// I'm updating a panel with styleHtmlContent: true,
}
});
Related
<div id="wrap">
<table id="listTable"></table>
</div>
Case #1)
Ext.onReady(function () {
Ext.define("testClass", {
extend: 'Ext.panel.Panel',
title: 'Hello',
layout: 'fit',
items: { html: 'AAAA' },
renderTo : 'listTable'
}, function () {
var cls = new testClass();
});
});// end onReady
Case #2)
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
items: { html: 'AAAA' },
renderTo: 'listTable'
});
});// end onReady
Or do you have a better idea? Please advice me.
The second is correct. Why define a class if you're only going to use it once?
I am very new to sencha-touch & started to build simple Login form.
My UI is ready but now I am stuck on how to write code for login request response.
As important, how can I point to specific url to make POST/GET request?
Also how to get & parse the json data.?
I read the sench-touch documentation but I didnt understood, how to use that model, store, proxy.
Suggestions upon how to create model, store, proxy to make simple login are very helpful.
Thanks in advance.
Edited to insert image:
var loginForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Username'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
loginForm.add({
xtype: 'button',
text: 'Login',
ui: 'confirm',
badgeText: '1',
// handler: function(){
// // alert("handler invoked");
// },
listeners : {
tap : function() {
var form = Ext.getCmp('form-id');
var values = form.getValues();
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
}
}
});
loginForm.add({
xtype: 'toolbar',
// id:'loginPressed',
docked: 'bottom',
// layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
// action: 'login',
handler: function() {
loginForm.setValues({
name: 'vs',
password: 'vs'
})
}
},
{
xtype: 'button',
text: 'Clear',
ui:'decline',
handler: function() {
loginForm.reset();
}
},
{
xtype: 'button',
centered: true,
text: 'Sign Up',
handler: function() {
alert('New User?');
}
},
{
xtype: 'container',
html: 'New User? ',
style: {
color: 'yellow',
}
},
]
});
Exemplo usando ajax request:
Example using ajax request:
Ext.Ajax.request({
url: domain.com/auth/signIn/',
method: 'post',
scope: this,
params: {
email: username,
password: password
},
success: function (response) {
var result = Ext.JSON.decode(response.responseText);
if (result.meta.code==200)
{
/**
* Salvando dados do usuário em localStorage
* Save user data on localStorage
*/
window.localStorage.setItem('myID', result.response.id);
window.localStorage.setItem('email', result.response.email);
window.localStorage.setItem('token', result.response.token);
window.localStorage.setItem('fName', result.response.fName);
window.localStorage.setItem('lName', result.response.lName);
window.localStorage.setItem('photo', result.response.photo);
window.localStorage.setItem('gender', result.response.gender);
window.localStorage.setItem('relationship', result.response.relationship);
window.localStorage.setItem('interest', result.response.interest);
this.signInSuccess();
this.verifyDeviceToken(result.response.id, 'signin');
}
else
{
this.signInFailure('Error', 'The data reported are invalid');
}
},
failure: function (response) {
}
});
You are almost there!
add your code to the success callback.
Note, success() callback if fired if ajax returns ok, otherwise failure(). Callback callback() fire in both cases.
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
// for example
var result = Ext.decode(text); // json parsing
if (result.ok) {
//create new widget
var homeView = Ext.widget('homePage', {...});
Ext.Viewport.remove(formLogin);
Ext.Viewport.add(homeView);
///... etc
homeView.show()
}
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
Disclaimer. Of course the code is not tested...
cheers, Oleg
i am new to sencha touch2. i want display list in a page. binding is happening successful. but i am not able to see data but able to scroll page. please any one can help me. i facing this issue. thank you.
My code is here:
Ext.define("Sencha.view.ProjectListView", {
extend: 'Ext.form.Panel',
xtype: 'projectListepage',
id: 'projectListepage',
requires: [
'Ext.data.JsonP'
],
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'JSONP'
},
{
docked: 'top',
xtype: 'toolbar',
flex: 3,
items: [{
text: 'Project Deatils',
handler: function () {
var list = Ext.getCmp('JSONP'),
tpl = new Ext.XTemplate([
'<tpl for=".">',
'<img src="{MainImageUrl}"/><label>{ProjectName}</label><p class="temp_low">{ShortDescription}</p>', //
'</tpl>',
]);
Ext.data.JsonP.request({
url: 'http://localhost:53985/PropertyService.svc/GetAllProject',
callbackKey: 'callback',
params: {
},
callback: function (success, request) {
var project = request;
if (project) {
list.updateHtml(tpl.applyTemplate(project));
}
else {
alert('There was an error retrieving the weather.');
}
}
});
}
}]
}]
}
});
I do not see anywhere in your code sample where you are creating a list. You need to extend 'Ext.List' or use xtype:'list'. There are a few simple examples in the sencha touch 2 docs on how to create a list. http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.List
(complete re-edit of my previous post)
I'm trying to build my first Sencha touch app and i've got a problem.
In my viewport I have 2 xtype : Home and ContainerListAdress.
When I click on the ContainerListAdress icon the card slides to the list.
here is my code (in listcard.js):
// My List view card
myAPP.views.ListAdressCard = Ext.extend(Ext.List, {
id:'listadresscard',
styleHtmlContent: true,
// cardSwitchAnimation: 'slide',
// items: [{ xtype: 'detailcard' } ],
store: myAPP.ListStore,
itemTpl: '<div>{name}</div>',
grouped: true,
onItemDisclosure: function(){
myAPP.views.containerlistadresscard.setActiveItem('detailcard');
}
});
// My container for both the list and the detail view
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [{xtype:'listadresscard'}, {xtype:'detailcard'}]
});
Ext.reg('listadresscard', myAPP.views.ListAdressCard);
Ext.reg('containerlistadresscard', myAPP.views.ContainerListAdressCard);
Then in detailcard.js I have
DetailcardToolbar = new Ext.Toolbar ({
id:'detailbar',
title: 'station',
dock:'top'
});
myAPP.views.Detailcard = Ext.extend(Ext.Panel, {
id: 'detailcard',
styleHtmlContent: true,
html: 'Made from coffee',
dockedItem:[DetailcardToolbar]
});
Ext.reg('detailcard', myAPP.views.Detailcard);
My error is
Uncaught TypeError: Cannot call method 'setActiveItem' of undefined
If I camelcased containerlistadresscard I got
Uncaught TypeError: Object function (){h.apply(this,arguments)} has no method 'setActiveItem'
But the detailcard I want to set active is referenced in the container ?
Thanks for your help.
---------------------------EDIT----------------------------
I decided to put all in one page, just for clarity, but face the same issue
var myAPPDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: true,
html: 'Made from coffee',
layout: 'fit'
});
var myAPPListAdressCard = new Ext.List ({
id:'listadresscard',
styleHtmlContent: true,
store: myAPP.ListStore,
itemTpl: '<div>{name}</div>',
grouped: true,
onItemDisclosure: function(){
myAPP.views.ContainerListAdressCard.setActiveItem(myAPPDetailcard);
}
});
// My container for both the list and the detail view
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [myAPPListAdressCard, myAPPDetailcard]
});
Ext.reg('containerlistadresscard', myAPP.views.ContainerListAdressCard);
No, Ext.extend() defines a class. Here you created a class this way:
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [myAPPListAdressCard, myAPPDetailcard]
});
Then you create an instance of it like this way:
var mainContainer = new myAPP.views.ContainerListAdressCard({
fullscreen : true
});
You can call setActiveItem() on this mainContainer variable, not on a class definition.
.....
onItemDisclosure: function(){
mainContainer.setActiveItem(myAPPDetailcard);
}
Hope this help.
I am having a very hard time understanding why i can't go back to the previous panel within my application. Enough talk, some code
appsDetails = Ext.extend(Ext.Panel, {
layout: 'fit',
scroll: 'verticall',
initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
items: [{
ui: 'back',
scope: 'this',
handler: function() {
console.log(this.ownerCt) //This returns "undefined"
this.ownerCt.setActiveItem(this.prevCard, {
type: 'slide',
reverse: true,
scope: this,
after: function() {
this.destroy();
}
})
}
}]
}];
this.items = [{
styleHtmlContent: true,
tpl: description,
data: this.record.data
}];
appsDetails.superclass.initComponent.call(this);
}
});
I am getting to this view above by using this code below in the previous panel
selection: function(list, index) {
if (index[0] !== undefined) {
var details = new appsDetails({
homeCard: this.appsPanel,
record: index[0],
});
this.setActiveItem(details, {type: 'slide', direction: 'left'})
}
}
I have no problem getting to the desired panel but i can't come back the previous one.
Thx for your help
You are passing a string object with value 'this'. Change this line: scope:'this' in scope:this