[trick] Konsep GRID Sederhana Dengan PHP EXTJS dan MYSQL

Bismillah..

OK Kali Ini KIta Coba Menggambarkan Konsep Sederhana GRID dengan php extjs dan mysql >>

langsung saja siapkan database :

extjs

masukan sintak paging.js nya>>

1. paging.js


/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

// create the Data Store
 var store = new Ext.data.JsonStore({
 root: 'root',

fields: [
 'itemid', 'name', 'address', 'email'
 ],

// load using script tags for cross domain, if the data in on the same domain as
 // this page, an HttpProxy would be better
 url: 'store.php'

 });
 store.setDefaultSort('itemid', 'desc');

var grid = new Ext.grid.GridPanel({
 width:700,
 height:500,
 title:'ExtJS.com - Browse Forums',
 store: store,

// grid columns
 columns:[{
 id: 'itemid',
 header: "itemid",
 dataIndex: 'itemid',
 width: 420,
 sortable: true
 },{
 header: "Name",
 dataIndex: 'name',
 width: 100,
 sortable: true
 },{
 header: "address",
 dataIndex: 'address',
 width: 70,
 align: 'right',
 sortable: true
 },{
 header: "email",
 dataIndex: 'email',
 width: 150,
 sortable: true
 }],

// customize view config
 viewConfig: {
 forceFit:true,

 },

// paging bar on the bottom
 bbar: new Ext.PagingToolbar({
 pageSize: 25,
 store: store,
 displayInfo: true,
 displayMsg: 'Displaying topics {0} - {1} of {2}',
 emptyMsg: "No topics to display",
 items:[
 '-', {
 pressed: true,
 enableToggle:true,
 text: 'Show Preview',
 cls: 'x-btn-text-icon details',
 toggleHandler: function(btn, pressed){
 var view = grid.getView();
 view.showPreview = pressed;
 view.refresh();
 }
 }]
 })
 });

// render it
 grid.render('topic-grid');

// trigger the data store load
 store.load({params:{start:0, limit:25}});
});

2. paging.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<!-- GC -->
 <!-- LIBS -->
 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
 <!-- ENDLIBS -->

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript" src="paging.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="extjs/examples/shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="extjs/examples/shared/examples.js"></script><!-- EXAMPLES -->
<h1>Paging Grid Example</h1>
<p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
 remote data (from the Ext forums).</p>
<p>Note that the js is not minified so it is readable. See <a href="paging.js">paging.js</a>.</p>

<div id="topic-grid"></div>

</body>
</html>

untuk hasil kira-kira seperti ini >>

sederhana

untuk sourcecode bisa download disini

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: