Oct 042011
 

Assalamu’alaikum wr wb

Combo multi colomn with ExtJs 4

ExtJs

ExtJs

Jumpa lagi dengan mbahsomo, Kali ini saya akan melanjutkan, tutorial saya tentang Combo Multi column dengan ExtJs yang masih menggunakan ExtJs 3 ke bawah, kali ini saya akan sedikit berbagi dengan teman – teman bagaimana membuat pada ExtJs 4, Baiklah seperti biasanya langsung saja pada Pokok permasalahannya, yaitu scriptnya silakan di kopas, Semoga bermanfaat.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Combo Multi Kolom</title>
<link rel="stylesheet" type="text/css" href="http://latihan.lokal.com/ext-4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://latihan.lokal.com/ext-4.0.0/bootstrap.js"></script>
<script type="text/javascript">
	Ext.require([
		'Ext.form.*'
		,'Ext.form.field.ComboBox'
		,'Ext.data.*'
		,'Ext.menu.Menu'
		,'Ext.grid.*'
		,'Ext.util.*'
		,'Ext.state.*'
		,'Ext.selection.CheckboxModel'
		,'Ext.window.*'
	]);

	var storeGrid = Ext.create('Ext.data.Store',{
		model: 'treeMenu'
		,proxy: {
			type: 'ajax'
			,url : 'http://lokal.com/'
			,noCache    : false
			,params     : Ext.encode({
				start   : 0
				,limit  : 20
			})
			,actionMethods  : 'POST'
			,reader: {
				type: 'json'
				,root: 'response'
				,totalProperty: 'jumlah'
				,idProperty: 'MN_ID'
			}
		}
		,autoLoad: true
		,sorters: [{
			property    : 'MN_ID',
			direction   : 'ASC'
		}]
	});

	var smGrid = Ext.create('Ext.selection.CheckboxModel');
	// create the Grid
	var grid = Ext.create('Ext.grid.Panel', {
		store: storeGrid
		,columns: [
			{ header: 'NAMA',width: 200,sortable: true,dataIndex: 'MN_NAME'}
			,{ header: 'LINK',width: 100,sortable: true,dataIndex: 'MN_LINK'}
			,{ header: 'PARENT',width: 100,sortable: true,dataIndex: 'MN_PARENT'}
			,{ header: 'GROUP',width: 100,sortable: true,dataIndex: 'MN_GRP'}
			,{ header: 'URUTAN',width: 100,sortable: true,dataIndex: 'MN_SORT'}
			,{ header: 'STATUS',width: 100,sortable: true,dataIndex: 'MN_STATUS'}
			,{ header: 'ICON',width: 100,sortable: true,dataIndex: 'MN_ICON'}
			,{ header: 'TYPE',width: 100,sortable: true,dataIndex: 'MN_TYPE'}
		]
		,height: 350
		,selModel : smGrid
		,width: 600
		,title: 'CRUD'
		,viewConfig: {
			stripeRows: true
		}
		,bbar: new Ext.PagingToolbar({
			pageSize    : 20
			,store      : storeGrid
			,displayInfo: true
			,displayMsg : 'Data yang ada {0} - {1} Dari {2}'
			,emptyMsg   : "Tidak ada data"
		})
	});

	var helpGrid = new Ext.menu.Menu();
	helpGrid.add(grid);

	Ext.define('Ext.ux.form.SearchField', {
	    extend: 'Ext.form.field.Trigger',
	    alias: 'widget.searchfield',
	    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
	    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',
	    hasSearch : false,
	    paramName : 'query',
	    initComponent: function(){
	        this.callParent(arguments);
	        this.on('specialkey', function(f, e){
	            if(e.getKey() == e.ENTER){
	                this.onTrigger2Click();
	            }
	        }, this);
	    },
	    afterRender: function(){
	        this.callParent();
	        this.triggerEl.item(0).setDisplayed('none');
	    },
	    onTrigger1Click : Ext.form.field.Trigger.prototype.onTriggerClick,
	    onTrigger2Click : function(){
	    	helpGrid.showAt([this.getPosition()[0],this.getPosition()[1]+this.getHeight()]);
	    }
	});

	Ext.onReady(function() {
		Ext.QuickTips.init();
		var formPanel = Ext.widget('form', {
			renderTo	: 'induk'
			,title		: 'Form'
			,width		: 300
			,height		: 300
			,items		: {
                width: 250
                ,fieldLabel: 'Search'
                ,abelWidth: 50
                ,xtype: 'searchfield'
            }
		});
	});
</script>
</head>
<body>
Body
<div id='induk'></div>
</body>
</html>

Selamat berexplorasi.

Wassalamu’ alaikum wr wb

Facebook Comments

  4 Responses to “Combo multi colomn with ExtJs 4”

  1. Blog Walking,
    Mantab kang…Jo lali RnD ya….

  2. @ qu4ck:
    Lagi nunggu konfirmasi dari FB

  3. ass, mas, aku boleh minta source extJS tidak, dimana ketika aku menginput data pada .js, lalu dari .js tersebut aku lempar isi dari field yg terdapat pada datastore, sehingga ketika di load dengan action:save
    lalu dilempar ke model dan saya dapat menjalankan query sbb:

    select * from table where a.nip=$nip and a.kode=$kode,

    trims sebelumnya

    wsslm

  4. @ lie susanlih:
    Wah nanti deh kalo longgar saya buatkan tutorialnya

 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)