Jul 112011
 

Assalamu’ alaikum wr wb

Karena banyak yang meminta contoh file untuk Dinamic tree ExtJS maka akhirnya saya buatkan juga file agar bisa di download.

Silakan Download di sini : http://www.ziddu.com/download/15652230/latihanextjs.tar.gz.html

Karena menggunakan CodeIgniter anda harus terlebih dahulu mendownlaoad CI Versi CodeIgniter_1.7.3 atau CodeIgniter_1.7.2, jangan menggunakan yang Versi 2 karena ada banyak perbedaan pada versi tersebut. Untuk ExtJS saya menggunakan Versi 3.

Wassalamu’ alaikum wr wb

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

May 272010
 

Assalamu’ alaikum wr wb

Bagi yang sedang belajar ExtJs ini adalah tutorial dasar untuk pembuatan Panel dan Form dengan ExtJs dan php. semoga bermanfaat .

Download

Wassalamu’ alaikum wr wb

Oct 202009
 

Combo Grid

Combo Grid

Ini adalah pengembangan dari source yang kemaren saya post. yaitu ComboBox TwinTrigger dengan combo kita akan membuat saat tombol combo di clik akan memunculkan grid di bawah combo tersebut.

Ide ini terpikirkan oleh saya setelah saya beberapa saat lalu pernah membuat combo multi colom dengan java swing, nah ternyata teorinya sama juga di sini, yaitu menggunakan PopUpMenu.

Ok langsung saja langkah – langkahnya seperti berikut :

  1. Buat grid dari ExtJs
  2. Buat menu juga
  3. isi menu dengan panel yang di dalam panel kita addkan komponen grid yang telah kita buat.

ok mudahkan lihat source di bawah ini :

var helpGrid = new Ext.menu.Menu();
helpGrid.add(
  new Ext.Panel({
    title:'CARI DATA',
    layout:'fit',
    buttonAlign:'left',
    modal:true,
    width:600,
    height:400,
    closeAction:'hide',
    plain: true,
    //items: [gridNPWPD1],
    buttons: [{
      text: 'BATAL',
      handler: function(){
        helpGrid.hide();
      }
    }]
  })
);

kita tinggal membuat combo yang akan memanggil popup menu tersebut berikut source code nya :

Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox,{
  initComponent: Ext.form.TwinTriggerField.prototype.initComponent,
  getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
  initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
  onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
  trigger1Class: Ext.form.ComboBox.prototype.triggerClass,
  onTrigger2Click : function(){
      helpGrid.showAt([this.getPosition()[0],this.getPosition()[1]+this.getHeight()]);
  },
  validationEvent:false,
  validateOnBlur:false,
  trigger1Class:'x-form-clear-trigger',
  trigger2Class:'x-form-search-trigger',
  hideTrigger1:true
});

Ok jadi deh combo kita silakan kembangkan , semoga membantu ….

Oct 182009
 
Combo Modif

Combo Modif

Bagaimana tertarik dengan tampilan combo di atas anda bisa menggunakan source di bawah ini

 Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox,{
	initComponent: Ext.form.TwinTriggerField.prototype.initComponent,
	getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
	initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
	onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
	trigger1Class: Ext.form.ComboBox.prototype.triggerClass,
	onTrigger2Click : function(){
		var v = this.getRawValue();
		alert (v);
	},
	validationEvent:false,
	validateOnBlur:false,
	trigger1Class:'x-form-clear-trigger',
	trigger2Class:'x-form-search-trigger'
	//hideTrigger1:true
});

Cara penggunaan :

new Ext.ux.TwinCombo({
	width: 130,
	fieldLabel:"NPWPD",
	tooltip: 'Advanced Search',
	emptyText:'NPWPD...',
	allowBlank:false,
	name:'NPWPD',
	id:'NPWPD'
})

Silakan di kembangkan

Sumber http://extjs.com/forum

Oct 012009
 

Mbahsomo Chat

Mbahsomo Chat

bersamaan dengan di akuinya batik oleh dunia, mbahsomo juga telah menyelesaikan bagian kecil dari Project M Forum yaotu chat online dengan browser.

Untuk dapat mengakses anda harus register dulu. untuk demo silakan masuk ke http://forum.do-event.com/?/chat/

Terimakasih kepada :

ExtJS, CodeIgniter, dan semua teman – teman yang telah membantu semoga ini dapat bermanfaat.

Sep 292009
 

Setelah beberapa hari saya bertapa dan bersemedi akhirnya bisa louncing versi beta untuk M Forum, dalam M Forum ini akan ada modul untuk chat yang akan bisa di load melalui 2 metode yaitu dengan melalui browser dan yang satu dengan mendownload program chat yang bisa di install ke kompi masing – masing tanpa perlu buka browser.

untuk sementara yang modul chat belum saya louncing karena masih dalam proses develop.

untuk demo forum anda bisa masuk ke sini : http://forum.do-event.com

M Forum

M Forum

Untuk dapat mendownload sourcenya anda bisa masuk kesini

Sep 262009
 

Assalamu’ alaikum wr wb

Pada akhir – akhir ini kita sering mendengar tentang kata – kata JSON atau JavaScript Object Notation biasanya sering digunakan pada pemrograman web, menurut kabarnya JSON inilah yang akan nantinya menggantikan format XML yang sering digunakan. kenapa harus menggunakan JSON, ada beberapa kemudahan pada JSON di banding dengan XML, kalau XML tagnya mirip dengan tag HTML sedangkan JSON dia lebih mengarah kepada Array yang ter setruktur.

contoh format XML :

<induk>
  <anak1>Satu</anak1>
  <anak2>Dua</anak2>
</induk>

Continue reading »

Sep 172009
 

PopUp Menu

PopUp Menu

Pada tutorial kali ini saya akan menunjukkan bagaimana membuat popup menu pada halaman html yang kita buat, dengan adanya popup menu ini kita akan dapat membuat menu klik kana sesuai dengan keinginan kita, ada beberapa hal yang kita butuhkan dalam pembuatan popup menu ini.

  1. Library ExtJs.
  2. yang jelas ya sebuah halaman html

Untuk mematikan event clik kanan pada halaman html anda dapat menambahkan scrip pada body html kamu

<body oncontextmenu="return false;">

ok diatas telah kita buat sebuah source untuk mematikan event klik kana pada halaman html kita. selanjutnya kita akan membuat popup menunya dengan memanfaatkan library dari ExtJs. ok silakan tulis coding di bawah ini

Ext.onReady(function(){
  Ext.QuickTips.init();
  Ext.getBody().on('contextmenu', function(e){
    taskContextMenu.showAt(e.getXY());
  });
  var taskContextMenu = new Ext.menu.Menu();
  taskContextMenu.add(
    new Ext.menu.Item({text: 'HOME', id:'1',handler:  loadNewPages}),
    new Ext.menu.Separator(),
    new Ext.menu.Item({text: 'ABOUT', id:'2',handler:  loadNewPages})
  );

  function loadNewPages(node){
    if(node.id=='1'){
      window.location="#";
    }else if(node.id=='2'){
      Ext.Msg.alert('ABOUT', '<b>WELCOME<b><br>ANDA BERADA PADA EVENT ABOUT');
    }
  }

});

ok mudah kan sekarang coba klik kanan pada halaman html kamu pasti bisa deh 😀