11 Haziran 2015 Perşembe

XML Dosyasından Veri Okuma

Selam,
Bu yazımda bir XML dosyasındaki veriyi, veri tabanındaki ilgili tabloya ekleme işlemi yapan basit bir console application oluşturmayı anlatacağım. Ek olarak bir XML dosyasını okuyup konsola yazdırma işini de yapacağım. Kullandığım veri tabanı MsSQL, yazdığım dil C# ve uygulama türü ConsoleApplication.

Daha önce XML dosyası okuma/yazma vs ile pek işim olmamıştı. Dolayısıyla her zamanki gibi: "how to write sql to read from XML file?!..." gibi ufak bir araştırmadan sonra gerek msdn, gerek stackoverflow dan bunun yöntemini öğrenip, bulduklarımı toparladım ve istenen ihtiyacı karşıladım. Tabii ki sizleri de unutmadım, neyse lafı daha fazla uzatmadan...

Kodlar aşağıdadır, afiyet olsun.

Not: Örnek olması açısından database olarak çok rahat bulabileceğimiz Northwind database i kullandım, sokakta köşeyi dönseniz bile karşınıza çıkar. XML dosyasını kendim yazdım; Northwind içindeki Employees tablosuna veri eklediğim bir program bu. Employees tablosundan bazı sütunları sildim (Photo gibi) ve nvarchar tipindeki karakter sayısı verilen sütunları nvarchar(max) olarak değiştirdim ki veri uzunluğundan karşılaştığım ekleme hatalarını giderebilmek adına.

Küçük Bir Hatırlatma: MsSQL'de Table Design'de yaptığın bu değişikleri(sütun silme, veri tipi değiştirme..) kaydetme hatası alıyorsan ; MSSQL-> Tools sekmesini seç -> Options -> Designers seçtiğinde;  Prevent saving changes that require table re-creation daki tiki kaldırıp Ok seç. Bundan sonra tablo dizaynında istediğin değişikliği yapıp kaydedebilir; tekrardan yeni bir tablo oluşturmak zorunda kalmazsın.

 Yazdığım XML dosyasından sildiğim veri anlaşılacaktır o da bu:

Employees.xml (Proje->bin->debug içinden erişerek düzenleyebilirsin)

<?xml version="1.0" standalone="yes"?>
<DocumentElement>
  <Employees>
    <EmployeeID>10</EmployeeID>
    <LastName>john</LastName>
    <FirstName>london</FirstName>
    <Title>article</Title>
    <TitleOfCourtesy>Ms.</TitleOfCourtesy>
    <BirthDate>1944-12-08T00:00:00+02:00</BirthDate>
    <HireDate>1954-06-01T00:00:00+03:00</HireDate>
<Address> a plaza b blok c katı</Address>
    <City>508 - 20th Ave. E.
Apt. 2A</City>
    <Region>WA</Region>
    <PostalCode>98322</PostalCode>
    <Country>USA</Country>
    <HomePhone>(535) 111-9857</HomePhone>
    <Extension>66776</Extension>
    <Notes>Educatioxfgnvxfcfgcfal.</Notes>
    <ReportsTo>5</ReportsTo>
    <PhotoPath>http://google.com</PhotoPath>
  </Employees>
  
</DocumentElement>

App.config

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
    <configSections>
    </configSections>
    <startup> 
        <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5" />
    </startup>
  <connectionStrings>
    <add name="TestConnectionString" connectionString="Data Source=servername;Initial Catalog=northwind;User ID=sa;Password=şifre" />
    <add name="TestProject.Properties.Settings.northwindConnectionString"
      connectionString="Data Source=servername;Initial Catalog=northwind;Persist Security Info=True;User ID=sa;Password=şifre"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
</configuration>

Program.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Xml;

namespace TestProject //VS New Project-Console Application ProjectName
{

