PDA

View Full Version : font looks blur in IE10



newusername
17 Apr 2014, 10:23 PM
I am creating simple project as a curriculum activity in my college , which is online courses. i am facing one issue where font looks blur in IE10 ,following is my complete code..Ext.ns("elearning");Ext.onReady(function() { Ext.create('Ext.container.Viewport', { layout : 'fit', renderTo : Ext.getBody, items : elearning.mainWindow, style : "background-color:white" }); });elearning.toolbar = Ext.create('Ext.panel.Panel', { // height : 30, // layout : "vbox", border : false, bodyStyle : "background-color:#FFBF00", items : [ { xtype : "button", text : "eLearning Courses", border : false, style : "background:#FFBF00", padding : "0 0 0 0", menu : { plain : true, items : [ { text : 'Ext JS 4.0 Basic Course', handler : function() { var cmp = Ext.getCmp("centerId"); cmp.add(elearning.course.extjs); cmp.setTitle("Ext JS 4.0 Basic Course Contents"); cmp.doLayout(); } }, { text : 'Selenium' }, { text : 'Java' }, { text : 'JSP/Servlet' }, { text : 'Hibernate with JPA' } ] } }, { xtype : "button", text : "About Me", border : false, style : "background:#FFBF00;color:black" }, { xtype : "button", text : "Contact Me", border : false, style : "background:#FFBF00", shadow : false }, ]});elearning.course = {};elearning.course.extjs = {};elearning.mainWindow = Ext.create("Ext.panel.Panel", { margins : "50 100 10 100", layout : "border", border : false, bodyBorder : false, // renderTo : Ext.getBody(), bodyStyle : "background-color:white", items : [ { region : "center", id : "centerId", header : { height : 20, frame : false, padding : "0 0 0 5", }, items : elearning.course.extjs, autoScroll : true, margins : "7 0 0 0", }, { region : "north", height : 30, items : elearning.toolbar, border : false }, { region : "south", margins : "10 0 0 0", border : false, height : 20, html : " Contact us [email protected]", bodyStyle : "background-color:#585858", } ] });elearning.course.extjs.bodyStyle = "";elearning.course.extjs.style = "";elearning.course.extjs.format2 = [ { xtype : "panel", // frame : true, bodyBorder : false, header : { title : "Day 1 : Getting Started With Ext JS", style : "background-color:white", border : false }, items : { margins : "0 0 0 20", xtype : "displayfield", value : "

Why should use EXT JS ?
Configuration of EXT JS in project
Our First Program
" }, border : false, padding : "3 0 0 10", margins : "10 0 0 20", width : "100%", // height : 30 }, { xtype : "panel", bodyBorder : false, header : { title : "Day 2 : Ext Form Panel", style : "background-color:white", border : false }, items : { margins : "0 0 0 20", xtype : "displayfield", value : "

Creating Ext form Panel
Adding text field , lable , button to Form Panel.
" }, border : false, padding : "3 0 0 10", margins : "0 0 0 20", width : "100%", }, { xtype : "panel", bodyBorder : false, header : { title : "Day 3 : Ext Grid Panel", style : "background-color:white", border : false }, items : { margins : "0 0 0 20", xtype : "displayfield", value : "

Creating Ext grid Panel
Creating store ,columns in Ext grid.
" }, border : false, padding : "3 0 0 10", margins : "10 0 0 20", width : "100%", }, { xtype : "panel", bodyBorder : false, header : { title : "Day 4 : Layout Part I", style : "background-color:white", border : false }, items : { margins : "0 0 0 20", xtype : "displayfield", value : "

Fit Layout
HBox Layout
VBox Layout
" }, border : false, padding : "3 0 0 10", margins : "10 0 0 20", width : "100%", }, { xtype : "panel", bodyBorder : false, header : { title : "Day 5 : Layout Part II", style : "background-color:white", border : false }, items : { margins : "0 0 0 20", xtype : "displayfield", value : "

Border Layout
Accordian Layout
Card Layout
" }, border : false, padding : "3 0 0 10", margins : "10 0 0 20", width : "100%", }];elearning.course.extjs = Ext.create("Ext.panel.Panel", { border : false, margins : "10", layout : "vbox", items : elearning.course.extjs.format2});

Gary Schlosberg
18 Apr 2014, 10:57 AM
I tried cleaning up this code and putting it into a Fiddle, but it still doesn't run.
https://fiddle.sencha.com/#fiddle/57d

In which version of ExtJS are you seeing this blur issue with IE10?

newusername
18 Apr 2014, 10:38 PM
I really don't know why toolbar is not there when I posted this question. Any way toolbar is enabled now and here is code. I am using ext js 4.2.0



Ext.ns("elearning");
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
renderTo: Ext.getBody,
items: elearning.mainWindow,
style: "background-color:white"
});
});
elearning.toolbar = Ext.create('Ext.panel.Panel', {
// height : 30,
// layout : "vbox",
border: false,
bodyStyle: "background-color:#FFBF00",
items: [{
xtype: "button",
text: "eLearning Courses",
border: false,
style: "background:#FFBF00",
padding: "0 0 0 0",
menu: {
plain: true,
items: [{
text: 'Ext JS 4.0 Basic Course',
handler: function() {
var cmp = Ext.getCmp("centerId");
cmp.add(elearning.course.extjs);
cmp.setTitle("Ext JS 4.0 Basic Course Contents");
cmp.doLayout();
}
}, {
text: 'Selenium'
}, {
text: 'Java'
}, {
text: 'JSP/Servlet'
}, {
text: 'Hibernate with JPA'
}]
}
}, {
xtype: "button",
text: "About Me",
border: false,
style: "background:#FFBF00;color:black"
}, {
xtype: "button",
text: "Contact Me",
border: false,
style: "background:#FFBF00",
shadow: false
}, ]
});
elearning.course = {};
elearning.course.extjs = {};
elearning.mainWindow = Ext.create("Ext.panel.Panel", {
margins: "50 100 10 100",
layout: "border",
border: false,
bodyBorder: false, // renderTo : Ext.getBody(),
bodyStyle: "background-color:white",
items: [{
region: "center",
id: "centerId",
header: {
height: 20,
frame: false,
padding: "0 0 0 5",
},
items: elearning.course.extjs,
autoScroll: true,
margins: "7 0 0 0",
}, {
region: "north",
height: 30,
items: elearning.toolbar,
border: false
}, {
region: "south",
margins: "10 0 0 0",
border: false,
height: 20,
html: " Contact us [email protected]",
bodyStyle: "background-color:#585858",
}]
});
elearning.course.extjs.bodyStyle = "";
elearning.course.extjs.style = "";
elearning.course.extjs.format2 = [{
xtype: "panel", // frame : true,
bodyBorder: false,
header: {
title: "Day 1 : Getting Started With Ext JS",
style: "background-color:white",
border: false
},
items: {
margins: "0 0 0 20",
xtype: "displayfield",
value: "Why should use EXT JS ? Configuration of EXT JS in project Our First Program "
},
border: false,
padding: "3 0 0 10 ",
margins: "10 0 0 20 ",
width: "100 % ",
// height : 30
}, {
xtype: "panel ",
bodyBorder: false,
header: {
title: "Day 2 : Ext Form Panel ",
style: "background - color: white ",
border: false
},
items: {
margins: "0 0 0 20 ",
xtype: "displayfield ",
value: "Creating Ext form Panel Adding text field,lable,button to Form Panel." },
border: false,
padding: "3 0 0 10 ",
margins: "0 0 0 20 ",
width: "100 % ",
}, {
xtype: " panel ",
bodyBorder: false,
header: {
title: "Day 3: Ext Grid Panel ",
style: "background - color: white ",
border: false
},
items: {
margins: "0 0 0 20 ",
xtype: "displayfield ",
value: "Creating Ext grid Panel Creating store, columns in Ext grid."
},
border: false,
padding: "3 0 0 10 ",
margins: "10 0 0 20 ",
width: "100 % ",
}, {
xtype: "panel ",
bodyBorder: false,
header: {
title: "Day 4: Layout Part I ",
style: "background - color: white ",
border: false
},
items: {
margins: "0 0 0 20 ",
xtype: "displayfield ",
value: "Fit Layout, HBox Layout, VBox Layout "
},
border: false,
padding: "3 0 0 10 ",
margins: "10 0 0 20 ",
width: "100 % ",
}, {
xtype: "panel ",
bodyBorder: false,
header: {
title: "Day 5: Layout Part II ",
style: "background - color: white ",
border: false
},
items: {
margins: "0 0 0 20 ",
xtype: "displayfield ",
value: "Border Layout Accordian Layout Card Layout "
},
border: false,
padding: "3 0 0 10 ",
margins: "10 0 0 20 ",
width: "100 % ",
}];
elearning.course.extjs = Ext.create("Ext.panel.Panel", {
border: false,
margins: "10 ",
layout: "vbox ",
items: elearning.course.extjs.format2
});

Gary Schlosberg
21 Apr 2014, 9:11 AM
I updated the Fiddle with your more recent version, but it still doesn't run, even in 4.2.0.
https://fiddle.sencha.com/#fiddle/57d

aw1zard2
21 Apr 2014, 9:46 AM
You need to run this code in JSLint because there are a lot of trailing commas just looking at the example.
And instead of doing Ext.create outside of the onReady you should use Ext.Define instead or put your Ext.creates inside the Ext.onReady function before the create of the viewport.

I bet Ext is trying to create the objects before the framework is ready which is causing the fiddle issue.