PDA

View Full Version : jQuery and Sencha Touch in Parallel



usmanprivacy
15 Sep 2011, 2:53 AM
Hey,
I have the full calendar coded using jquery, now I want to use it in my sencha touch application, and I want to access it through a button made in sencha touch UI, the calendar works well just by itself or normal html tags but when I want to access it using sencha touch UI, its just a white page then, could anybody help me here?

wilzdezign
15 Sep 2011, 2:54 PM
Can you provide an example of what Sencha Touch JS outline of code you have right now? Are you just outputting the calender into a Panel?

tomalex0
15 Sep 2011, 9:39 PM
Check this
http://www.sencha.com/forum/showthread.php?104976-Calendar-based-on-Full-Calendar&

I thinks this is based on older version of ST but it uses jquery fullcalendar.

usmanprivacy
15 Sep 2011, 10:23 PM
Hey wilzdezign,
here is the code. Here you can see the sencha touch JS and an icon button for toggling the calendar and map views, the switching function could also be seen down below (written in jquery). the map view works with the function but the calendar does not. it looks like a css problem to me but I am not sure.

<script>

var app = new Ext.Application({

name: "ol",
launch: function() {
this.viewport = new Ext.Panel({
fullscreen: true,
dockedItems: [{
dock: "top",
xtype: "toolbar",
ui: "dark",
layout: {
pack: "center"
},
items: [{
iconCls: "search",
//title: 'Search',
iconMask: true,
handler: function() {
// this is the app
if (!app.searchFormPopupPanel) {
app.searchFormPopupPanel = new App.SearchFormPopupPanel({
map: map
});
}
app.searchFormPopupPanel.show('pop');
}
},
{
iconMask:true,
iconCls: "locate",
handler: function() {
var geolocate = map.getControlsBy("id", "locate-control")[0];
if (geolocate.active) {
geolocate.getCurrentLocation();
} else {
geolocate.activate();
}
}
},
{
iconMask: true,
iconCls: "calendar",
handler: function(){
onSwitchView();
}
},
{
xtype: 'button',
text: 'Get Route',
cls: 'demobtn',
handler: routeHandler,
flex: 0.5
},
{
xtype: "spacer"
},
/*{
iconMask: true,
iconCls: "add",
handler: function() {
map.zoomIn();
}
},
{
iconMask: true,
iconCls: "minus",
handler: function() {
map.zoomOut();
}
},
{
xtype: "spacer"
},
*/
{
xtype: 'selectfield',
options: [{
text: 'Floor1', value: 'Test'
}, {
text: 'Floor2', value: 'Test2'
}, {
text: 'Floor3', value: 'Test3'
}, {
text: 'Floor4', value: 'Test3'
}]
},
{
iconMask: true,
iconCls: "layers",
handler: function() {
if (!app.popup) {
app.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
hideOnMaskTap: true,
width: 240,
items: [{
xtype: 'app_layerlist',
map: map
}],
scroll: 'vertical'
});
}
app.popup.show('pop');
}
}]

}],
items: [
{
xtype: "component",
scroll: false,
monitorResize: true,
id: "map",
listeners: {
render: function() {
var self = this;
initMap(function(feature) {
var htmlContent = "";
for (var property in feature.data) {
if (feature.data[property] != 'undefined') {
htmlContent = htmlContent + feature.data[property] + "<br>";
}
}
if (self.featurePopup) {
self.featurePopup.destroy();
}
self.featurePopup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
hideOnMaskTap: true,
width: 240,
html: htmlContent,
scroll: 'vertical'
});
self.featurePopup.show();
})
},
resize: function() {
if (window.map) {
map.updateSize();
}
},
scope: {
featurePopup: null
}
}
}
]
});
}
});
function routeHandler(){
//do your thing!

if (!app.routeFormPopupPanel) {
app.routeFormPopupPanel = new App.RouteFormPopupPanel({
map: map
});
}
app.routeFormPopupPanel.show('pop');
};

function onSwitchView()
{
if (currentView == "map")
{
// from map to calendar
$("#mapview").css("left","-100%");
$("#calendarview").css("left","0px");
$("#switchview").html("MAP");
currentView = "calendar";

}
else if (currentView == "calendar")
{
// from calendar to map
$("#calendarview").css("left","100%");
$("#mapview").css("left","0px");
$("#switchview").html("CAL.");
currentView = "map";
}
}


function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);


function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}

function onDeviceReady()
{
// do your thing!

initApp();
}

</script>