    class Program
    {
        private static void TableToXml()//XML dosyasının içeriğini //konsolda gösteren fonksiyon
        {
            try
            {
//Burada App.config içerisindeki connectionString i alıyorum
                string ConString = System.Configuration.ConfigurationManager.ConnectionStrings["TestConnectionString"].ConnectionString;
                string CmdString = "SELECT EmployeeID, LastName, FirstName, Title, TitleOfCourtesy, BirthDate, HireDate, Address,City, Region, PostalCode, Country, HomePhone, Extension, Notes, ReportsTo, PhotoPath FROM Employees";

                SqlConnection con;
                SqlCommand cmd;
                SqlDataAdapter sda;
                DataTable dt;

//Bir DataTable oluşturarak verileri bu DataTable'a atıyorum ve DataTable'i dolduruyorum
                using (con = new SqlConnection(ConString))
                {
                    cmd = new SqlCommand(CmdString, con);

                    con.Open();
                    dt = new DataTable("Employees");
                    sda = new SqlDataAdapter(cmd);
                    sda.Fill(dt);
                    dt.WriteXml("Employees.xml");
                    con.Close();
                }

//XML dosyasını burada okuyorum

                XmlTextReader reader = new XmlTextReader("Employees.xml");
                while (reader.Read())
                {
                    switch (reader.NodeType)
                    {
                        case XmlNodeType.Element:
                            Console.Write("<" + reader.Name);
                            Console.WriteLine(">");
                            break;
                        case XmlNodeType.Text:
                            Console.WriteLine(reader.Value);
                            break;
                        case XmlNodeType.EndElement:
                            Console.Write("</" + reader.Name);
                            Console.WriteLine(">");
                            break;
                    }
                }

                Console.ReadLine();
            }
            catch (Exception)
            {
                throw;
            }
        }
//XML dosyasındaki veriyi veritabanındaki ilgili tabloya ekleme işlemini yapan fonksiyon
        private static void XmlToDB()
        {
            string ConString = System.Configuration.ConfigurationManager.ConnectionStrings["TestConnectionString"].ConnectionString;
            SqlConnection connection;
            SqlCommand command;
            SqlDataAdapter adpter = new SqlDataAdapter();
            DataSet ds = new DataSet();
            XmlReader xmlFile;
            string sql = null;

            int EmployeeID = 0;
            string LastName = null;
            string FirstName = null;
            string Title = null;
            string TitleOfCourtesy = null;
            DateTime BirthDate = DateTime.Now;
            DateTime HireDate = DateTime.Now;
            string Address = null;
            string City = null;
            string Region = null;
            string PostalCode = null;
            string Country = null;
            string HomePhone = null;
            string Extension = null;
            string Notes = null;
            byte[] Photo= {0};
            int ReportsTo = 0;
            string PhotoPath = null;

            try { 
            connection = new SqlConnection(ConString);

            xmlFile = XmlReader.Create("Employees.xml", new XmlReaderSettings());
            ds.ReadXml(xmlFile);
            int i = 0;
            connection.Open();
            for (i = 0; i <= ds.Tables[0].Rows.Count - 1; i++)
            {
                EmployeeID = Convert.ToInt32(ds.Tables[0].Rows[i].ItemArray[0]);
                LastName = ds.Tables[0].Rows[i].ItemArray[1].ToString();
                FirstName = ds.Tables[0].Rows[i].ItemArray[2].ToString();
                Title = ds.Tables[0].Rows[i].ItemArray[3].ToString();
                TitleOfCourtesy = ds.Tables[0].Rows[i].ItemArray[4].ToString();
                BirthDate = Convert.ToDateTime(ds.Tables[0].Rows[i].ItemArray[5]);
                HireDate = Convert.ToDateTime(ds.Tables[0].Rows[i].ItemArray[6]);
                Address = ds.Tables[0].Rows[i].ItemArray[7].ToString();
                City = ds.Tables[0].Rows[i].ItemArray[8].ToString();
                Region = ds.Tables[0].Rows[i].ItemArray[9].ToString();
                PostalCode = ds.Tables[0].Rows[i].ItemArray[10].ToString();
                Country = ds.Tables[0].Rows[i].ItemArray[11].ToString();
                HomePhone = ds.Tables[0].Rows[i].ItemArray[12].ToString();
                Extension = ds.Tables[0].Rows[i].ItemArray[13].ToString();
                Notes = ds.Tables[0].Rows[i].ItemArray[14].ToString();             
                ReportsTo = Convert.ToInt32(ds.Tables[0].Rows[i].ItemArray[15]); ;
                PhotoPath = ds.Tables[0].Rows[i].ItemArray[16].ToString();
                sql = "INSERT INTO Employees VALUES('" + LastName + "','" + FirstName + "','" + Title + "','" + TitleOfCourtesy + "','" + BirthDate + "','" + HireDate + "','" + Address + "','" + City + "','" + Region + "','" + PostalCode + "','" + Country + "','" + HomePhone + "','" + Extension + "','" + Notes + "'," + ReportsTo + ",'" + PhotoPath + "')";
                command = new SqlCommand(sql, connection);
                adpter.InsertCommand = command;
                adpter.InsertCommand.ExecuteNonQuery();
                Console.WriteLine("Kayıt veri tabanına eklendi.");
                Console.ReadLine();                                                                                                               
            }                                                               //string,datetime vb. tipindeki değişkenlere sql sorgusu yazarken '' vermeyi unutmuyoruz.                                                                                                                                             
            connection.Close();
            }
            catch(Exception)
            {
                Console.WriteLine("Kayıt ekleme işlemi başarısız!");
                Console.ReadLine(); 
            }                                                                                                                                                                  
        }                                                                                                                                
        static void Main(string[] args)
        {
            TableToXml();
            XmlToDB();
        }
    }
}


