PDA

View Full Version : chrome / safari slowing down with htmleditor and scrolling crash



bora.erbasoglu
7 Feb 2013, 10:06 AM
Hi there

I have interesting problem. Only on chrome and safari when i open this code in window , window scroll bar is crashing, and some htmleditor box are strangely geting on absolute position etc etc... if i change xtype from htmleditor to texarea is all good. But on mozilla allways perfect ? i couldnt find any solution or what is happining there ? i cant understand is it windows layout problem or htmleditor crashes on multiple configuration ?!?!? Please waiting for help. I tried many ways to fix this problem. like using delay initial...

By the way this problem covers other wyswyg editorsss... like tinymce




var mailFormObject;
var storeRef;
Ext.require([
'Ext.form.*',
'Ext.form.field.File',
'Ext.layout.container.Column',
'Ext.tab.Panel',
'Ext.window.MessageBox'


]);


Ext.onReady(function() {


Ext.QuickTips.init();


var required = '<span style=\"color:red;font-weight:bold\" data-qtip=\"Required\">*</span>';


if (actionType == 'addRow') {
var buttonText = 'Ekle';
setAction = frameworkbase+'xcms/product/addRow';
}
else {
var buttonText = 'Düzenle';
setAction = frameworkbase+'xcms/product/editRow/'+globalEditId;
}


Ext.define('referenceCategory', {
extend: 'Ext.data.Model',
fields: [
{
name: 'product_category_id',
type: 'integer'
},


{
name: 'product_category_name',
type: 'string'
}
]
});


storeRef = new Ext.data.Store({
model: 'referenceCategory',
proxy: {
type: 'jsonp',
url: frameworkbase+'xcms/product_category/getProductCategoryForSelect',
reader: {


root: 'ref'
}
},
autoLoad: true // set autoloading to false
});


uploadForm = Ext.create('Ext.form.Panel', {
width: '100%',
bodyPadding: 10,
frame: true,
id: 'addPhotoForm',
renderTo: document.getElementById('addRowWindow-body'),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Resim',
labelWidth: 100,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Dosya Seçiniz...'
}],


buttons: [{
text: 'Yükle',
handler: function() {
var form = uploadForm.getForm();
if(form.isValid()){


form.submit({
url: frameworkbase+'xcms/product/addPhoto',
waitMsg: 'Ürün Yükleniyor...',
success: function(fp, o) {
if (o.result.error == false) {
Ext.Msg.alert('Success', o.result.message );
mailFormObject.getForm().setValues({
'product_image':o.result.file_name
});
}else {
Ext.Msg.alert('Hata', o.result.message );
}
}
});
}
}
}]
});






mailFormObject = Ext.widget({
xtype: 'form',
layout: {
type: 'form',
pack: 'start',
align: 'stretch'
},
collapsible: false,
id: 'addRowForm',
url: setAction,
frame: true,
renderTo:Ext.get('addRowWindow-body'),
bodyPadding: '24 5 0',


fieldDefaults: {
msgTarget: 'side',
labelWidth: 150
},


defaultType: 'textfield',
items: [{
fieldLabel: 'Ürün Kategori',
xtype: 'combo',
afterLabelTextTpl: required,
name: 'product_category',
store : storeRef,
selectOnFocus:true,
queryMode: 'local',
displayField: 'product_category_name',
valueField: 'product_category_id',
valueNotFoundText:"Seçiniz",
// forceSelection:true,
typeAhead:true,
minChars : 2,
autoSelect : true,
allowBlank : false,
queryMode: 'local'








},{
fieldLabel: 'Ürün Ba?lant?',
name: 'product_url'
} , {
xtype: 'hiddenfield',
name: 'product_image'


}],


buttons: [{
text: buttonText,
formBind: true,
disabled: true,
handler: function(button) {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {


store.loadPage(1);
winAddRow.destroy();


},
failure: function(form, action) {


Ext.Msg.alert('Hata', action.result.msg);
}
});
}
}
},{
text: 'S?f?rla',
handler: function() {
this.up('form').getForm().reset();
}
}]
});


$.each(lang,function(key,value) {
console.log(value);
mailFormObject.add({
fieldLabel: 'Ürün Ba?l??? ' + value,
name: 'product_form_title_' + value,
allowBlank:true
}, {
fieldLabel: 'Ürün Aç?klama ' + value,
name: 'product_description_' + value,
id: 'product_description_' + value,
xtype: 'textarea'






}


, {
fieldLabel: 'Standart Üretim Boyutlar? ' + value,
name: 'product_swh_' + value,
id: 'product_swh_' + value,
xtype: 'htmleditor'




}



, {
fieldLabel: 'Malzeme Yap?s? ' + value,
name: 'product_pm_' + value,
id: 'product_pm_' + value,
xtype: 'htmleditor'








}, {
fieldLabel: 'Avantajlar? ' + value,
name: 'product_ad_' + value,
id: 'product_ad_' + value,
xtype: 'htmleditor'








}, {
fieldLabel: 'Teknik Özellikleri ' + value,
name: 'product_sp_' + value,
id: 'product_sp_' + value,
xtype: 'htmleditor'






});




});




mailFormObject.render(Ext.get('addRowWindow-body'));




