Ir para conteúdo

Arquivado

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

Fabyo

DataGrid completo

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá.

 

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

Imagem Postada

 

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.

Imagem Postada

 

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...
?>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ainda to enroscado aqui.

 

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

 

Oque pode ser?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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']));

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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/

Compartilhar este post


Link para o post
Compartilhar em outros sites

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).'})'; 
}
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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:

attachicon.gifdatagrid1.zip

attachicon.gifdatagrid2.zip

attachicon.gifdatagrid3.zip

attachicon.gifdatagrid4.zip

attachicon.gifdatagrid5.zip

attachicon.gifdatagrid6.zip

 

Datagrid extjs 2.x nova versao

attachicon.gifdatagrid1_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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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