30 Haziran 2014 Pazartesi

XAF ile Custom Form Oluşturma

XAF(Xtra App Framework);  hem Web hem Windows uygulamaları oluşturmayı sağlayan esnek bir DevExpress framework yapısıdır. İskeletini, MVC  n-tier mimarisi oluşturur.

Bu yazımda,  XAF ile oluşturduğum bir Windows uygulamasını anlatacağım.
1. Visual Studio’da File -> New -> Project seçilir.

2.Solda Visual C# DevExpress XAF seçilir. Gelen seçeneklerden Dxperience XAF Cross-Platform Application seçip proje isimlendirilir.

3.   Proje oluşturulduktan sonra Solution Explorer’ da toplamda 5 adet proje oluşur. Bu projeler temel olarak XAF’ in oluşturduğu projelerdir. Bu projeleri tek tek açıklamak gerekirse;
Solution1.Module projesi, yapacağımız uygulamanın (hem web hem windows) veritabanı işlerini yürüten ve yöneten kısımdır.
Solution1.Module.Web projesi ise, Web tarafı için Database erişim katmanıdır. Ayrıca bu projede sadece web’ te olmasını istediğimiz bazı özellikleri de ekleyebilir yada çıkartabiliriz.
Solution1.Module.Win aynı bir üsteki projenin windows versiyonu.
Solution1.Win ise, windows arayüz katmanıdır. Bu katmana ihtiyacıız olan modülleri ekleyerek projemize yetenek kazandıracağız.
Solution1.Web ise , web arayüz katmanıdır.

4.  Ben Addressbook adlı projemde, Personel bilgilerini bir tabloda ve personelin detaylı adres bilgilerini diğer tabloda tutacağım.  Custom Form’ da ise kendi oluşturduğum bir form sayfasını, programda çağıracağım.

5.  Öncelikle Addressbook.Module içerisinde;

  • BusinessObject klasörüne Personel.cs , PersonelAddress.cs ve frmPersonel.cs adında üç dosya  eklenir.
  • DatabaseUpdate klasörüne Updater.cs  dosyası eklenir.
  • Editors klasörüne CustomUserControlViewItem.cs dosyası eklenir.

6.  Personel.cs dosyasında;
Burada IPersonel adında bir interface oluşturulur. Bu interface içinde personel tablosunda da tutulacak olan değişkenleri tanımlanır ve en sonda PersonelAddress PersonelAddress {get; set;} yazılmasının nedeni PersonelAddress.cs dosyasında da Personel Personel {get; set; } tanımlamasını yaparak bu iki tabloyu birbirine bağlamaktır.

7.  Personel.cs dosyasında interface tanımlamasından sonra içindeki değişkenlerin sınıfları  teker teker oluşturulur.
Private ile belirlediğim f ile başlayan değişkenlerden referans alarak kendi nesneleri set edilir. Interface yazarken değişken tipleri nasıl tanımlandıysa fonksiyonlarda da aynı şekilde devam edilir. En sonuna da oturum kontrolü için;  public Personel(Session session) : base(session) { } eklenir. Aynı şekilde PersonelAddress.cs  dosyası da yazılır. Bu sefer IPerAddress adında bir interface oluşturulur ve PersonelAddress tablosunu oluşturan column isimleri tipleri ile beraber tanımlanıp fonksiyonlarında çağırılır. Burada da Personel Personel {get; set;} yapılır. İki tablo bağlanmış olur.

8. Addressbook.Module içerisinde Model.DesignedDiffs.xafml dosyasında NavigationItems içerisine aşağıdaki gibi item eklenir. Bu , oluşturulacak olan Custom Form içindir. ImageName ile programdaki logo, Caption ile programda görünecek olan adı ve id’si ile ne tür view olacağı belirlenir.

9.   Addressbook.Win içerisinde Controls adında bir klasör açılır ve içine frmPersonel.cs adında bir Windows Form yapılır.

10.   frmPersonel.cs kod kısmına gerekli kütüphaneler eklenir.
IXpoSessionAwareControl interface tanımlanır. Daha sonra nesnelerin altına bu interface update session kodu yazılır. Buradaki XpoSession, XpoHelper’da oluşturulacağı için XpoHelper classı yazılır. Devamına aşağıdaki kodlar yazılır. OnLoad ile formda oluşturduğumuz nesnelerin yüklenmesi sağlanır.

11.   Updater.cs dosyası içine aşağıdaki kodlar yazılır.
...

Yazımın tamamına ve screenshotlara buradan erişebilirsin.


18 Şubat 2014 Salı

DevExpress ile XtraReport Oluşturma (Master-Detail Report)

Hiç beklenmedik anda karşınıza XtraReport, Crystal Report vb. çat diye bir talep çıkabiliyor. Çok sık tekrarlanmadığından pratikliğiniz zaman aşımına uğrayabiliyor.

Bunu unutmamak adına, hem kendim hem de uğraşanlar için veri tabanından dinamik bir şekilde dataları çekip, Devex componentleri ile XtraReport oluşturup-almayı anlatacağım.

1. Visual Studio'da yeni bir proje oluşturuyoruz.

2. Solution Explorer'da Reports'a sağ tıklayıp Add-> New Item seçiyoruz.



3. DataSet'i seçip projemize ekliyoruz. DataSet' i tercihe göre isimlendiriyoruz. Ben "Northwind" dedim.



4. Daha sonra Server Explorer'dan  Data Connections' a sağ tıklayıp Add Connection seçiyoruz.



5. Açılan pencerede; Server name kısmına: (local) yazıyoruz ve aşağısında "Select or enter a database name" kısmında MSSQL' de oluşturduğumuz database ler listeleniyor, data alacağımız database i seçiyoruz ve OK diyoruz. Ben daha önceden oluşturmuş olduğum Northwind database i seçtim.



6. Seçtiğimiz database; tables, views.. vs. tüm içeriğiyle Server Explorer'a geldi. Şimdi raporlama için ihtiyaç duyduğumuz dataları barındıran tabloları seçiyoruz ve alana taşıyoruz. Birden fazla seçim için Ctrl tuşuna basılı tutarak tıklayın.



7. Ardından tabloda Fill,GetData()' yı sağ tıklayıp Preview Data' yı seçin.


8. Preview Data penceresinden table içindeki dataları görüntüleyebiliriz.



9. Daha sonra, projemize yeni bir item daha ekliyoruz.



10. Menüden DXperience v13.1 Report Class' ı seçiyoruz ve ardından tercihe göre isimlendirip Add diyoruz. Ben ürün ve müşteri ilişkili bir rapor hazırladığımdan ProductReport olarak isimlendirdim.



