DataGrid completo

[Maneju 0]

Tem que debugar pra poder saber o que esta acontecendo

 

Então Fabyo, o Grid apresenta a mensagem de que foi salvo com sucesso mas não grava nada. Eu achei que era problema com a SESSION, daí deixei um valor fixo para ser gravado e mesmo assim não grava mas não dá erro nenhum.

 

Parece que tem algo no json que não funciona no servidor mas funciona off.

[Fabyo 66]

mas qual o problema? ele nao esta salvando ou nao esta mostrando os dados no grid?

 

de qualquer forma tem que debugar pra saber o que ta acontecendo

 

você usa firefox com firebug?, você consegue ver o retorno em json?

[Maneju 0]

mas qual o problema? ele nao esta salvando ou nao esta mostrando os dados no grid?

 

de qualquer forma tem que debugar pra saber o que ta acontecendo

 

você usa firefox com firebug?, você consegue ver o retorno em json?

 

não grava e não tem retorno (claro).

estou usando chrome

[Maneju 0]

 

mas qual o problema? ele nao esta salvando ou nao esta mostrando os dados no grid?

 

de qualquer forma tem que debugar pra saber o que ta acontecendo

 

você usa firefox com firebug?, você consegue ver o retorno em json?

 

não grava e não tem retorno (claro).

estou usando chrome

 

 

Vou desistir do grid,agradeço a ajuda Fabyo.

 

Não "vem" os dados do grid para o salvar.php (instalei o Firebug) e não há meio de resolver isso.

 

Mesmo assim agradeço a atenção.

 

Abraços!

[Fabyo 66]

Blz se quer desistir paciencia

 

só sei que o grid funciona, e se nao ta funcionando é porque você fez alguma coisa errado, mas se nao tem paciencia para tentar descobrir o que é ou onde esta errando, entao deixa pra la

[Maneju 0]

beleza se quer desistir paciencia

 

só sei que o grid funciona, e se nao ta funcionando é porque você fez alguma coisa errado, mas se nao tem paciencia para tentar descobrir o que é ou onde esta errando, entao deixa pra la

 

 

Olá Fabyo.

 

Eu precisava de uma solução meio rápida, por isso desisti momentanemanete.

Agora ccom mais calma, voltei a mexer e vi que o problema é o case sensitive, ou seja, no ambiente de desenvolvimento tanto faz eu declarar as bibliotecas em maiúsculo ou minúsculo que funciona pois é case insensitive, enquanto que ao hospedar no servidor Web isto é o inverso.

Então ficou resolvido...

 

 

Agora tenho uma outra situação, estou usando o mesmo grid (6) só que não preciso mais das opções de gravação, só preciso de um botão para fazer chamada a um código php passando as linhas do grid em que o check box foi selecionado.

Tentei aproveitar o botão "Salvar" mas não carrega a página desejada, isto seria porque não houve edição no grid?

[Fabyo 66]

acredito que deva ser um erro, independente do grid ter sido atualizado ou nao

[Maneju 0]

Olá.

 

Na figura abaixo está capturado um debug pelo firebug, mostrando que existe dados no JSON

 

Nesta figura, o trecho do main.js que deveria "chamar" a salvar.php.

 

Não consegui identificar nada de errado, se pudesse dar uma espiada.

 

Abaixo, código do salvar.php modificado para apenas ver se o checkbox do grid foi selecionado

<?php
include_once("JSON.php");

$json = new Services_JSON();
$dados = $json->decode($_POST["data"]);

include 'config2.php';
$con = conectar();                    
mysql_select_db('easylawe_pesquisas');

mysql_query("SET CHARACTER SET utf8");
mysql_query("SET NAMES 'utf8'");
mysql_query('SET character_set_connection=utf8');
mysql_query('SET character_set_client=utf8');
mysql_query('SET character_set_results=utf8');


for($i = 0; $i < count($dados); $i++){
	//$novo  = isset($dados[$i]->newRecord) ? $dados[$i]->newRecord : false;
	//$id    = isset($dados[$i]->id) ? $dados[$i]->id : false;
	$id   = $dados[$i]->id;
	$news = $dados[$i]->news;
	
        //se news for true envia email
}	
mysql_query($sql);	

}  <---- era esta maledita que ficou aqui e não percebi que dava pau, caraca...
?>

[Maneju 0]

Ainda to enroscado aqui.

 

$dados sempre fica com tamanho 0 apesar dos dados do grid estarem corretos no JSON (pelo FireBug).

 

Oque pode ser?

[Maneju 0]

Ainda to enroscado aqui.

 

$dados sempre fica com tamanho 0 apesar dos dados do grid estarem corretos no JSON (pelo FireBug).

 

Oque pode ser?

 

 

Agora deu certo.

 

No salvar.php troquei

 

$dados = $json->decode($_POST["data"]);

por

 

$dados = $json->decode(stripslashes($_POST['data']));

[Maxweell 0]

Estou com um problema no datagrid6.

Não esta salvando os dados, obviamente nao retorna.

Pelo firebug:

 

data	[{"pendencia":"1","nome":"aaaaa","internacao":"232323","medico":"sfafs","convenio":"fasdfasdf","pendencias":"sdfasdfasdf","boy":"1","newRecord":true,"envio":"2010-11-15T00:00:00"}]

Percebi que os campos ae aparecem fora de ordem, nao sei se é por isso que nao ta inserindo.

 

Salvar.php

<?php
include_once("JSON/JSON.php");
$json = new Services_JSON();
$dados = $json->decode($_POST['data']);

mysql_connect("localhost", "root", ""); 
mysql_select_db("faturamento");

for($i = 0; $i < count($dados); $i++){
	$novo  = isset($dados[$i]->newRecord) ? $dados[$i]->newRecord : false;
	$id    = isset($dados[$i]->id) ? $dados[$i]->id : false;
	$pendencia = $dados[$i]->pendencia ? "1" : 2;
	$nome  = $dados[$i]->nome;
	$internacao = $dados[$i]->internacao;
	$convenio = $dados[$i]->convenio;
	$pendencias = $dados[$i]->pendencias;
	$medico = $dados[$i]->medico;
	$envio  = isset($dados[$i]->envio) ? $dados[$i]->envio : '0000-00-00';
	$boy  = $dados[$i]->boy ? "1" : 2;


	//$data = implode("-", array_reverse(explode("/", $data)));	
	if($novo){
		$sql = "INSERT INTO prontuarios (id, pedencia, nome, internacao, convenio, pendencias, medico, envio, boy)
			VALUES (
				NULL, 
				'$pendencia', 
				'$nome', 
				'$internacao',
				'$convenio',
				'$pendencias',
				'$medico',
				'$envio', 
				'$boy'
				) ";		
				
	} else {
		$sql = "UPDATE prontuarios SET 
			pendencia  = '$pendencia',
			nome = '$nome',
			internacao = '$internacao',
			convenio = '$convenio',
			pendencias = '$pendencias',
			medico = '$medico',
			envio = '$envio',
			boy = '$boy' 
			WHERE prontuarios.id = '$id'";
		
	}	
	
	mysql_query($sql);	
}

echo "{success:true}";
?>

O estranho é que diz que foi gravado!

Ps.: O update funciona perfeitamente.

[Cleiton Soares 0]

Nem sei sei vou ter resposta mas ai vai minha dúvida....

 

Eu preciso colocar a pesquisa e a <div> do grid na mesma página, pois vai receber as variáveis de uma consulta, tem como fazer dessa maneira? tentei de todos as maneiras aqui mas sempre dá o mesmo erro:

 

Notice: Undefined index: callback in C:\xampp\htdocs\sistema\adm\datagrid\index.php on line 55

 

Se alguém ai puder me dar uma força ficarei extremamente grato!

 

Caso não seja possível, como poderia fazer para receber os dados de uma consulta e jogar os resultados no grid?

 

Desde já, grato!

[Henrique Barcelos 290]

[MAARCOS PAAULO 0]

Fabyo,

 

Estou iniciando em programação web, tenho plena noção do php, porem no java script não, onde consigo aprender a estirizar o css e criar páginas com js como estas, existe algum tipo de apostila, pois css também não intendo muito!

[Fabyo 66]

Ola Marcos

 

esse estilo faz parte do framework extjs

site oficial : http://www.sencha.com/products/extjs/

 

forum nacional para tirar duvidas: http://www.extjs.com.br

 

video aulas gratis: http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/

 

só que vou avisando que esse framework é bem complexo de entender no começo, e ele tem uma versao free mas esta com os dias contados, e o custo da licença dele hj esta em R$ 8.000,00

 

entao recomendo voce partir para outras soluções gratis e que te da mais liberdade

 

para voce fazer um estilo bem legal e padronizado voce pode usar o bootstrap

 

http://getbootstrap.com/

 

bootstrap é o framework css mais utilizado hj, com ele voce faz um site padronizado e bonito sem ter que se matar tanto com css, só seguir as regras que ele ja definiu como padrao e seu site vai funcionar em qualquer navegador, tablet e celular

 

recomendo voce estudar tbm angularJS framework javascript mantido pelo google

https://angularjs.org/

[MAARCOS PAAULO 0]

Ola pessoal,

 

estou com um problema, estou usando o grid de vcs para controlar os usuarios em um sistema, porem consegui mexer com a parte de cadastrar o usuario, mais na hora de listar eu não consigo retorno dos dados, ou seja a grid fica em branco, abaixo segue os codigos, me ajudem pf.

 

index.js

