Oct 092010
 

Dinamis TreePanel ExtJs

Assalamu’ alaikum wr wb

Bebearapa saat yang lalu ada beberapa teman bertanya tentang bagaimana menggunakan TreePanel di ExtJs. Beberapa hari ini saya membuka – buka coding ExtJs dan php saya yang jadul dengan menggunakan ExtJs v 2. Tapi disitu saya menemukan sesuatu yang bagus untuk di bahas dalam tulisan saya kali ini.

Langsung pada tujuan kadang kita ingin membuat atau load tree dari sebuah query database. Saya yakin semua pasti bisa untuk membuatnya. Tapi disini bagaimana cara kita membuat aplikasi kita tidak terlalu berat saat load data.

Semisal ada kasus seperti ini.

1. saya mempunyai sebuah table dengan nama tbl_admin_menu dengan sis sebagai berikut :

setelah itu kita buat scrip phpnya dengan frame work CodeIgniter (CI).

Controller :

class menu_admin extends Controller {

    //put your code here
    function __construct() {
        parent::Controller();
        $this->load->model('menu_admin_model');
    }

    function getTreeMenu() {
        $arr_value = Array();
        if ($_POST['node'] == 'root') {
            $result = $this->menu_admin_model->getTreeMenu(0);

            foreach ($result->result_array() as $row) {
                if($row['TYPE']==0)
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON']
                    );
                else
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON'],
                        'leaf'          => true
                    );
            }
        }else{
            $result = $this->menu_admin_model->getTreeMenu($_POST['node']);

            foreach ($result->result_array() as $row) {
                if($row['TYPE']==0)
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON']
                    );
                else
                    $arr_value[] = array(
                        'id'            => $row['ID_MENU'],
                        'text'          => $row['NAME_MENU'],
                        'iconCls'       => $row['ICON'],
                        'leaf'          => true
                    );
            }
        }
        $this->jsonci->sendJSONNew($arr_value);
    }
}

Buat Sctip untuk Model

class menu_admin_model extends Model{
    //put your code here
    function __construct() {
        parent::Model();
    }

    /**
     *
     * @param <type> $PARENT
     */
    function getTreeMenu($PARENT){
        $this->db->select('*');
        $this->db->from('tbl_menu_admin');
        $this->db->where('PARENT',$PARENT);
        $query = $this->db->get();
        return $query;
    }
}

Lalu yang terakhir adalah mebuat scrip ExtJs nya

var treePanel = new Ext.tree.TreePanel({
    renderTo	: 'divID',
    loader:new Ext.tree.TreeLoader({
        dataUrl:'<?php echo base_url(); ?>index.php/menu_admin/getTreeMenu'
    }),
    root: new Ext.tree.AsyncTreeNode({
        text    : 'Main Menu',
        id      : 'root',
        expanded: true,
        iconCls : 'home'
    })
})

Hasil : Selamat mencoba semoga membantu.

Wassalamu’ alaikum wr wb

Facebook Comments

  26 Responses to “Dinamis TreePanel ExtJs”

  1. keren mbah..:d

  2. @ ivone:
    Terimakasih

  3. 1.klo “jsonci” emang fungsi standar bawaan CI ? ato gimana?
    2. koq ga ada file viewnya ya. jd interfacenya di load kapan ?
    *maklum. newbie πŸ˜‰

  4. oh ya satu lagi. sy berharap bisa download sourcenya πŸ˜€
    thanks πŸ™‚

  5. misi mbah.. mohon petunjuknya master.. πŸ˜€

    kan saya sudah berhasil membuat tree.
    yg ingin saya tanyakan :
    – saat tree tampil, smua child bentuknya leaf (sudah bisa)
    – lalu begitu tree tampil, stiap child melakukan query ke database. bgmn caranya ya?

    jadi untuk setiap child yang mempunyai anak buah di database, iconnya akan berubah secara otomatis menjadi folder (ini sudah bisa, hanya tinggal query nya yang belum bisa).

    mohon petunjuknya mbah.. πŸ˜€
    thx b4..

  6. mbah pertanyaan saya yg di atas tidak jadi..hehe..

    saya mo bertanya, bgmn ya caranya mengganti icon node di extjs tree.
    misalkan saat awal tree muncul, semua node child berbentuk leaf. lalu node tertentu berubah menjadi berbentuk folder yang bisa diexpand.
    saya sudah bisa mengubah menjadi bentuk folder, tapi tidak ada icon expand-nya..
    thx..

  7. Mbah,
    apakah si child nya itu sudah jadi sebuah link?

    soalnya yang saya buat tidak bisa jadi link untuk dijadikan sebagai menu..

    thanks

  8. @ tenardi:
    Kalo pingin ganti icon tinggal isi iconCls: ‘iconkamu’
    @ Abal2:
    Kalo ingin buat lingnya di jalankan tambahkanevent pada tree

    treeMenu.on('click', function(n){
                        var sn = this.selModel.selNode || {};
    
                        if(n.leaf && n.id != sn.id){
                            panel.loadClass(n.attributes.link , n.text,'id');
                        }
                    });
    
  9. mbah bs gk dibikin bwt donlotannya. agk bgung ngikitin ny, error success full, hehehehe
    kirim via imel aj y!

    tq

  10. @ ogef:
    πŸ˜€ siap nanti kalo sempat saya kirim deh

  11. @ mbahsomo:

    dtgu ya kiriminan ny, ke bkmoceng@yahoo.com
    mksh

  12. Tadi malam sudah saya buatkan file contohnya bisa masuk ke sini :
    http://sugik.do-event.com/?p=491

  13. blogwalking, sekalian minta pencerahan nih mbah..

    ane punya json gni

    [{
    id: '1',
    text: 'Home',
    leaf: true
    },{
    id: 2,
    text: 'Data',
    children: [{
    id: 3,
    text: 'Data 1',
    leaf: true
    }]
    }]

    niatnya
    – home link ke home.php,
    – data1 link ke data1.php,
    show di panel content ada di sebelah kanan tree

    thanks atas pencerahannya mbah.

  14. Maturity is a bright but not dazzling glory, a mellow sound but not greasy ears, a need for others detect facial expressions of calm, one finally stopped the prayer of the complaint to the surrounding atmosphere, a disregard Hongnao smile, a wash of extreme indifference, a not quiet thick, one is not steep height.

  15. mbah klo tree menu nya untuk memuat link nya gmn ya?
    gmn buat event nya πŸ™

    mohon pnyegaranya πŸ™‚

  16. Jadi kita bisa mengambil nilai dari tree tersebut semisal kita mengambil tree dari json
    [{
    id :’1′
    ,name : ‘Induk Tree’
    ,url : ‘http://yyy.com’
    }]

    kita bisa mengambil kembaliannya dengan url tersebut

  17. mba,

    klo dmasukin link disitu ( ……….,url : ‘http://yyy.com’…… ) lalu fungsi LINK_MENU didatabase apa?

  18. @ ogef:
    Mau buka new windows atau dimasukkan dalam object ExtJs ???

  19. alhamdulillah, hidup lagi web nya πŸ˜€

    @ mbahsomo:

    mba, itu untuk di masuk dalam extjs. krna saya buat maincontent-panel. jadi buat event klik -nya gmn ya? supaya muncul dari link tree tsebut ke di maincontent tersebut?

    mohon pencerahanya

  20. mba belum dikasih pencerahanya neh πŸ™

  21. @ ogef:
    Begini saja mas,
    Yang pertama sampean harus ambil misal url dari tiap tree.
    yang kedua masukkan url ke panel induknya.

    Contoh pnl.load(url:xxx)

    kira – kira begitu logikanya.

  22. hmm.. masih bingung seh klo mengacu pada code ini:

    treeMenu.on(‘click’, function(n){
    var sn = this.selModel.selNode || {};

    if(n.leaf && n.id != sn.id){
    panel.loadClass(n.attributes.link , n.text,’id’);
    }
    });

    so, mesti banyak belajar lagi πŸ˜€

  23. ExtJs ver 4.1 ada gak mbah ??

  24. yang Ext Js ver 4.1 ada gak mbah ????

  25. mba link event pada treenya jelasin dong mba…

  26. @one
    untuk event clicknya lihat script ini

                   treeMenu.on('click', function(n){
                        var sn = this.selModel.selNode || {};
     
                        if(n.leaf && n.id != sn.id){
                            panel.loadClass(n.attributes.link , n.text,'id');
                        }
                    });
    

    Semoga membantu

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)