11. Rapor sayfası geldikten sonra sol üst taraftaki oka tıklıyoruz ve oradan DataSource seçiyoruz, listede çıkan database i tıklıyoruz. DataMember kısmında database içinden seçtiğimiz tabloları görebiliriz ve seçim yapabiliriz. Bende Categories tablosu seçili ve DataAdapter kısmında categoriesTableAdapter seçili durumda.



12. Rapor sayfamızda Detail kısmına tıklıyoruz. Field List' te bulunan tablolardan gerekli columnları detail içine taşıyoruz.




13. Preview' a tıkladığımızda rapora veri tabanından gerekli bilgilerin çekildiğini görebiliriz.



14. Detail'i seçip sağ tıklıyoruz ve Insert Detail Report -> CategoryProducts seçiyoruz. Eğer sadece bir tablodan data çekeceksek Unbound seçebiliriz ama iki tablo ilişkili olduğundan böyle yapıyoruz.




15. Detail altına  açılan kısma da diğer gerekli columnları ekliyoruz. Columnların raporda düzgün görünmesi için yerlerini ayarlıyoruz. En alttaki yatay çizgiyi de columnların hemen altına kadar taşımayı her seferinde yapıyoruz. Böylece birer satır boşluk olacak.




16. Tekrar Preview yaptığımızda rapor bu hali almış oluyor. Gerekirse Devex componentlerinden label vb. seçerek ilgili column için bilgi yazabiliriz. Sonrasında sol üstte raporu kaydedebiliriz.


24 Ocak 2014 Cuma

ExtJS 'in Temel Yapısı ve Özellikleri

Ext.app.Application : Tek bir sayfaya ait ExtJS 4 uygulaması ve Viewport ile temsil edilir.

Ext.application({
                  name: 'Myapp',
                  launch: function(){
                            Ext.create('Ext.container.Viewport',{
                                    items: {
                                            html: 'my app'
                                           }
                                      });
                                    }
               });

Bu uygulamanın bütün sınıflarını tek bir ad altında toplar. Önce myapp adlı global bir değişken oluşturulur. myapp, başvuru almak için GetApplication yöntemini kullanır.

var app=MyApp.getApplication(); => Şimdi kullanıma hazır ve genellikle viewport ile kullanılır.

Ext.app.Controller : Controller ile birlikte uygulamanın bağlanması sağlanır. Burada kullanıcıları yönetmek için bir denetleyici oluşturulur.

Ext.define('MyApp.controller.Users',{
                         extend: 'Ext.app.Controller',
                         init  :  function(){
                                  this.control({
                                     'viewport>panel':{
                                         render:this.onRendered
                                                      } 
                                               });
                                            },
                   onPanelRendered: function(){
                          console.log('The panel was rendered');
                                              }
                });

Uygulamayı takip edebilmek için init fonksiyonu güncellendi.Init fonksiyonu; doğrudan viewportun panelini bulur.

Ext.button.Button: Tıklandığında kodu çalıştırmak veya kullanmak için buton oluşturur.

Ext.create('Ext.Button',{
                         text: 'Click me',
                         renderTo: Ext.getBody(),
                         handler: function(){
                                  alert: ('Butona tıkladın');
                                            }
          });


Ext.button.Cycle: Bir buton içerisinde birden fazla özellik seçebiliriz. Butonda açılan bir choose menü gibi düşünebiliriz.




Ext.button.Split: Tıklandığında ayrı bir olay açılır.




Ext.container.ButtonGroup: Butonların sekmeli bir şekilde düzenlenmesini sağlar.

Ext.create('Ext.panel.Panel',{
           title: 'Panel with...',
           width: 500,
           height: 300,
           renderTo: document.body,
           bodyPadding: 10,
           html: 'HTML Panel Content',
           tbar: [{
                   xtype: 'buttongroup',
                   columns: 3,
                   title:
                   items: [{
                             text: ..
                             scale: ..  },
                  ...
                 {
                  ...
                 }]
                  
Sınıf Örneği:
function Bilet(){
                  this.adet=0;
                  this.tip=null;
                  this.getAdet=function(){
                                       return "Adet: "+this.adet;
                                         };
                }

Nesne Örneği:
var bilet= new Bilet();
//ya da
var bilet={
           adet : 0,
           'tip': null,
              getAdet: function(){
                                return this.adet;
                              };
          toString: function(){
                                return "Adet: "+this.adet;
                              };
          }
             
var bilet= new Object();
bilet.adet= 0; 
bilet.'tip'= null;
Bilet.getAdet= function(){...};
Bilet.toString= function(){...};


Kalıtım: Piyango.prototype=new Bilet();
         Piyango.prototype.constructor=Bilet;
         function Piyango(){
                            this.tip='PIYANGO';
                            this.toString=function(){
                                   return "Adet: "+this.adet;
                                                    };
                                                                    }
Bilete getTip adlı bir metod eklediğimizde Piyango'da da görünmesini istiyoruz.
Bilet.prototype.getTip=
             function(){
                        return this.tip;
                       }


'Super' metodları çocuk sınıfından çağırmak
Piyango.prototype.getTip=function(){
            Bilet.protoype.getTip.call(this);
                                   }

  • Function.call javascriptin sağladığı bir özelliktir. Eğer çalıştırılan metot parametre alıyorsa "this"den sonra sırasıyla gönderilmelidir.
  • JS metotlarında override,overload yoktur. Bir bağlam içinde, aynı isimli (parametreler önemli değildir) birden fazla metot yazıldığında hata vermez.
function method1(p1,p2){...} => geçersiz
function method1(abc){...}
  1. Tip kontrolü yoktur.
  2. Metot çağırırken parametre sayısı önemli değildir. Çalışma zamanında önemlidir.
Action: ExtJS' de eylem oluşturmak mümkündür.
var action=new Ext.Action //yeni eylem tanımladık.
({
   text: 'Seçim 1',
   handler: function(){ //tıklandığında yapması gerekenleri //içeren fonksiyon
Ext.Msg.alert('Tıkladın','Seçim 1'e tıkladınız');
                     });

Doğrudan bir araç çubuğuna eylem eklemek için;
(oluşturduğumuz form elemanının içinde)

...

tbar[                      //Araç çubuğunda bir action menu oluşturduk
     action,
     {
      text: 'Action Menu',
      menu: [action]
     }]

new Ext.Button(action) //butona eylem ekleme
action.setText(text);  //butonun adını değiştirme
action.setDisabled(!action.isDisabled());
this.setText(action.isDisabled() ? 'Aktif et' : 'Pasif et');

Bir edit menüsü butonu oluşturabiliriz ve action ile butona eylem verebiliriz.

var editMenuBtn={
                  text: 'Edit',
                  menu: [ pasteAction ]} 
/*pasteAction öncesinde şunu tanımlamalıyız: 
var pasteAction= new Ext.Action({
                                 text: 'Paste',
                                 handler: genericHandler}); genericHandler içine de özelliğini istediğmiiz fonksiyonu atabiliriz */

Kısa Notlar:

  • new Ext.Action
  • Değişken tanımlama: var
  • ExtJS bir script dilidir ve <script></script> arasında yazılır.
  • Script,<head></head> veya <body></body> içerisinde tanımlanabilir.
  • Script tipleri tanımlanır ve kodlar Ext.onReady(function(){...}); içinde yazılır.
Accordion: ExtJS ile accordion penceresi ve pencereye accordion paneli koymak mümkündür. Bunun için yeni bir pencere oluşturmak ve layout parametresini accordion olarak belirlemek yeterlidir.

Bir panel oluşturalım. ( var panel1={ 
                           xtype: 'panel', 
                           title: 'Panel1',
                           html: 'xy'  })

Bunu pencerede çağırıp; pencereye accordion özelliği verelim.

new Ext.Window{

           width: 500,
           height: 300,
           layout: 'accordion',
           layoutConfig{ animated: true},// panellerin kayarak inmesini sağlar, dinamik bir görünüm gibi    
           items: [panel1]}).show(); //elemanların içinde paneli çağırıp, gösteriyoruz.




Viewport: ExtJS'de görünüm alanı oluşturmayı sağlar. İçine butondan pencereye, girdden treeye her şeyi ekleyebiliriz. Bir container gibi düşünebiliriz. collapsible: true dediğimizde viewport açılıp/kapanma özelliğine sahip olur.

new Ext.Viewport ile çağrılır.

new Ext.Viewport({
                  layout: 'border',
                  defaults: {
                             frame: true,
                             split: true
                            }
                 },

                items: [{
                    region:'north',   //konumu ortada
                                                  minHeight: 300
                       ...
                    collapsible: true
                        },
                        {                     
                    xtype: 'container',  //viewportun geri kalanını doldurur.
                    region:'center',
                    layout: 'fit'
                       ...    
                                                          }

var panel1= new Ext.Panel   //panel oluşturur.

hbox: Viewport'a panel koyabildiğimiz gibi window içinde hbox da tanımlayabiliriz.

new Ext.Window({
                layout: 'hbox',
                    ...
                layoutConfig: { pack: 'start' }
                    ...
                items: [
                        {
                         title: 'panel1',
                                                              height: 100,
                         width: ... }, ...
                       ]
               }).show();

Grid: ExtJS ile uğraşırken en çok grid özellikleri işime yaramıştı. Grid, tablo verilerini dinamik olarak değiştirmek, gizlemek, sıralamak, sütunlar ile esnek bir şekilde çalışmak vb. işlemlerin yapılmasına olanak sağlar.


var gridOzellik= new Ext.grid.PropertyGrid({
                   ...
                   propertyNames: {
                        tasted: QA,
                           ...
                                  },
                   source: {//tablo elemanları beirlenir.
                       '(isim)': 'Grid Özellikleri',
                       gruplama: false,
                             //tarih tanımlama fonksiyonu
                       tarih: new Date(Date.parse('01.01.2014'));
                       borderWidth: 3 //kenar genişliği özelliği vs.
                           },
                  viewConfig: {
                       forceFit: true,
                       scrollOffset: 2
                              }          });

Daha sonra istediğimiz şekilde (örn. buton içinde) çağırabiliriz.

ozellikliGrid.setSource({
  '(isim)': 'Grid Özellikleri',
  gruplama: false });

//setSource ile butona tıklayınca verileri default haline getirir.


Tooltip: Ext.Tooltip kütüphanesini kullanır. Daha sonra tanımlanan tooltip div'de çağrılır.

new Ext.Tooltip({
                 target: 'tip1',
                  html: 'basit' });

div'de çağırıyoruz

...
<body>
<div id='tip1' class=...> Temel</div>
</body>


  • dismissDelay: 5000 //5 saniye boyunca açık olur.
  • closable: true //kapatılabilme özelliği
  • draggable: true //sürüklenebilme özelliği



Ext.dd sınıfı drag-drop olayını yönetmeyi sağlar.
Ext.apply DD yeni oluşturulan örneklere geçersiz nesne uygulamayı sağlar.

Textarea: Metin kutusu alanı. Herhangi bir panelde (formpanel,viewport vb.) items içinde tanımlanır.

items: [{
          xtype: 'textarea',
          name: ...,
          labelSeparator: ...,
          anchor: '%100'
        }, {...} ]


Statusbar: Statusbar eklemek için;
<link rel="stylesheet" type="text/css" href="ext-3.4.0"/examples/ux/statusbar/css/statusbar.css /> satırı <head> içine eklenir.



Önce bir fonksiyon tanımlanır.

var loadFn= function(btn,statusBar){
    btn=Ext.getCmp(btn); //veriyi alır.
    statusBar=Ext.getCmp(statusBar);
    btn.disable();
    statusBar.showBusy(); //meşgul göster.

(function(){
            statusBar.clearStatus({useDefaults: true});
            btn.enable(); }).defer(2000);
           });

new Ext.Panel({
               collapsible: true,
               bodyStyle: 'padding 10 px;',
               ...
               items[{
                       xtype: 'button',
                       ...
                       bbar: new Ext.ux.StatusBar({//statusbar
                                                   ...
                                                     //özellikleri tanımlanır.
                                                  });
}]
});