Rob Gillan
2012-04-06 11:44:36 UTC
Hi,
We have a number of ScrollableViews we are using for general navigation/indication. One of the indicators identifies if the application is logged into a host server or not, which we want to display via an icon identifying the state (e.g. lockclosed if connected, lockopen if not). The ScrollableViews are currently created declaratively.
We have tried to set the icon attribute and getting the attribute after it's set shows the correct icon, but the display does not update. Do we need to somehow restart/refresh the view/heading/toolbarbutton to have it appear correctly (and how might this be done)?
Here's the code snippet:
installedPanels = ['main', 'a1', 'a2', 'a3', 'a4', 'a4a', 'a4d', 'a4p'];
displayConnection = function() {
try {
logOut('displayConnection:' + loggedIn);
if (loggedIn == 'false' || connectionType == 'none') {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
domAttr.set(dom.byId(iconId), 'icon', 'images/lockopen29.png');
}
} else {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
domAttr.set(dom.byId(iconId), 'icon', 'images/lockclosed29.png'); <-- doing a get after this set shows that the icon attribute is set correctly
}
}
} catch (e) {
logOut('error in displayConnection ' + e);
}
}
<div id="main" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading">Field Operations</h1>
</br></br>
<div onclick="changePanels('a1');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Transit Project</span>
</div>
<div onclick="changePanels('a3');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Site MRW Remediation Checklist</span>
</div>
<div onclick="changePanels('a4');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Field Inspection</span>
</div>
<h1 id="footer_main" data-dojo-type="dojox.mobile.Heading" fixed="bottom">
<div id="location_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/globe29.png" onclick="saveLocation('location_main');" style="margin-left:29px;"></div>
<div id="connection_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/lockopen29.png" onclick="changeConnection();" style="margin-left:29px;"></div>
</h1>
</div>
Any help gladly appreciated as always,
Rob
We have a number of ScrollableViews we are using for general navigation/indication. One of the indicators identifies if the application is logged into a host server or not, which we want to display via an icon identifying the state (e.g. lockclosed if connected, lockopen if not). The ScrollableViews are currently created declaratively.
We have tried to set the icon attribute and getting the attribute after it's set shows the correct icon, but the display does not update. Do we need to somehow restart/refresh the view/heading/toolbarbutton to have it appear correctly (and how might this be done)?
Here's the code snippet:
installedPanels = ['main', 'a1', 'a2', 'a3', 'a4', 'a4a', 'a4d', 'a4p'];
displayConnection = function() {
try {
logOut('displayConnection:' + loggedIn);
if (loggedIn == 'false' || connectionType == 'none') {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
domAttr.set(dom.byId(iconId), 'icon', 'images/lockopen29.png');
}
} else {
for (var j = 0; j < installedPanels.length; j++) {
iconId = 'connection_' + installedPanels[j];
footerId = 'footer_' + installedPanels[j];
domAttr.set(dom.byId(iconId), 'icon', 'images/lockclosed29.png'); <-- doing a get after this set shows that the icon attribute is set correctly
}
}
} catch (e) {
logOut('error in displayConnection ' + e);
}
}
<div id="main" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading">Field Operations</h1>
</br></br>
<div onclick="changePanels('a1');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Transit Project</span>
</div>
<div onclick="changePanels('a3');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Site MRW Remediation Checklist</span>
</div>
<div onclick="changePanels('a4');">
<img class="report" src="images/ABC_48x48x72.png" />
<span class="report">Field Inspection</span>
</div>
<h1 id="footer_main" data-dojo-type="dojox.mobile.Heading" fixed="bottom">
<div id="location_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/globe29.png" onclick="saveLocation('location_main');" style="margin-left:29px;"></div>
<div id="connection_main" data-dojo-type="dojox.mobile.ToolBarButton" icon="images/lockopen29.png" onclick="changeConnection();" style="margin-left:29px;"></div>
</h1>
</div>
Any help gladly appreciated as always,
Rob