PDA

View Full Version : Checking for IPad



fsjay
14 Jun 2011, 11:44 AM
I have a panel that I want to display some slightly different HTML/CSS if the device is an IPad.

My current code is:



WashingtonPlaces.views.Homecard = Ext.extend(Ext.Panel, {
title: "home",
iconCls: "home",
styleHtmlContent: true,
style: "background-image:url('img/georgetracker-bkg.jpg'); background-repeat:repeat-x;",
html: '<img src=\"img/george-tracker-home.png\">',
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "GEOrge Tracker"
}]
});
WashingtonPlaces.views.Homecard.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('homecard', WashingtonPlaces.views.Homecard);



I just want to change my value for HTML if its an IPad.

Any ideas on how to do this?

Thanks in advance

digil
14 Jun 2011, 12:07 PM
Try something like this:



WashingtonPlaces.views.Homecard = Ext.extend(Ext.Panel, {
title: "home",
iconCls: "home",
styleHtmlContent: true,
style: "background-image:url('img/georgetracker-bkg.jpg'); background-repeat:repeat-x;",
html: Ext.is.iPad ? '<html for iPad>' : <html for non-iPad>,
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "GEOrge Tracker"
}]
});
WashingtonPlaces.views.Homecard.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('homecard', WashingtonPlaces.views.Homecard);


Obviously you'd replace the <html for iPad>, but that's the general idea. If you're targeting any tablet, do Ext.is.Tablet instead. Currently, Ext.is.Tablet is no different than Ext.is.iPad, but in future releases that may not be true.

fsjay
14 Jun 2011, 12:49 PM
Great, worked like a charm....thanks.

Would I be able to put an if statement in there too for other checks?

digil
14 Jun 2011, 1:51 PM
You can nest ternary statements, something like this:




html : Ext.is.iPad ? "iPadhtml"
: Ext.is.iPhone ? "iPhone html"
: Ext.is.Android ? "Android html"
: "everything else";



Some people hate this kind of nesting, but it has its place. You could also do something like




html : getHTML()



where getHTML() is a function that has the Ext.is if statements.

aondevuser1
14 Jun 2011, 2:08 PM
I like this solution so I don't have to parse in code that I am not needing and my code may call something like "aon.detail.panel" and because I sourced different files that both have the same names for the references i don't have to change my code.

For example, I don't have to have a version like this: "aon.detail.panelPhone" and one "aon.detail.panelTablet", it is just "aon.detail.panel". And it just gets better when you want to add in more devices.



<script type="text/javascript">

<!-- Note: Take notice to the format of the string, it is broken and concatenated on purpose to work -->
if( Ext.is.Phone || Ext.is.iPod){
document.write("<script type='text/javascript' src='javascript/mobile/record_detail_phone.js'></"+"script>");
document.write("<script type='text/javascript' src='javascript/aon_form_fields_phone.js'></"+"script>");
}else if( Ext.is.Tablet || Ext.is.iPad || Ext.is.Desktop){
document.write("<script type='text/javascript' src='javascript/mobile/record_detail_tablet.js'></"+"script>");
document.write("<script type='text/javascript' src='javascript/mobile/aon_form_fields_tablet.js'></"+"script>");
}

</script>