• 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
اموزش extjs
#1
ext js یکی از فریم ورک های قوی برای کار با جاوا اسکریپت هست که کار های خارق العاده می تونین باهاش انجام بدین من خدوم مدت زیادی نیست که شروع به یادگیری این فریم ورک کردم ولی امیدوارم اگر جایی اشتباهی در گفته هام بود افراد متخصصی که در این زمینه فعالیت دارند من رو راهنمایی کنند.

extjs ویژگی های زیادی برای یک طراح دارد که می تواند از هر لحاظ کار های او را منحصر بفرد کند .
قابل اجرا بودن در تمام مرورگرها به صورت یکسان (یکی از مشکلاتی که در کد نویسی جاوا اسکریپت وجود دارد متفاوت بودن نتایج بعضی از کدها درمرورگرهای مختف هست که این مشل در extjs تقریبا به طور کامل رفع شده است)
قابلیت بکار بردن چندین فریم ورک در کنار هم.
قابلیت استفاده در ajax با استفاده از کلاس داخلی فریم ورک .
قابلیت های فراوان برای ایجاد صفحات کاملا کاربر پسند . نمونه کارها


برای شروع می تونین extjs رو از ادرس زیر دانلود کنید .
download extjs


بعد از خروج از حالت فشرده با جندین پوشه مواجه می شودید که عبارتند از

پوشه Adapter : شامل فایل هایی است که به شما امکان می دهد در کنار این کتابخانه از کتابخانه های دیگر نیز استفاده نمایید .

پوشه Resources : شمال فایل های وابسته به کتابخانه Ext مانند عکس ها فایل های css و ....

پوشه docs : شما document مربوط به ext (البته موقعی قابل استفاده است که از وب سرور اجرا شود )

پوشه examples : شامل نمونه کد های اماده در هر مورد .
  پاسخ
#2
بهتره دقیقتر بگیم با کمی اصلاحی
adapter: دارای چندین زیر پوشه هست که از اسمشون مشخص هست. extjs برای اجرا نیاز به یک adapter داره. خود extjs یزی به نام ext-base-adabter داره که بیشتر از این استفاده میشه. اما اگر شما از jquery در پروژه خودتون استفاده کرده باشید می تونید به جای ext-base از jquery-adapter استفاده کنید. همینطور برای prototype و YUI.
docs : همونجور که حسین عزیز گفت
examples : همونجور که حسین عزیز گفت
resources : همونجور که حسین عزیز گفت
src : همه فایلها به صورت debug ( توضیحات و فایلهای غیر فشرده) در این پوشه قرار دارد.
ext-all.js : همه کتابخانه به صورت compress شده داخل این فایل قرار داره
ext-all-debug.js : همه کتابخانه به صورت debug ( بدون توضیحات) داخل این فایل قرار داره

ممنون حسین جان
  پاسخ
تشکر شده توسط : zoghal php molana parvane imanclassic
#3
اول مثل اینکه باید یه تشکر از وحید بکنم که مطالب رو کامل کرد . (وحید دوست داریم Heart)

برای استفاده از extjs ابتدا باید فایل های مورد نیاز برای کار با این فریم ورک رو داخل برنامه خودتون بارگذاری کنید .بهتره تمام فایل ها به ترتیب بارگذاری بشن تا درکارها به مشکل بر نخورین .


کد پی‌اچ‌پی:
<html>
<
head>
<
title>Untitled Document</title>
<
link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<!-- 
فایل css بالا در واقع در بردارنده فایل اصلی مربوط به stylesheet  فریم ورک می باشد-->
<
script src="lib/extjs/adapter/ext/ext-base.js"></script>
<!-- 
رابط اصلی فریم ورک می باشد -->
<
script src="lib/extjs/ext-all-debug.js"></script>
<
script>
 
// your code 
</script>

</
head>
<
body>

</
body>
</
html

اما در صورتی که بخواین از فریم ورک های دیگری هم در کنار فریم ورک extjs استفاده کنین دیگر نیازی به بارگذاری ext-base.js نیست ابتدا باید فایل های اصلی مربوط به ان کتابخانه مثلا jquery رو فراخوانی کرده وبعد از فراخونی adapter مربوط به jquery را که در همان پوشه adapter فریم ورک ext موجود است را بار گذاری می کنتیم و در انتها نیز فایل ext-all.js یا ext-all-debug.js را که مربوط به فریم ورک ext می باشد را باگذاری می کنیم .


کد پی‌اچ‌پی:
<!-- برای  jQueryفایل های اصلی مربوط به این کتابخانه را بعلاوه adapter مربوطه بارگذاری میکنیم  -->

<
script src="lib/jquery.js"></script>
<
script src="lib/jquery-plugins.js"></script>
<
script src="lib/extjs/adapter/jquery/ext-jquery-adapter.js"></script>


<
script src="lib/extjs/ext-all-debug.js"></script>

<
script


اولین مثالی که در کتاب ها برای این فریم ورک می توانید پیدا کنید مثال زیر است

کد پی‌اچ‌پی:
<html>
<
head>
    <
title>Getting Started Example</title>
    <
link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
    <
script src="lib/extjs/adapter/ext/ext-base.js"></script>
    <
script src="lib/extjs/ext-all-debug.js"></script>
    <
script>
          
Ext.onReady(function(){
            
Ext.Msg.alert('Hello''World');
        });
    </
script>
</
head>
<
body>
    
</
body>
</
html
کد بالا یک هشدار را با ساختار ext برای کاربر نمایش می دهد پیام نمایش داده شده در واقع از یک div تشکیل شده است که ext به شما امکان جابجایی پیام به هر مکانی در داخل پنجره و امکان بستن ان با کلید esc را می دهد .

در مورد کد بالا

Ext پایه ترین کلاس در این فریم ورک می باشد و برای اکثر کار ها از این کلاس اسفاده می کنیم . رویداد onReady از ext هنگامی اجرا می شود که صفحه به طور کامل بارگذاری شده باشد .

کد پی‌اچ‌پی:
Ext.onReady(function(){

}) 
  پاسخ
تشکر شده توسط : molana zoghal
#4
یه قسمت از آموزش به صورت کوچک رو من آموزش بدم
یک‌ کانفیگ بسیار کوچک را باید قبل از اجرا Extjs انجام‌ دهید.
Extjs نیاز به یک نشانی فایل تصویر خالی با ابعاد ۱*۱ می باشد. به صورت پیشفرض می توانید به این صورت عمل کنید
کد پی‌اچ‌پی:
<html>
<
head>
    <
title>Getting Started Example</title>
    <
link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
    <
script src="lib/extjs/adapter/ext/ext-base.js"></script>
    <
script src="lib/extjs/ext-all-debug.js"></script>
    <
script>
Ext.BLANK_IMAGE_URL 'lib/ext/resources/images/default/s.gif';
          
Ext.onReady(function(){
            
Ext.Msg.alert('Hello''World');
        });
    </
script>
</
head>

<
body>
    
</
body>
</
html

به Ext.BLANK_IMAGE_URL دقت ‌کنید
  پاسخ
تشکر شده توسط : zoghal php molana masooumi af6900 farhadfery
#5
Rainbow 
سلام
برای دوستانی که به دنبال کتاب ext js هستند
به دلیل حجم بالای کتاب موفق نشدم در اینجا قرار دهم
برای دانلود کتاب کلیک کنید.

http://amertad.ir/fa/news/view/58

پسورد فایل : www.amertad.ir

امیدوارم مفید واقع گردد.
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان