Ext Core: Ext.Fly ve Flyweight

ExtJS Logo

Flyweight Design Pattern tek global objeler oluşturarak bunları tekrar tekrar kullanarak ram kullanımını minimize etmek için tasarlanmıştır. Daha fazla bilgi için bu adresi ziyaret edebilirsiniz.

Ext flyweight olarak kullanmak için global bir Ext.Element oluşturur. Bu global flyweight sonra DOM içindeki herhangi bir bölümde hedef olarak kullanılır. Bu flyweight objesine ulaşmak için "Ext.fly" metodu kullanılır. Ext’e yeni başlayanlar Ext.get mi yoksa Ext.fly mı kullanacakları konusunda şaşırırlar. (Bende bunlardan biriydim).

Eğer bir Ext.Element’ini sonradan kullanmak için bir reference olarak kaydetmek zorunluysa Ext.Get kullanın. Eğer bir element’i reference olarak depolamaya ihtiyaç yoksa Ext.fly kullanılmalıdır.

Konuyu kavramanız açısından şunu not olarak belirtmemde fayda olacağını düşünüyorum. Benimde bu konuyu kavramamda Ext takımından Aaron Conran’ın örneği çok faydalı olmuştu.

Ext.fly('elId').removeClass('myCls'); = Ext.Get('elId').removeClass('myCls'); aynı mıdır? diye sorduğumda olay açısından aynı olduğunu söyledi. Fakat:

Flyweight’i kullandığında bir flyweight element’i kullanırsın. Bu paylaşılır. Bu yüzden flyweight’i sadece tek satırlık atomik operasyonlarda kullanmalısın. Hiç bir zaman bir reference’i flyweight içinde depolamayı istemezsin.

Örneğin var el=Ext.fly('foo');

Yani var el=Ext.fly('foo'); yerine var el=Ext.get('foo');; Ext.fly('elId').removeClass('myCls'); yerine de Ext.fly('elId').removeClass('myCls');

Örnekler :

.cls { background: #FF0000;}
Ext.fly('element').addClass('cls');

Yukarıdaki kodda .cls adlı classımızı 'element' IDmizle birleştiriyoruz. Sonucunda cls içindeki özellikler 'element'imize aktarılıyor.

• Ext.fly('element').removeClass('cls'); şeklinde kullanım ise cls adlı classı ‘element’ idli elementten ayırır.
• Ext.fly('element').hide(); ise ‘element’ idli elementimizi gizler.
• Ext.fly('element').show(); da tam tersini yaparak gösterir.
• Yine event konusuna geldiğimizde göreceğiniz Ext.fly('element').toggle(); gizli olan elementi gösterir, gözüken elementi gizler.
• Ext.fly('el').toggleClass('classimiz'); şeklinde bir kullanımda ‘el’ idli elementimize: “Eğer classimiz adlı class daha önceden birleştirilmemiş ise birleştirir; birleştirilmiş ise kaldırır. Yani Eğer daha önce addClass('classimiz'); kullanılmış ise removeClass('classimiz'); işlemini yapar, eğer kullanılmamış ise addClass('classimiz') işlemini gerçekleştirir.

Bu kadar örneğin ve açıklamanın Ext.fly’ı ve mantığını anlatmaya ve kavratmaya yeterli olacağını düşünüyorum. Bir sonraki dersimiz olan Ext ve CSS konusunda biraz daha detaylı birşekilde konunun detaylarını anlayacağız. Okuduğunuz için teşekkür ederim.

Etiketler: ExtJS, Javascript, Kodlama