I tried using the following to remove some of my previous CSS declaration so that I can insert new ones but seems to fail.
Code:
Ext.util.CSS.removeStyleSheet(keyname);
The full code
Code:
<script type="text/javascript">
var puthtml = "";
var selectedbgcolor = "#FF0F00";
var place = [];
$(document).ready(function() {
$(".pressButton").button();
$(".pressButton").click(function() {
alert(this.name);
document.getElementById("new_points").style.backgroundImage="url('" + this.name + "')";
var allextRules = Ext.util.CSS.getRules();
Object.keys(allextRules).forEach(function(key) {
var keyname = key;
if(keyname.indexOf("Points") != -1){
Ext.util.CSS.removeStyleSheet(keyname);
console.log(keyname + " Removed");
}
});
for(var i=0; i<coords.length; i++){
if(coords[i][0] = this.name){
place.push(["NewDot", "#Points" + i + " { background: url('" + yellowdot + "') no-repeat; \n position: absolute; \n top: " + coords[i][2] + "px; \n left: " + coords[i][3] + "px; \n width: " + coords[i][4] + "px; \n height: " + coords[i][5] + "px; \n }", "Entry " + coords[i][6]]);
}
}
puthtml = "";
for(var i=0; i<place.length; i++){
Ext.util.CSS.createStyleSheet(place[i][1], place[i][0]);
puthtml = puthtml + "<div id=\"js" + i + "\"><br><br><div id='text' style='text-align:center; background-color:" + selectedbgcolor + "; border-width: 4px; border-style: solid; border-color: #454545'>" + place[i][2] + "</div></div>";
}
var DomHelp = Ext.core.DomHelper;
var DomQy = Ext.DomQuery;
var wrap = DomQy.selectNode('#new_points');
DomHelp.insertHtml('beforeEnd', wrap, puthtml);
});
});
and the CSS as follows:
Code:
<style type="text/css">
div#new_points {
background: url('http://hdfreewallpaper.info/assets/hdfreewallpaper/2011/07/25/wall/7574/1280x800/lake-coleridge-new-zealand-1280-x-800.jpg') no-repeat #d2d2d2;
margin:0 auto;
/*border:2px solid #9e9e9e;*/
border:2px solid #000000;
width:1280px;
height:800px;
position: relative;
overflow: hidden;
}
</style>
Any Insight?