Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

srnetcave

[Resolvido] Ext grid com paginacao

Por , em Javascript

Recommended Posts

srnetcave    1

srnetcave
Postado

Ola pessoal,

 

Tenho andado bem ocupado no trabalho, e não tive tempo para dar a atenção aqui no fórum tanto quando gostaria.

 

Mas, vim aqui na area de JavaScript, pois no trabalho aderimos ao framework Extjs. Neste tutorial basico, vou mostrar como podem criar uma grid com resultados de um banco de dados (neste caso o mysql), e estarei utilizando PHP como server-side language.

 

Dificuldade do tutorial

0 = Newbie

5 = Intermediário

10 = Profissional

11+ = GOD...

 

Vamos dar um nível de dificuldade para este tuto de 4.

 

Para este tutorial, você vai precisar:

- Servidor Http rodando PHP > 5 (ex. Apache);

- MySQL;

- Framework Extjs (você pode baixar Aqui);

 

MYSQL----------------------------------------------------

 

- Crie 2 tabelas

 

tb1 products

prodid

product

rate

 

tb2 manufacturers

manuid

prodid

manufacturer

 

HTML----------------------------------------------------

 

- Começaremos com uma página HTML simples.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Imasters - Trabalhando com Extjs</title>
    </head>
    <body>
        
    </body>
[/html]

----------------------------------------------------

 

Se você ja tem o Extjs Framework, inclua o mesmo no seu projeto, coloque la na sua pastinha js ou scripts dentro do seu diretório public...Em uma estrutura parecida como abaixo.

 

-extgrid

--public

---js

----ext

-----adapter

-----resources

-----src

-----ext-all.js

 

HTML----------------------------------------------------

 

Agora, adicionamos os scripts e styles necessarios para utilizarmos o framework.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Imasters - Trabalhando com Extjs</title>
        <!-- Framerwork Extjs -->
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/extjs/ext-all.js"></script>
        <!-- Extjs Style -->
        <link type="text/css" rel="stylesheet" href="js/extjs/resources/css/ext-all.css" media="screen"/>
    </head>
    <body>
        <div id="extgrid"></div>
    </body>
[/html]

Agora, partimos para a grid.

 

GRID----------------------------------------------------

 

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Imasters - Trabalhando com Extjs</title>
        <!-- Framerwork Extjs -->
        <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/extjs/ext-all.js"></script>
        <!-- Extjs Style -->
        <link type="text/css" rel="stylesheet" href="js/extjs/resources/css/ext-all.css" media="screen"/>
        <script type="javascript">
            // Iniciamos o script assim que o documento carregar
            Ext.onReady(function(){
                
                // Criamos store que carregara os resultados do JSON retornado pelo php
                var store = new Ext.data.JsonStore({
                    url: 'getproducts.php',
                    root: 'products',
                    totalProperty: 'total',
                    fields: [
                        {name: 'product', type: 'string'},
                        {name: 'manufacturer', type: 'string'},
                        {name: 'rate', type: 'float'}
                    ]
                });
                // aqui passamos para a store o default para o filtro, isso carregara a store com a coluna product em orde ascendente A - Z
                store.setDefaultSort('product', 'asc');

                // função para retornar para moeda do brasil
                function toReal(val){
                    val = (Math.round((val-0)*100))/100;
                    val = (val == Math.floor(val)) ? val + ".00" : ((val*10 == Math.floor(val*10)) ? val + "0" : val);
                    val = String(val);
                    var ps = val.split('.'),
                        whole = ps[0],
                        sub = ps[1] ? '.'+ ps[1] : '.00',
                        r = /(\d+)(\d{3})/;
                    while (r.test(whole)) {
                        whole = whole.replace(r, '$1' + ',' + '$2');
                    }
                    val = whole + sub;
                    if(val.charAt(0) == '-'){
                        return '-$' + val.substr(1);
                    }
                    return "R$" +  val;
                }

                // aqui criamos a grid
                var grid = new Ext.grid.GridPanel({
                    width:600,
                    height:350,
                    title:'Produtos',
                    store: store,
                    trackMouseOver:true,
                    disableSelection:false,
                    loadMask: true,
                    stripeRows: true,
                    autoExpandColumn: 'product',


                    // aqui criamos as colunas da nossa grid
                    columns:[
                        {
                            id: 'product',
                            header: "Produto",
                            dataIndex: 'product',
                            width: 50,
                            sortable: true
                        },{
                            header: "Fabricante",
                            dataIndex: 'manufacturer',
                            width: 200,
                            sortable: true
                        },{
                            header: "Preço",
                            dataIndex: "rate",
                            width: 50,
                            align: "center",
                            sortable: true,
                            renderer: toReal
                        }],

                    // Se quiser testar, troque bbar para tbar (bbar = renderiza a paginação no footer da grid, tbar no topo)
                    bbar: new Ext.PagingToolbar({
                        store: store,
                        displayInfo: true,
                        displayMsg: 'Mostrando produtos {0} - {1} de {2}',
                        emptyMsg: "Desculpe, mas não há produtos para exibir."
                    })
                });

                // renderiza a grid dentro da nossa div extgrid
                grid.render('extgrid');

                // carrega a store
                store.load();
            });
        </script>
        <style>
            div#extgrid {
                margin: 50px 0px 0px 50px;
            }
        </style>
    </head>
    <body>
        <div id="extgrid"></div>
    </body>
[/html]

PHP----------------------------------------------------

 

Quase la pessoal, não desanima não :P

 

Note: que o php eh super básico galera, não vai aparecer gente ai usando isso num projeto real neh...

 

getproducts.php

<?php

$link = mysql_connect('localhost', 'root');
mysql_select_db('seudb');

$filter = ($_REQUEST["sort"] == null) ? "" : $_REQUEST["sort"]." ".$_REQUEST["dir"];

$start = ($_REQUEST["start"] == null)? 0 : $_REQUEST["start"];
$limit = ($_REQUEST["limit"] == null)? 25 : $_REQUEST["limit"];

$query = "SELECT p.*, m.* from products p INNER JOIN manufacturers m ON p.prodid = m.prodid";
$result = mysql_query($query);

if ($fiter!= "") {
	$query.= " ORDER BY ".$filter;
  }
$query.= " LIMIT ".$start.",".$limit;

$result = mysql_query($query);

$total = mysql_query("SELECT COUNT(product) FROM products");
$total = mysql_result($total, 0);

for($i = 0; $i < mysql_num_rows($result); $i++){
    $row = mysql_fetch_assoc($result);
    $products[$i] = $row;
}

$json = json_encode($products);

echo '({"total":"'.$total.'","products":'.$json.'})';
?>

Simples né :P, tem muitos widgets bacanas no Extjs, dêem uma olhada nos exemplos... http://www.extjs.com

 

Acho que é isso por enquanto galera, qualquer dúvida....não fique na dúvida, poste ai :D

 

Abração a todos e até a próxima

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito