شروع کار با Extjs

**admin** · ۱۳۸۷ بهمن ۲۱, ۰۲:۰۹ ب.ظ

چرا Ext js ؟
شاید الان نتونم دلیل این رو دقیق واستون بگم وقتی خودتون باهاش کار کنید خواهید فهمید که چرا وحید هی می گفت Extjs Big Grin

دلیل رو بزارید سادگی در طراحی (البته واسه وقتی که خوب یاد گرفتید)

کار اول :
دریافت فایل

فایل رو از کجا بگیریم؟
از این آدرس می تونید فایل رو بگیرید
http://www.extjs.com/products/extjs/down...l=extjs221
بعدش فایل رو توی یه حایی بارگذاری کنید که از طریف localhost بتونید بهش دسترسی داشته باشید
حالا که آدرس رو باز می کنید با دو قسمت کار داریم
docs
و
examples

از روی اسمشون معلومه که این دو چی هستن. داکیومنت رو بعدن توضیح خواهم داد مثال ها هم خودتون نگاه کنید حالشو ببرید Big Grin

حالا می خوایم یک صفحه ایجاد کنیم و از Extjs استفاده کنیم
فایلهای مورد نیاز که باید از پوشه اصلی برداریم چیا هستن
فایل
ext-all.js
ext-all-debug.js
پوشه‌های
adapter
resources

اینها رو برای پروژه خودمون کپی بر می داریم و داخل یک پوشه می زاریم مثلا پوشه
test
حالا یک فایل داخل این پوشه ایجاد می کنیم مثلا
text.html

کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Ext js</title>

        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

     <script type="text/javascript" src="adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="ext-all.js"></script>

    </head>

    <body>

    </body>

</html>

به فایلهای که پیوست شده دقیق توجه کنید
فایل ext-all.js حجمش بالاست؟ Confused

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

یه فایل دیگه می سازیم به اسم text.js که اطلاعات js رو داخل اون قرار می دیم و فایل test.js رو هم پیوست فایل test.html می کنیم
حالا فایل test.htm lمیشه این (من دو تا div هم بهش اضافه کردم که بعدن ازش استفاده می کنیم)

کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Ext js</title>

        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

     <script type="text/javascript" src="adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="ext-all.js"></script>

    <script type="text/javascript" src="test.js.js"></script>

    </head>

    <body>

        <div id="div1"></div>

        <div id="div2"></div>

    </body>

</html>

حالا میریم سراغ فایل test.js و کد نویسی extjs رو شروع می کنیم
یک نکته : بچه هایی که جاوااسکریپت کار کردن می دونن که کدهای جاوااسکریپت به تگها و قسمتهایی که بعد از اون ها قرار م گیره که می خواد دریافت بشه دسترسی نداره. و همه هم می دونن که اول قسمت head دریافت میشه و بعد قسمت body حالا چون فایل test.js توی head قرار گرفته به مشکل بر می خوریم. یا باید این فایل رو در آخر body پیوست کنیم یا باید ...
در داخل extjs از آبجکست خود Ext یک متد وجود داره به نام onReady که این متد خودش یک فانکشن رو می گیره و بعد از اینکه صفحه کامل بارگذاری شد اجرا می کنه پس کد ما هم باید از این متد استفاده کنه

کد:
/**

 * Use this ScriptDoc file to manage the documentation for the corresponding namespace in your JavaScript library.

 *

 * @author vahid

 */

Ext.onReady(function(){

    //Code Here

})

حالا بچه ها firebug رو اجرا کنید
firebug دیگه چیه؟ از استاد گوگل بپرس
چرا اجرا کنم؟
واسه اینکه همه تغییرات رو ببینی عزیز

حالا می خوایم یه تستی کنیم

من یه خط اضافه هم که می دونم واستشون سوال پیش میاد گذاشتم که الان بهتون میگم چیه

کد:
/**

 * Use this ScriptDoc file to manage the documentation for the corresponding namespace in your JavaScript library.

 *

 * @author vahid

 */

Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';

Ext.onReady(function() {

    alert("Congratulations!  You have Ext configured correctly!");

});

حالا خط
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif'; چیه؟
داخل Extjs شما نیاز به یک عکس دارید که محتواش خالی باشه و این آدرس رو باید برای extjs تعریف کنید اگر نکنید از به صورت پیشفرض از سایت www.extjs.com می گیره

حالا ما شما به یه المنت چه جوری دسترسی پیدا می کنید؟
حتما مثلا برای div1 میگید به این صورت

کد:
var myDiv = document.getElementById('div1');

اما توی حالا روش رو تغییر بدید میشه اینجوری

کد:
Ext.onReady(function() {

    var myDiv = Ext.get('div1');

});

حالا میگید چه فرقی کرد؟ حالا میگم

این myDiv ماله Extjs با اون یکی زمین تا آسمون فرق می کنه. حالا میگم چرا؟
اینون تست کن

کد:
Ext.onReady(function() {

    var myDiv = Ext.get('div1');

    myDiv.highlight();      // The element's background will highlight to yellow then fade back

    myDiv.addClass('red');  // Add a custom CSS class (defined in ExtStart.css)

    myDiv.center();         // Center the element in the viewport

    myDiv.setOpacity(0.25);  // Make the element partially-transparent

});

اینا رو قبلا داشتی؟
دیگه چیا داره؟ همش رو که من نباید بگم برو از localhost بعد جایی extjs رو بارگذاری کردی بعد docs رو باز کن حالا اون گوشه سمت چپ بنویس Element تا Element پیدا بشه بعد بازش کن. در واقع myDiv شما یک آبجکت از همین Element هست
اینم آدرس دسترسی از خود سایت extjs.com
http://www.extjs.com/deploy/dev/docs/?class=Ext.Element
بچه ها من خسته شدم خودتون دیگه برید ور برید باهاش مثالها یادتون نره
سعی کنید اول مثالهای ساده رو ببینید نرید سختهاش (البته سخت نیستن)

مشکلی بود رد خدمتم

ورود




مرا به‌خاطر بسپار. فراموشی رمزعبور