Ext.onReady(function(){
Ext.SSL_SECURE_URL   = 'public/images/default/s.gif';
Ext.BLANK_IMAGE_URL = 'public/images/default/s.gif';


Ext.QuickTips.init(); 
Ext.form.Field.prototype.msgTarget = 'side';


var win;
var FormPanel; 
/*Cria o campo combobox status e atribui os valores contidos em status.js */
var dsStatus = new Ext.data.SimpleStore({
fields: ['status', 'status'],
data : Ext.dados.status  
}); 


function pega_status(value){ 
var record = "";
dsStatus.each(function(){
if(this.data.status == value.toUpperCase()){
record = this.data.status; 
}
}); 
return record; 
} 


var comboStatus = new Ext.form.ComboBox({
store: dsStatus,
displayField:'status',
valueField:'status',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'SEM STATUS',
selectOnFocus:true,
id:'status',
fieldLabel: '<b>Status</b>',
width: 300,
editable: false
});
/*Cria o campo combobox acesso e atribui os valores contidos em acesso.js */
var dsAcesso = new Ext.data.SimpleStore({
fields: ['acesso', 'acesso'],
data : Ext.dados.acesso  
}); 


function pega_acesso(value){ 
var record = "";
dsAcesso.each(function(){
if(this.data.acesso == value.toUpperCase()){
record = this.data.acesso; 
}
}); 
return record; 
} 


var comboAcesso = new Ext.form.ComboBox({
store: dsAcesso,
displayField:'acesso',
valueField:'acesso',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'SEM ACESSO',
selectOnFocus:true,
id:'acesso',
fieldLabel: '<b>Acesso</b>',
width: 300,
editable: false
});




if(!(FormPanel instanceof Ext.form.FormPanel)){
FormPanel = new Ext.form.FormPanel({
id: 'form1',
url: 'salvar',
method: 'POST',
baseCls: 'x-plain',
labelWidth: 110,
bodyStyle: 'padding: 2px;',
frame:false,
labelAlign:'right',         
waitMsgTarget: false,         
layout: 'form', 
onSubmit: Ext.emptyFn, 
defaultType: 'textfield',
defaults: {
width: 100,
allowBlank:false,
selectOnFocus: true,
blankText: 'Preencha o campo'
}, 
items: [
{             
id:'nome',
name: 'nome',
fieldLabel: '<b>Nome</b>',
width: 400,
fireKey : function(e){ 
if(e.getKey() == e.ENTER){
Ext.getCmp('usuario').focus();
}
} 
},{
id:'usuario',
name: 'usuario', 
fieldLabel: '<b>Usuario</b>',
width: 300,
maxLength: 12,
fireKey : function(e){ 
if(e.getKey() == e.ENTER){
Ext.getCmp('senha').focus();
}
} 
},{
id:'senha',
name: 'senha', 
fieldLabel: '<b>Senha</b>',
width: 300,
maxLength: 10,
inputType: 'password',
fireKey : function(e){ 
if(e.getKey() == e.ENTER){
Ext.getCmp('email').focus();
}
} 
},
{
id:'email',
name: 'email', 
fieldLabel: '<b>Email</b>',
width: 400,
fireKey : function(e){ 
if(e.getKey() == e.ENTER){
Ext.getCmp('nome').focus();
}
} 
},
comboAcesso,
comboStatus 
], 
buttonAlign:'center',
buttons: [{
id:'Botao',
text:'Salvar',
type: 'submit',
minButtonWidth: 170,
handler: function(){


       Ext.Ajax.request( 
       {
waitMsg: 'Salvando...',
url: 'salvar_user.php', 


params: { 
acao: "Novo",
nome: Ext.get('nome').getValue(),                        
usuario: Ext.get('usuario').getValue(),                        
senha: Ext.get('senha').getValue(),
email: Ext.get('email').getValue(), 
acesso: comboAcesso.getValue(),
status: comboStatus.getValue()                    
},
failure:function(response,options){
Ext.MessageBox.alert('Erro', 'Nao foi possivel salvar...');
ds.rejectChanges();
},


success:function(response, options){
ds.commitChanges(); 
ds.reload(); 
Ext.MessageBox.alert('Alerta', 'Salvo com sucesso');


FormPanel.form.reset(); 
}
});


}
}]
});
}


function novo(){ 
if(!(win instanceof Ext.Window)){
win = new Ext.Window({
width:570,
height:250,
plain: true, 
collapsible: false,
resizable: false,
closeAction:'hide',
closable: true,
modal: true,
border: false,
items: [FormPanel],
focus: function(){
Ext.get('nome').focus();
} 
});
}
win.show();
}


ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'listar_user.php',
method: 'POST'
}),   
baseParams:{acao: "listarDados"},
reader:  new Ext.data.JsonReader({
root: 'dados',
totalProperty: 'total',
id: 'codigo'
},
[
{name: 'codigo'},
{name: 'nome'},
{name: 'usuario'}, 
{name: 'senha'}, 
{name: 'email'},
{name: 'acesso'},
{name: 'status'}
]
),
sortInfo: {field: 'nome', direction: 'DESC'},
remoteSort: true 
});


var checkColumn = new Ext.grid.CheckColumn({
header: "Ativo/Inativo",
dataIndex: 'status',
width: 20 
    });


var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
checkColumn,
{
dataIndex: 'codigo',
header: 'Codigo',
hidden: true,
hideable: false
},


{
dataIndex: 'nome',
header: 'Nome',
editor: new Ext.form.TextField({
  allowBlank: false
}) 
}, 


{
dataIndex: 'usuario',
header: 'Usuario',
editor: new Ext.form.TextField({
}) 
}, 


{
dataIndex: 'senha',
header: 'Senha',
editor: new Ext.form.TextField({
}) 
}, 


{
dataIndex: 'email',
header: 'Email',
editor: new Ext.form.DateField({
  allowBlank: false,
  vtype:'email'
}) 
},
{
dataIndex: 'acesso',
header: 'Acesso',
editor: new Ext.form.TextField({
}) 
}, 


]);
cm.defaultSortable = true;


