Developersland

Teknoloji ve Yazılım Blogu

  • Yazıtipi boyutunu arttır
  • Varsayılan yazıtipi boyutu
  • Yazıtipi boyutunu azaltır

ExtJS ilk Örnek: Basit bir pencere yaratalım

Bu örnekte ExtJS javascript kütüphanesi kullanılarak basit bir pencere yaratmak için gerekli kodlar gösterilmiştir.

extjs ornek



index.jsp
içeriği aşağıdaki gibidir.


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html>
<head>
 
    <!-- Ext relies on its default css so include it here. -->
    <!-- This must come BEFORE javascript includes! -->
    <link rel="stylesheet" type="text/css" href="/extdenemesi/ext-3.0.3/resources/css/ext-all.css" />
 
    <!-- Include here your own css files if you have them. -->
 
    <!-- First of javascript includes must be an adapter... -->
    <script src="/extdenemesi/ext-3.0.3/adapter/ext/ext-base.js"></script>
 
    <!-- ...then you need the Ext itself, either debug or production version. -->
    <script src="/extdenemesi/ext-3.0.3/ext-all.js"></script>
 
    <!-- Include here your extended classes if you have some. -->
 
    <!-- Include here you application javascript file if you have it. -->
 
    <title>Getting Started with Extjs</title>
 
    <!-- You can have onReady function here or in your application file. -->
    <!-- If you have it in your application file delete the whole -->
    <!-- following script tag as we must have only one onReady. -->
 
    <script type="text/javascript">
    // Path to the blank image must point to a valid location on your server
    Ext.BLANK_IMAGE_URL = '/extdenemesi/ext-3.0.3/resources/images/default/s.gif';
    </script>

    <script type="text/javascript" src='js/helloWorld.js' ></script>
 
</head>
<body>
</body>
</html>


helloWorld.js dosyasının içeriği aşağıdaki gibidir.


    function buildWindow()
    {
        var win =new Ext.Window({
            id        :    'MyWindow',
            title    :     'My First Ext Window',
            width    :    '600',
            height    :    '300',
            layout    :    'fit',
            //html    :    'Salam',
            autoload    :    {
                url    :    'sayHi.html',
                scripts    :    true,
                autoLoad: true
            }
        });
       
        win.show();
    }
   
    Ext.onReady(buildWindow);


Extjs örnek


 

Yorumlar  

 
-2 #1 ismail yildiz 13-06-2012 17:04
bu kutuphanenin free bir versiyonu varmı ?
Alıntı
 
 
+1 #2 Administrator 13-06-2012 21:12
Ext JS kütüphanesi açık kaynak kodlu free bir kütüphane
Alıntı
 

Yorum ekle


Güvenlik kodu
Yenile