tag:blogger.com,1999:blog-49578635702965903902024-02-19T00:56:43.579-08:00I can't imagine a world without Java !!Aymen ABDALLAHhttp://www.blogger.com/profile/14727964359501961324noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-4957863570296590390.post-62738615844283859432013-02-14T02:31:00.001-08:002013-02-14T03:26:28.207-08:00A carousel component for Ext JS 4.0.7<br />
<h1 style="background-image: none; border: 0px; font-family: arial, sans-serif; font-size: x-large; margin-top: 0px; max-width: 700px; padding-left: 0px;">
</h1>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em; max-width: 64em;">
<br />
<div style="line-height: 1.25em; max-width: 64em;">
This component is a container for showing carousel. We add to this carousel the reflection for images. This version of carousel is based on Ext JS 4.0.7. This component is also based on a jquery component : CloudCarousel '1.0.5' <<a href="http://www.professorcloud.com/">http://www.professorcloud.com</a>>. For further information you would like to check this link : <a href="http://www.professorcloud.com/mainsite/carousel.htm">http://www.professorcloud.com/mainsite/carousel.htm</a></div>
<div style="line-height: 1.25em; max-width: 64em;">
<br /></div>
<div style="line-height: 1.25em; max-width: 64em;">
Here is an example for the use:</div>
<div style="line-height: 1.25em; max-width: 64em;">
<br /></div>
<div style="line-height: 1.25em; max-width: 64em;">
HTML mark-up :</div>
<div style="line-height: 1.25em; max-width: 64em;">
</div>
<pre class="prettyprint" style="background-color: #eeeeee; font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; font-size: 12px; line-height: normal; max-width: 70em; overflow: auto; padding: 0.5em;"><span class="pln"> </span><span class="tag" style="color: #000088;"><div</span><span class="pln"> </span><span class="atn" style="color: #660066;">id</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"carousel-div"</span><span class="tag" style="color: #000088;">/></span><span class="pln">
</span><span class="com" style="color: #880000;"><!-- Define left and right buttons. --></span><span class="pln">
</span><span class="tag" style="color: #000088;"><input</span><span class="pln"> </span><span class="atn" style="color: #660066;">id</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"left-but"</span><span class="pln"> </span><span class="atn" style="color: #660066;">type</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"button"</span><span class="pln"> </span><span class="atn" style="color: #660066;">value</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"Left"</span><span class="tag" style="color: #000088;">/></span><span class="pln"> </span><span class="tag" style="color: #000088;"><input</span><span class="pln"> </span><span class="atn" style="color: #660066;">id</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"right-but"</span><span class="pln"> </span><span class="atn" style="color: #660066;">type</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"button"</span><span class="pln"> </span><span class="atn" style="color: #660066;">value</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"Right"</span><span class="tag" style="color: #000088;">/></span><span class="pln"> </span>
<div style="line-height: 1.25em; max-width: 64em;">
<span class="com" style="color: #880000;"><!-- Define elements to accept the alt and title text from the images. --></span><span class="pln">
</span><span class="tag" style="color: #000088;"><p</span><span class="pln"> </span><span class="atn" style="color: #660066;">id</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"title-text"</span><span class="tag" style="color: #000088;">></p></span><span class="pln"> </span><span class="tag" style="color: #000088;"><p</span><span class="pln"> </span><span class="atn" style="color: #660066;">id</span><span class="pun" style="color: #666600;">=</span><span class="atv" style="color: #008800;">"alt-text"</span><span class="tag" style="color: #000088;">></p></span><span class="pln"> </span></div>
</pre>
<div style="line-height: 1.25em; max-width: 64em;">
</div>
<div style="line-height: 1.25em; max-width: 64em;">
The style may be like this one :</div>
<div style="line-height: 1.25em; max-width: 64em;">
</div>
<pre class="prettyprint" style="background-color: #eeeeee; font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; font-size: 12px; line-height: normal; max-width: 70em; overflow: auto; padding: 0.5em;"><span class="pln"> </span><span class="com" style="color: #880000;">#carousel-div{</span><span class="pln">
width</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">560px</span><span class="pun" style="color: #666600;">;</span><span class="pln">
height</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">400px</span><span class="pun" style="color: #666600;">;</span><span class="pln">
background</span><span class="pun" style="color: #666600;">:</span><span class="com" style="color: #880000;">#000;</span><span class="pln">
</span><span class="pun" style="color: #666600;">}</span></pre>
<div style="line-height: 1.25em; max-width: 64em;">
</div>
<div style="line-height: 1.25em; max-width: 64em;">
Configuration options for the carousel :</div>
<div style="line-height: 1.25em; max-width: 64em;">
</div>
<pre class="prettyprint" style="background-color: #eeeeee; font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; font-size: 12px; line-height: normal; max-width: 70em; overflow: auto; padding: 0.5em;"><span class="pln">
</span><span class="typ" style="color: #660066;">Ext</span><span class="pun" style="color: #666600;">.</span><span class="pln">onReady</span><span class="pun" style="color: #666600;">(</span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">()</span><span class="pln"> </span><span class="pun" style="color: #666600;">{</span><span class="pln">
</span><span class="typ" style="color: #660066;">Ext</span><span class="pun" style="color: #666600;">.</span><span class="pln">createWidget</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'carousel'</span><span class="pun" style="color: #666600;">,{</span><span class="pln">
id</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="str" style="color: #008800;">'carousel-id'</span><span class="pun" style="color: #666600;">,</span><span class="pln">
xPos</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="lit" style="color: #006666;">280</span><span class="pun" style="color: #666600;">,</span><span class="pln">
yPos</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="lit" style="color: #006666;">80</span><span class="pun" style="color: #666600;">,</span><span class="pln">
FPS</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="lit" style="color: #006666;">30</span><span class="pun" style="color: #666600;">,</span><span class="pln">
reflHeight</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="lit" style="color: #006666;">56</span><span class="pun" style="color: #666600;">,</span><span class="pln">
reflGap</span><span class="pun" style="color: #666600;">:</span><span class="lit" style="color: #006666;">2</span><span class="pun" style="color: #666600;">,</span><span class="pln">
buttonLeft</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="str" style="color: #008800;">'left-but'</span><span class="pun" style="color: #666600;">,</span><span class="pln">
buttonRight</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="str" style="color: #008800;">'right-but'</span><span class="pun" style="color: #666600;">,</span><span class="pln">
altBox</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="str" style="color: #008800;">'alt-text'</span><span class="pun" style="color: #666600;">,</span><span class="pln">
titleBox</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="str" style="color: #008800;">'title-text'</span><span class="pun" style="color: #666600;">,</span><span class="pln">
autoRotate</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="str" style="color: #008800;">'no'</span><span class="pun" style="color: #666600;">,</span><span class="pln">
renderTo</span><span class="pun" style="color: #666600;">:</span><span class="pln"> </span><span class="str" style="color: #008800;">'carousel-div'</span><span class="pln">
</span><span class="pun" style="color: #666600;">});</span><span class="pln">
</span><span class="pun" style="color: #666600;">});</span></pre>
</div>
<div style="max-width: 64em;">
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
<br /></div>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
You will get a view like this one :</div>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
<br /></div>
<div class="separator" style="clear: both; font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgio5TxMtY9crzBpjZJeafwJVEf75Xr6WKCfHFi_dqpscDGBODFMg-3B0n5NfxHAo7hOmfuSpHs2yaCHvJQXDnZ9th8DtPW8lKWbVsCkQrGJiTtORLl9jHmeM3PW_5MAVQs0PlrerU4vZOI/s1600/carousel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgio5TxMtY9crzBpjZJeafwJVEf75Xr6WKCfHFi_dqpscDGBODFMg-3B0n5NfxHAo7hOmfuSpHs2yaCHvJQXDnZ9th8DtPW8lKWbVsCkQrGJiTtORLl9jHmeM3PW_5MAVQs0PlrerU4vZOI/s1600/carousel.jpg" height="556" width="640" /></a></div>
<div class="separator" style="clear: both; font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em; text-align: center;">
<br /></div>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
This component is in google code : <a href="http://code.google.com/p/ext-js-carousel"><b>http://code.google.com/p/ext-js-carousel</b></a></div>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
For further information about the component check the wiki in the google code : <b><a href="http://code.google.com/p/ext-js-carousel/wiki/Introduction">http://code.google.com/p/ext-js-carousel/wiki/Introduction</a></b></div>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
<br /></div>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
<br /></div>
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.25em;">
<br /></div>
</div>
Aymen ABDALLAHhttp://www.blogger.com/profile/14727964359501961324noreply@blogger.com2tag:blogger.com,1999:blog-4957863570296590390.post-30786072574705537622012-10-01T03:31:00.000-07:002012-10-01T03:32:37.713-07:00Arabic translation for Ext JS 4<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
pre.prettyprint {
border: 1px solid #888888;
padding: 2px;
}
pre {
background-color: transparent !important;
font-family: Monaco,"Bitstream Vera Sans Mono",monospace,"Courier";
}
pre {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px dashed #DCDCDC;
margin: 15px 10px 15px 0;
overflow: hidden;
padding: 4px 8px;
white-space: pre-wrap !important;
word-break: break-all;
word-wrap: break-word;
}
</style>
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<b>This is a proposal for a translation to arabic for Ext JS 4</b></div>
<pre><code>
/**
* Arabic Translation for Ext JS 4
* (03 mai 2012)
* By Aymen ABDALLAH
* aymen.abdallah@gmail.com
*/
Ext.onReady(function() {
if (Ext.Updater) {
Ext.Updater.defaults.indicatorText = '<div class="loading-indicator">...جاري التحميل</div>';
}
if(Ext.data.Types){
Ext.data.Types.stripRe = /[\$,%]/g;
}
if(Ext.view.View){
Ext.view.View.prototype.emptyText = "";
}
if(Ext.grid.Panel){
Ext.grid.Panel.prototype.ddText = "{0} {1} أعمدة مختارة";
}
if(Ext.LoadMask){
Ext.LoadMask.prototype.msg = "...جاري التحميل";
}
if(Ext.Date) {
Ext.Date.shortMonthNames = [
"جانفي",
"فيفري",
"مارس",
"أفريل",
"ماي",
"جوان",
"جويلية",
"أوت",
"سبتمبر",
"أكتوبر",
"نوفيمبر",
"ديسمبر"
];
Ext.Date.getShortMonthName = function(month) {
return Ext.Date.shortMonthNames[month];
};
Ext.Date.monthNames = [
"جانفي",
"فيفري",
"مارس",
"أفريل",
"ماي",
"جوان",
"جويلية",
"أوت",
"سبتمبر",
"أكتوبر",
"نوفيمبر",
"ديسمبر"
];
Ext.Date.monthNumbers = {
"جانفي": 0,
"فيفري": 1,
"مارس": 2,
"أفريل": 3,
"ماي": 4,
"جوان": 5,
"جويلية": 6,
"أوت": 7,
"سبتمبر": 8,
"أكتوبر": 9,
"نوفيمبر": 10,
"ديسمبر": 11
};
Ext.Date.getMonthNumber = function(name) {
return Ext.Date.monthNumbers[Ext.util.Format.capitalize(name)];
};
Ext.Date.dayNames = [
"أحد",
"أثنين",
"ثلاثاء",
"أربعاء",
"خميس",
"جمعة",
"سبت"
];
Ext.Date.getShortDayName = function(day) {
return Ext.Date.dayNames[day].substring(0, 3);
};
Ext.Date.parseCodes.S.s = "(?:st|nd|rd|th)";
}
if(Ext.MessageBox){
Ext.MessageBox.buttonText = {
ok : "موافق",
cancel : "الغاء",
yes : "نعم",
no : "لا"
};
}
if(Ext.util.Format){
Ext.apply(Ext.util.Format, {
thousandSeparator: ',',
decimalSeparator: '.',
currencySign: '$',
dateFormat: 'd/m/Y'
});
}
if(Ext.picker.Date){
Ext.apply(Ext.picker.Date.prototype, {
todayText : "اليوم",
minText : "هذا التاريخ قبل أقل تاريخ مسموح به",
maxText : "هذا التاريخ بعد أكبر تاريخ مسموح به",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Ext.Date.monthNames,
dayNames : Ext.Date.dayNames,
nextText : 'الشهر القادك (Control+Right)',
prevText : 'الشهر السابق (Control+Left)',
monthYearText : 'أختر الشهر (Control+Up/Down to move years)',
todayTip : "{0} (Spacebar)",
format : "d/m/y",
startDay : 0
});
}
if(Ext.picker.Month) {
Ext.apply(Ext.picker.Month.prototype, {
okText : "&#160;OK&#160;",
cancelText : "ألغاء",
});
}
if(Ext.toolbar.Paging){
Ext.apply(Ext.PagingToolbar.prototype, {
beforePageText : "صفحة",
afterPageText : "{0} من",
firstText : "الأولى",
prevText : "الصفحة السابقة",
nextText : "الصفحة التالية",
lastText : "الأخيرة",
refreshText : "تحديث",
displayMsg : "{2} يعرض {0} - {1} من",
emptyMsg : 'لا يوجد تاريخ لعرضه'
});
}
if(Ext.form.Basic){
Ext.form.Basic.prototype.waitTitle = "...يرجى الأنتظار";
}
if(Ext.form.field.Base){
Ext.form.field.Base.prototype.invalidText = "القيمة بهذا الحقل غير صحيحة";
}
if(Ext.form.field.Text){
Ext.apply(Ext.form.field.Text.prototype, {
minLengthText : "{0} الحد الأقصى لهذا الحقل هو",
maxLengthText : "{0} الحد الأدنى لهذا الحقل هو",
blankText : "هذا الحقل مطلوب",
regexText : "",
emptyText : null
});
}
if(Ext.form.field.Number){
Ext.apply(Ext.form.field.Number.prototype, {
decimalSeparator : ".",
decimalPrecision : 2,
minText : "{0} أعلى قيمة بهذا الحصل هي",
maxText : "{0} أقل قيمة بهذا الحقل هي",
nanText : "{0} هذا الرقم غير صحيح"
});
}
if(Ext.form.field.Date){
Ext.apply(Ext.form.field.Date.prototype, {
disabledDaysText : "معطل",
disabledDatesText : "معطل",
minText : "{0} التاريخ بهذا الحقل يجب ان يكون بعد",
maxText : "{0} التاريخ بهذا الحقل يجب ان يكون قبل",
invalidText : "{0} {1} هذا التاريح غير صحيح - يجب أن يكون بهذه الصيغة",
format : "d/m/y",
altFormats : "d/m/Y|d-m-y|d-m-Y|d/m|d-m|dm|dmy|dmY|d|Y-m-d"
});
}
if(Ext.form.field.ComboBox){
Ext.apply(Ext.form.field.ComboBox.prototype, {
valueNotFoundText : undefined
});
Ext.apply(Ext.form.field.ComboBox.prototype.defaultListConfig, {
loadingText : "...جاري التحميل"
});
}
if(Ext.form.field.VTypes){
Ext.apply(Ext.form.field.VTypes, {
emailText : '"user@example.com" هذا الحقل يجب ان تكون بريد ألكتروني بهذه الصيغة',
urlText : '"http:/'+'/www.example.com" هذا الحقل يجب ان يحتوي على رابط موقع وبهذه الصيغة',
alphaText : '_ هذا الحقل يجب ان يحتوي على احرف ورمز الشرطة التحتية',
alphanumText : '_ هذا الحقل يجب ان يحتوي على احرف وأرقام ورمز الشرطة التحتية'
});
}
if(Ext.form.field.HtmlEditor){
Ext.apply(Ext.form.field.HtmlEditor.prototype, {
createLinkText : ':يرجى ادخال الرابط',
buttonTips : {
bold : {
title: 'سميك (Ctrl+B)',
text: '.أجعل النص المحدد سميك',
cls: 'x-html-editor-tip'
},
italic : {
title: 'مائل (Ctrl+I)',
text: '.أجعل النص المحدد مائل',
cls: 'x-html-editor-tip'
},
underline : {
title: 'خط تحتي (Ctrl+U)',
text: '.ضع خط تحت النص المحدد',
cls: 'x-html-editor-tip'
},
increasefontsize : {
title: 'تكبير',
text: 'زيادة حجم الخط.',
cls: 'x-html-editor-tip'
},
decreasefontsize : {
title: 'تصغير',
text: '.تقليل حجم الخط',
cls: 'x-html-editor-tip'
},
backcolor : {
title: 'لون خلفية',
text: '.تغيير لون خلفية النص المحدد',
cls: 'x-html-editor-tip'
},
forecolor : {
title: 'لون الخط',
text: '.تغيير لون النص المحدد',
cls: 'x-html-editor-tip'
},
justifyleft : {
title: 'محازاة لليسار',
text: '.محازاة النص لليسار',
cls: 'x-html-editor-tip'
},
justifycenter : {
title: 'توصيط النص',
text: 'توسط النص المحدد.',
cls: 'x-html-editor-tip'
},
justifyright : {
title: 'محازاة لليمين',
text: '.محازاة النص المحدد لليمين',
cls: 'x-html-editor-tip'
},
insertunorderedlist : {
title: 'قائمة كرات',
text: '.أبدأ قائمة كرات',
cls: 'x-html-editor-tip'
},
insertorderedlist : {
title: 'قائمة أرقام',
text: '.أبدا قائمة أرقام',
cls: 'x-html-editor-tip'
},
createlink : {
title: 'رابط تشعبي',
text: '.أجعل النص المحدد رابط تشعبي',
cls: 'x-html-editor-tip'
},
sourceedit : {
title: 'تحرير المصدر',
text: '.أنتقل لتحرير كود المصدر',
cls: 'x-html-editor-tip'
}
}
});
}
if(Ext.grid.header.Container){
Ext.apply(Ext.grid.header.Container.prototype, {
sortAscText : "فرز تصاعدي",
sortDescText : "فرز تنازلي",
columnsText : "أعمدة"
});
}
if(Ext.grid.GroupingFeature){
Ext.apply(Ext.grid.GroupingFeature.prototype, {
emptyGroupText : '(لا شيء)',
groupByText : 'تحميع بدلالة هذا العمود',
showGroupsText : 'أعرض كمجموعات'
});
}
if(Ext.grid.PropertyColumnModel){
Ext.apply(Ext.grid.PropertyColumnModel.prototype, {
nameText : "صفة",
valueText : "قيمة",
dateFormat : "d/m/Y",
trueText : "صحيح",
falseText : "غير صحيح"
});
}
if(Ext.layout.BorderLayout && Ext.layout.BorderLayout.SplitRegion){
Ext.apply(Ext.layout.BorderLayout.SplitRegion.prototype, {
splitTip : ".اسحب لتغيير حجم",
collapsibleSplitTip : ".انقر مرتين للإخفاء.اسحب لتغيير حجم"
});
}
if(Ext.form.field.Time){
Ext.apply(Ext.form.field.Time.prototype, {
minText : "{0} الوقت بهذا الحقل يجب ان يكون أكبر من أو يساوي",
maxText : "{0} الوقت بهذا الحقل يجب ان يكون أقل من أو يساوي",
invalidText : "{0} ليست تنسيق صحيح للوقت",
format : "g:i A",
altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
});
}
if(Ext.form.CheckboxGroup){
Ext.apply(Ext.form.CheckboxGroup.prototype, {
blankText : "يجب تحديد عنصر واحد على الأقل في هذه المجموعة"
});
}
if(Ext.form.RadioGroup){
Ext.apply(Ext.form.RadioGroup.prototype, {
blankText : "يجب تحديد عنصر واحد في هذه المجموعة"
});
}
});
</code></pre>
</div>
Aymen ABDALLAHhttp://www.blogger.com/profile/14727964359501961324noreply@blogger.com1