var grid = new Ext.grid.EditorGridPanel({
title:'LISTA DE USUARIOS',
id: 'datagrid1',
ds: ds,
cm: cm,
enableColLock: false,
loadMask: true,
stripeRows: true,
plugins: [checkColumn],
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
width:'100%',
height:620, 
renderTo: document.body,


viewConfig: {
forceFit:true,
getRowClass : function (row, index) { 
var cls = '';
if(row.data.ativo == false){
cls = 'corGrid'
} else {
cls = ''
} 
return cls;
} 
}, 


    tbar: [ 
{ 
text: 'Novo',
iconCls:'add', 
tooltip: 'Novo Usuario',
handler : function(){ 
novo();
}
}, '-',


{
text: 'Deletar Registro',
tooltip: 'Clique para Deletar um registro(s) selecionado',
handler: function(){
var selectedKeys = grid.selModel.selections.keys; 
if(selectedKeys.length > 0)
{
Ext.MessageBox.confirm('Alerta', 'Deseja deletar esse registro?', function(btn) {
if(btn == "yes"){ 
var selectedRows = grid.selModel.selections.items;
var selectedKeys = grid.selModel.selections.keys; 
var encoded_keys = Ext.encode(selectedKeys);


Ext.Ajax.request(
{ 
waitMsg: 'Executando...',
url: 'deletar.php', 
params: { 
id_funcionario: encoded_keys,
key: 'id_funcionario' 
},


callback: function (options, success, response) {
if (success) { 
Ext.MessageBox.alert('OK', response.responseText);
var json = Ext.util.JSON.decode(response.responseText);
if(json.del_count == 1){
mens = "1 Registro deletado.";
} else {
mens = json.del_count + " Registros deletados.";
}
Ext.MessageBox.alert('Alerta', mens);
} else{
Ext.MessageBox.alert('Sorry, please try again. [Q304]',response.responseText);
}
},


failure:function(response,options){
Ext.MessageBox.alert('Alerta', 'Erro...');
},                                      
success:function(response,options){
ds.reload();
}                                      
} 
); 
} 
});
}
else
{
Ext.MessageBox.alert('Alerta', 'Por favor selecione uma linha');
}
}, 
iconCls:'remove' 
}],


bbar: new Ext.PagingToolbar({
store: ds,
displayInfo: true,
displayMsg: 'Mostrando registro de {0} a {1} total de {2} ',
emptyMsg: "Não tem dados",
pageSize: 30,
beforePageText : "Página",    
afterPageText : "de {0}",    
firstText : "Primeira Página",    
prevText : "Página Anterior",    
nextText : "Proxima Página",    
lastText : "Ultima Página",    
refreshText : "Atualizar",    
paramNames : {start: 'start', limit: 'limit'}
})
});


grid.addListener('afteredit', function(oGrid_Event){
var gridField = oGrid_Event.field;


if (oGrid_Event.value instanceof Date)
{   
var fieldValue = oGrid_Event.value.format('Y-m-d');
} else
{
var fieldValue = oGrid_Event.value;
} 


            Ext.Ajax.request({
waitMsg: 'Salvando...',
url: 'salvar.php', 


params: { 
acao: "update",
id_funcionario: oGrid_Event.record.data.id_funcionario,
campo: oGrid_Event.field,
valor: fieldValue,     
originalValue: oGrid_Event.record.modified 
},
failure:function(response,options){
Ext.MessageBox.alert('Erro', 'Nao pode salvar...');
ds.rejectChanges();
},


success:function(response, options){
ds.commitChanges(); 
}
            });
}); 


grid.render(); 
ds.load({params:{start: 0, limit: 30}});
});


Ext.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};


Ext.grid.CheckColumn.prototype ={
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },


    onMouseDown : function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
var vl = record.data['ativo'] == 0 ? false : true;
var valor2  = record.data['ativo'] == 0 ? 1 : 0;


record.set(this.dataIndex, !vl); 


            Ext.Ajax.request({
waitMsg: 'Salvando...',
url: 'salvar.php', 


params: { 
acao: "update",
id_funcionario: record.data['id_funcionario'],
campo: 'ativo',
valor: valor2,
originalValue: record.modified 
},
failure:function(response,options){
Ext.MessageBox.alert('Erro', 'Nao pode salvar...');
ds.rejectChanges();
},


success:function(response, options){
ds.commitChanges();
}
});
        }
    },


    renderer : function(v, p, record){
var check = '';
if(record.data.ativo == 0) { 
check = '';
} else {
check = '-on';
} 


        p.css += ' x-grid3-check-col-td'; 
        return '<div class="x-grid3-check-col'+( check )+' x-grid3-cc-'+this.id+'"> </div>';
    }
};

listar_user.php

 

<?php
mysql_connect("localhost", "root", ""); 
mysql_select_db("banco");


$inicio = isset($_POST['start']) ? $_POST['start'] : 0;
$limite = isset($_POST['limit']) ? $_POST['limit'] : 30 ;
$acao   = isset($_POST['acao']) ? $_POST['acao'] : '';


if($acao = 'listarDados'){
$rs    = mysql_query("SELECT * FROM usuarios");
$total = mysql_num_rows($rs);
$rs    = mysql_query("SELECT * FROM usuarios LIMIT $inicio, $limite");


$arr = array();
while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}


echo '({"total":"'.$total.'","dados":'.json_encode($arr).'})'; 
}
?>

 

[Fabyo 66]

vc esta usando uma versao muito antiga do extjs, hj ele esta na versao 5

 

poste sua duvida no forum de extjs la o pessoal vai te ajudar melhor

 

http://www.extjs.com.br

[Carneiros 0]

Pessoal vou postar uns exemplos de datagrid usando a fantastica ferramenta EXTjs, para quem nao conhece vai gostar com certeza e quem ja conhece vai aprender passo a passo como montar um datagrid sem misterios.

 

esse assunto tem mais haver com javascript, mas resolvi postar aqui mesmo porque envolve PHP para listagem dos dados do banco de dados e quem vai usar mesmo essa dica serão os programadores.

 

um exemplo do meu datagrid funcionando pra terem uma ideia de como ele vai ficar:

http://extjs.com/deploy/ext-1.1/examples/grid/edit-grid.html

 

reparem que ele tem:

* ordernar em cada coluna

* se segurar a coluna você pode arrastar e trocar ela de lugar

* 2 cliques edita rapido

 

estou postando 6 exemplos:

* datagri1 = datagrid simples

* datagri2 = datagrid com edição rapida

* datagri3 = datagrid com edição rapida e paginação

* datagri4 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid

* datagri5 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid e paginação

* datagri6 = datagrid com edição rapida e exclui, edita e salva as alterações do datagrid e paginação e pesquisa rapida

 

agora vamos ao datagrid

 

banco:

 

DROP DATABASE IF EXISTS sistema;
CREATE DATABASE sistema;
USE sistema;

DROP TABLE IF EXISTS usuarios;
CREATE TABLE usuarios (
	id_usuario SMALLINT ( 5 ) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
	nome VARCHAR ( 40 ) NOT NULL,
	email VARCHAR ( 64 ) NOT NULL UNIQUE,
	data_cadastro DATE NOT NULL DEFAULT '0000-00-00',
	news ENUM ( '0', '1' ) NOT NULL DEFAULT '0'	
) TYPE = innodb;

ate aqui é muito simples, se voce nao sabe instalar um banco de dados entao nem continue a leitura e va estudar mais.

 

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<title>Datagrid Edição rapida</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
	<meta name="language" content="pt-br" />
	<meta name="resource-type" content="document" />
	<meta name="classification" content="Internet" />
	<meta name="distribution" content="Global" />
	<meta name="rating" content="General" />
	<meta name="robots" content="All" />	
	<meta name="author" content="Fabyo" />
	<meta name="subject" content="fabyo.php@gmail.com" />	
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Pragma" content="no-cache" />
	<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery-plugins.js"></script>
	<script type="text/javascript" src="js/ext-jquery-adapter.js"></script>
	<script type="text/javascript" src="js/ext-all.js"></script>
	<script type="text/javascript" src="js/ext-lang-pt_br.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
	<div id="grid"></div>	