if (actionType == 'editRow') {


mailFormObject.getForm().setValues(editData);


}




});

bora.erbasoglu
9 Feb 2013, 2:51 AM
no reply ? any suggestion ?


Hi there

I have interesting problem. Only on chrome and safari when i open this code in window , window scroll bar is crashing, and some htmleditor box are strangely geting on absolute position etc etc... if i change xtype from htmleditor to texarea is all good. But on mozilla allways perfect ? i couldnt find any solution or what is happining there ? i cant understand is it windows layout problem or htmleditor crashes on multiple configuration ?!?!? Please waiting for help. I tried many ways to fix this problem. like using delay initial...




var mailFormObject;
var storeRef;
Ext.require([
'Ext.form.*',
'Ext.form.field.File',
'Ext.layout.container.Column',
'Ext.tab.Panel',
'Ext.window.MessageBox'


]);


Ext.onReady(function() {


Ext.QuickTips.init();


var required = '<span style=\"color:red;font-weight:bold\" data-qtip=\"Required\">*</span>';


if (actionType == 'addRow') {
var buttonText = 'Ekle';
setAction = frameworkbase+'xcms/product/addRow';
}
else {
var buttonText = 'Düzenle';
setAction = frameworkbase+'xcms/product/editRow/'+globalEditId;
}


Ext.define('referenceCategory', {
extend: 'Ext.data.Model',
fields: [
{
name: 'product_category_id',
type: 'integer'
},


{
name: 'product_category_name',
type: 'string'
}
]
});


storeRef = new Ext.data.Store({
model: 'referenceCategory',
proxy: {
type: 'jsonp',
url: frameworkbase+'xcms/product_category/getProductCategoryForSelect',
reader: {


root: 'ref'
}
},
autoLoad: true // set autoloading to false
});


uploadForm = Ext.create('Ext.form.Panel', {
width: '100%',
bodyPadding: 10,
frame: true,
id: 'addPhotoForm',
renderTo: document.getElementById('addRowWindow-body'),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Resim',
labelWidth: 100,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Dosya Seçiniz...'
}],


buttons: [{
text: 'Yükle',
handler: function() {
var form = uploadForm.getForm();
if(form.isValid()){


form.submit({
url: frameworkbase+'xcms/product/addPhoto',
waitMsg: 'Ürün Yükleniyor...',
success: function(fp, o) {
if (o.result.error == false) {
Ext.Msg.alert('Success', o.result.message );
mailFormObject.getForm().setValues({
'product_image':o.result.file_name
});
}else {
Ext.Msg.alert('Hata', o.result.message );
}
}
});
}
}
}]
});






mailFormObject = Ext.widget({
xtype: 'form',
layout: {
type: 'form',
pack: 'start',
align: 'stretch'
},
collapsible: false,
id: 'addRowForm',
url: setAction,
frame: true,
renderTo:Ext.get('addRowWindow-body'),
bodyPadding: '24 5 0',


fieldDefaults: {
msgTarget: 'side',
labelWidth: 150
},


defaultType: 'textfield',
items: [{
fieldLabel: 'Ürün Kategori',
xtype: 'combo',
afterLabelTextTpl: required,
name: 'product_category',
store : storeRef,
selectOnFocus:true,
queryMode: 'local',
displayField: 'product_category_name',
valueField: 'product_category_id',
valueNotFoundText:"Seçiniz",
// forceSelection:true,
typeAhead:true,
minChars : 2,
autoSelect : true,
allowBlank : false,
queryMode: 'local'








},{
fieldLabel: 'Ürün Ba?lant?',
name: 'product_url'
} , {
xtype: 'hiddenfield',
name: 'product_image'


}],


buttons: [{
text: buttonText,
formBind: true,
disabled: true,
handler: function(button) {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {


store.loadPage(1);
winAddRow.destroy();


},
failure: function(form, action) {


Ext.Msg.alert('Hata', action.result.msg);
}
});
}
}
},{
text: 'S?f?rla',
handler: function() {
this.up('form').getForm().reset();
}
}]
});


$.each(lang,function(key,value) {
console.log(value);
mailFormObject.add({
fieldLabel: 'Ürün Ba?l??? ' + value,
name: 'product_form_title_' + value,
allowBlank:true
}, {
fieldLabel: 'Ürün Aç?klama ' + value,
name: 'product_description_' + value,
id: 'product_description_' + value,
xtype: 'textarea'






}


, {
fieldLabel: 'Standart Üretim Boyutlar? ' + value,
name: 'product_swh_' + value,
id: 'product_swh_' + value,
xtype: 'htmleditor'




}



, {
fieldLabel: 'Malzeme Yap?s? ' + value,
name: 'product_pm_' + value,
id: 'product_pm_' + value,
xtype: 'htmleditor'








}, {
fieldLabel: 'Avantajlar? ' + value,
name: 'product_ad_' + value,
id: 'product_ad_' + value,
xtype: 'htmleditor'








}, {
fieldLabel: 'Teknik Özellikleri ' + value,
name: 'product_sp_' + value,
id: 'product_sp_' + value,
xtype: 'htmleditor'






});




});




mailFormObject.render(Ext.get('addRowWindow-body'));




if (actionType == 'editRow') {


mailFormObject.getForm().setValues(editData);


}




});