Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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](http://www.extjs.com/products/js/download.php));MYSQL----------------------------------------------------
tb1 products
prodid
product
rate
tb2 manufacturers
manuid
prodid
manufacturer
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>
</head>
<body>
</body>----------------------------------------------------
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>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>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