</body>
</html>

como viram nao tem segredo basta colocar um div e pronto.

e acrescentar os js e css necessarios, só explicando um pouco o extjs foi criado para funcionar com jquery, prototype ou yui

e para isso só usar os adaptadores, no meu caso to usando o jquery.

 

 

main.js principal que vamos usar:

 

//essa primeira linha é do jquery é o metodo de inicio do script depois que acabou de carregar toda pagina
$(function(){
//função para formatação dos campos
	function formatDate(value){
		return value ? value.dateFormat('d M, Y') : '';
	};
	
	function formatBoolean(value){
		return value == 1 ? 'Sim' : 'Não';  
	};
	//aqui crio as colunas do grid 
//mais detalhes http://extjs.com/deploy/ext-1.1/docs/output/Ext.grid.ColumnModel.html
//http://extjs.com/deploy/ext-1.1/docs/output/Ext.form.TextField.html
//http://extjs.com/deploy/ext-1.1/docs/output/Ext.grid.EditorGrid.html

	var cm = new Ext.grid.ColumnModel(
		[
			{
				header: "Nome",
				dataIndex: 'nome',
				width: 220,
				sortable: true,
				editor: new Ext.grid.GridEditor(new Ext.form.TextField(
					{
						allowBlank: false						
					}
				))
			},			

			{
				header: "Email",
				dataIndex: 'email',
				width: 220,
				sortable: true,
				editor: new Ext.grid.GridEditor(new Ext.form.TextField(
					{
						allowBlank: false,
						vtype:'email'
					}
				))
			},		

			{
				header: "Data Cadastro",
				dataIndex: 'data_cadastro',
				width: 220,
				sortable: true,
				renderer: formatDate,
				editor: new Ext.grid.GridEditor(new Ext.form.DateField(
					{
						format: 'd/m/Y'
					}
				))
			},

			{
				header: "Receber Noticias",
				dataIndex: 'news',
				width: 220,
				renderer: formatBoolean,
				editor: new Ext.grid.GridEditor(new Ext.form.Checkbox())				
			}				
		]
	);
	cm.defaultSortable = true;	
	
	ds = new Ext.data.Store({
		proxy:  new Ext.data.ScriptTagProxy({
			url:'listar_usuarios.php'
		}),
		reader:  new Ext.data.JsonReader({
			root: 'resultado', 
			id: 'id_usuario'
		},
			[
				{name: 'nome', mapping: 'nome', type: 'string'},
				{name: 'email', mapping: 'email', type: 'string'}, 
				{name: 'data_cadastro', mapping: 'data_cadastro', type:'date', dateFormat:'Y-m-d'},
				{name: 'news', mapping: 'news', type:'boolean'}
			]
		)
	});

	var grid = new Ext.grid.EditorGrid('grid', {
		ds: ds,
		cm: cm,
		enableColLock:false		
	});	
	grid.render();
	ds.load();		
});

qualquer duvida sobre o datagrid só perguntar

to colocando os exemplos prontos em anexo para download:

datagrid1.zip

datagrid2.zip

datagrid3.zip

datagrid4.zip

datagrid5.zip

datagrid6.zip

 

Datagrid extjs 2.x nova versao

datagrid1_ext2.zip

 

quem quiser conhecer melhor extjs:

 

http://extjs.com/

http://extjs.com/deploy/ext-1.1/docs/

http://extjs.com.br/forum/viewtopic.php?t=22

 

Eu que mantenho administro a comunidade extjs no brasil:

http://extjs.com.br/

http://extjs.com.br/forum

http://extjs.com.br/blog

 

Muito bom, valeu!

[AnibalJR 0]

copiei os exemplos e coloquei dentro do localhost, criei o banco de dados com o sql dos exemplos, adicionei alguns dados na tabela manualmente, tentei acessar as grids, mas nenhuma mostrou os dados, alguma idéia doque posso estar fazendo de errado?

[Fabyo 66]

Verifique que erro esta acontecendo pelo console

 

no chrome aperte a tecla F12