PDA

View Full Version : failing in loading a template if loading the store in chrome browser.



sanjayarrk1
3 May 2012, 12:21 AM
Hi Sencha,
I am using extJS 4.0.7 version and facing one problem with chrome browser.

Description - I am using a extJS template which is showing the background image on the UI and on the background image I am placing the draggable small image icons. The background image is coming from the server and the draggable icon are coming from core. To place any icon on the background image I am loading store which is noting but a dynamic data coming from core.

Problem - So whenever I am loading the store (To place the small icons on the background image) the whole template is getting loaded including the background image.

Expected Behavior - The UI should load the small image icon which is coming from core not the background image which is coming from the server.This issue is occurring in Chrome Browser and working fine with other browser like FF, IE, Safari

Observation on the issue - It is a problem with loading a store in chrome browser which is loading/refreshing whole template.


me.items.items[0].tpl = Ext.create('Ext.XTemplate', '<tpl>', '<div class="background_processmap" id="' + processmapId + '">', '<img class = "UUIDdashlet" src = "' + GLOBAL.uri_for_catalyst("uploads/" + UUID) + '?dc=' + new Date().getTime() + '" width="100%" height="100%"/>', '<tpl for=".">', '<tpl if="hostId!=\'\' && serviceId==\'\'">', '<div class="indicatorDiv draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '</div>', '</tpl>', '<tpl if="hostId!=\'\' && serviceId!=\'\' && metricId==\'\'">', '<div class="indicatorDiv draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '</div>', '</tpl>', '<tpl if="hostId!=\'\' && serviceId!=\'\' && metricId!=\'\'">', '<tpl if="metricvalue != \'?\'">', '<div class="indicatorDivAbove draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '{metricvalue}', '</div>', '</tpl>', '<tpl if="metricvalue == \'?\'">', '<div class="indicatorDivAbove draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px; font-size:20px;text-align:center" data-qtip="' + showTooltip() + '">', '{metricvalue}', '</div>', '</tpl>', '</tpl>',

'<tpl if="keywordId!=\'\'">', '<div class="indicatorDiv draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '</div>', '</tpl>', '</tpl>', '</div>', '</tpl>');

If you look at the first div in the template. It is showing the background image which is coming from the server. The rest of the part of template is getting loaded after loading a store which is having data coming from the core system. But when ever the store is loaded the background is also getting refreshed in the chrome browser.

Any help will be highly appreciated as this is critical issue.

15 May 2012, 4:44 AM
Hi Sencha,
I am using extJS 4.0.7 version and facing one problem with chrome browser.

Description - I am using a extJS template which is showing the background image on the UI and on the background image I am placing the draggable small image icons. The background image is coming from the server and the draggable icon are coming from core. To place any icon on the background image I am loading store which is noting but a dynamic data coming from core.

Problem - So whenever I am loading the store (To place the small icons on the background image) the whole template is getting loaded including the background image.

Expected Behavior - The UI should load the small image icon which is coming from core not the background image which is coming from the server.This issue is occurring in Chrome Browser and working fine with other browser like FF, IE, Safari

Observation on the issue - It is a problem with loading a store in chrome browser which is loading/refreshing whole template.


me.items.items[0].tpl = Ext.create('Ext.XTemplate', '<tpl>', '<div class="background_processmap" id="' + processmapId + '">', '<img class = "UUIDdashlet" src = "' + GLOBAL.uri_for_catalyst("uploads/" + UUID) + '?dc=' + new Date().getTime() + '" width="100%" height="100%"/>', '<tpl for=".">', '<tpl if="hostId!=\'\' && serviceId==\'\'">', '<div class="indicatorDiv draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '</div>', '</tpl>', '<tpl if="hostId!=\'\' && serviceId!=\'\' && metricId==\'\'">', '<div class="indicatorDiv draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '</div>', '</tpl>', '<tpl if="hostId!=\'\' && serviceId!=\'\' && metricId!=\'\'">', '<tpl if="metricvalue != \'?\'">', '<div class="indicatorDivAbove draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '{metricvalue}', '</div>', '</tpl>', '<tpl if="metricvalue == \'?\'">', '<div class="indicatorDivAbove draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px; font-size:20px;text-align:center" data-qtip="' + showTooltip() + '">', '{metricvalue}', '</div>', '</tpl>', '</tpl>',

'<tpl if="keywordId!=\'\'">', '<div class="indicatorDiv draggable" id="' + me.id + '-{#}" style="left: {left}px; top:{top}px;" data-qtip="' + showTooltip() + '">', '</div>', '</tpl>', '</tpl>', '</div>', '</tpl>');

If you look at the first div in the template. It is showing the background image which is coming from the server. The rest of the part of template is getting loaded after loading a store which is having data coming from the core system. But when ever the store is loaded the background is also getting refreshed in the chrome browser.

Any help will be highly appreciated as this is critical issue.

Sanjay, Please look at the code you posted. It's not properly formatted. It's most likely the reason you did not get assistance from the community. Ideally, you should be posting formatted code, allowing us to easily spot problems that you may not be seeing.

For what it's worth, if you're setting a tpl property post-render, the component will not render the template with any associated data.