/
  • شروع کار با Extjs

  • ارسال پاسخ   امتیاز موضوع:
    • 2 رأی - میانگین امیتازات: 4.5
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی شروع کار با Extjs
    نویسنده پیام
    admin آفلاین
    وحید سهرابلو
    **********

    ارسال‌ها: 5,697
    تاریخ عضویت: ۱۳۸۷ آذر ۲۴
    اعتبار: 100
    تشکرها : 1362
    ( 6197 تشکر در 3438 ارسال )
    ارسال: #1
    شروع کار با Extjs
    چرا Ext js ؟
    شاید الان نتونم دلیل این رو دقیق واستون بگم وقتی خودتون باهاش کار کنید خواهید فهمید که چرا وحید هی می گفت ExtjsBig 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 تعریف کنید اگر نکنید از به صورت پیشفرض از سایت http://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
    بچه ها من خسته شدم خودتون دیگه برید ور برید باهاش مثالها یادتون نره
    سعی کنید اول مثالهای ساده رو ببینید نرید سختهاش (البته سخت نیستن)

    مشکلی بود رد خدمتم
    ۱۳۸۷ بهمن ۲۱ ۰۱:۰۹ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط : molana scooter zoghal php محمد masooumi PowerDesign
    « قدیمی تر | تازه‌ تر »

    ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS