[Sencha&ExtJS] ExtJS 기초.14 - Ext.grid.Panel에 다른 DB 불러오기

Grid DB Paging 

https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.toolbar.Paging

화면

페이지 예제

기본 소스

Ext.onReady(function(){

    var store1 =  Ext.create(

        'Ext.data.Store',

        {

            autoLoad: true,

            pageSize: 5,

            fields: ['idx','title','contents','author','create_date'],

            proxy:

            {

                type: 'ajax',

                api:

                {

                    read: '/json/post.php'

                },

                reader:

                {

                    type: 'json',

                    rootProperty: 'data'

                }

            }

        }

    );

    Ext.create(

        'Ext.grid.Panel',

        {

            title: 'Grid Paging Example',

            columns : [

                { text: 'no',  width:80, dataIndex: 'idx' },

                { text: 'title', flex:1, dataIndex: 'title' },

                { text: 'content', flex:1, dataIndex: 'contents' },

                { text: 'writer', flex:1, dataIndex: 'author' },

                { text: 'date', flex:1, dataIndex: 'create_date' }

            ],

            store: store1,

            bbar :

            {

                xtype : 'pagingtoolbar',

                store: store1,

                displayInfo: true,

                displayMsg: '{0}/{1} Total - {2}',

                emptyMsg: 'No Data'

            },

            listeners:

            {

                itemclick: function (dv, record, item, index, e) {

                    console.log(record.data['contents']);

                    Ext.Msg.alert('Content',record.data['contents']);

                }

            },

            renderTo: Ext.getBody()

        }

    )

})

JSON 내용 ( /json/post.php )

<?php

include_once("../lib/basic.php");

include_once("../lib/inc.db.php");

    //http://ext.edit.com/json/blog.php?_dc=1435617448711&page=1&start=0&limit=5

    // _dc / page / start / limit

    $_qParam = array_merge( $_POST , $_GET );

    //###   START db connect:: ##########

    $con = dbcon();

    $total = 0;

    $rs = dbget("SELECT COUNT(*) cnt FROM n2_post");

    if(count($rs) > 0)

        $total = $rs[0]['cnt'];

    $query = sprintf('SELECT * FROM n2_post LIMIT %s , %s' ,$_GET['start'],$_GET['limit']);

    $data = dbget($query);

    $res = array();

    $res['total'] = $total;

    $res['success'] = true;

    for ($i=0; $i<count($data); $i++)

    {

        $res['data'][$i]['idx'] = $data[$i]['p_idx'];

        $res['data'][$i]['title'] = $data[$i]['p_title'];

        $res['data'][$i]['contents'] = preg_replace("(\<(/?[^\>]+)\>)", "", $data[$i]['p_content']);

        $res['data'][$i]['create_date'] = $data[$i]['p_regdate'];

        $res['data'][$i]['author'] = $data[$i]['p_blogid'];

    }

    //###   END db close:: ##########

    dbclose($con);

//## JSON Content-Length #####

header('Content-Length: '.strlen(  stripslashes(urldecode(json_encode($res)))  ));

print json_encode($res); // UTF-8 캐릭터 컨버팅됨.

?>

ExtJS 5.X GPL 파일 복사

/build/examples/ux/ ProgressBarPager.js 와 SlidingPager.js

슬라이딩바 / 프로그레스바 Paging Plugin 

<script type="text/javascript" src="js/plugin/ProgressBarPager.js"></script>

<script type="text/javascript" src="js/plugin/SlidingPager.js"></script>

슬라이딩바

xtype : 'pagingtoolbar',

plugins: new Ext.ux.SlidingPager(),

프로그레스바

xtype : 'pagingtoolbar',

plugins: new Ext.ux.ProgressBarPager(),