DataGrid completo

Fabyo · Setembro 15, 2008

Basta configurar para exibir o que você quer use

displayField:'campo',

valueField:'id_campo',

Celso Amaral · Setembro 15, 2008

Pessoal, testei todos os exemplos e funcionaram corretamente no localhost, quando publico no provedor, o grid aparece mas não traz os dados ...alguém tem alguma idéia de como resolver isso....

Desde já agradeço,

Abraços,

Celso Amaral

Fabyo · Setembro 16, 2008

use firefox e firebug para debugar o codigo e descobrir porque o grid nao esta sendo montado

e troque Ext.data.ScriptTagProxy por Ext.data.HttpProxy

Celso Amaral · Setembro 16, 2008

Fábio, obrigado pela resposta, troquei o httproxy, mas ainda não funcionou no provedor (locaweb), localmente roda certinho ...

No provedor monta o Grid mas Não traz os dados, consigo inserir registros na tabela através do Grid, mas não lista os dados .....o que será que pode estar errado se localmente funciona.

Aguardo ajuda ....

Abraços,

Celso Amaral

Se puder dar uma olhada o exemplo está no endereço:

http://www.astelbtu.com.br/testedatagrid1/datagrid1.html

ronny · Setembro 16, 2008

use firefox e firebug para debugar o codigo e descobrir porque o grid nao esta sendo montado

e troque Ext.data.ScriptTagProxy por Ext.data.HttpProxy

foi como ele falou veja no firebug oq esta vindo de resposta do server...ok!

ronny · Setembro 16, 2008

Se puder dar uma olhada o exemplo está no endereço:

http://www.astelbtu.com.br/testedatagrid1/datagrid1.html

o teu server ta retornando isso aqui oh:

br />

<b>Fatal error</b>:  Call to undefined function:  json_encode() in <b>/home/httpd/vhosts/astelbtu.com

.br/httpdocs/testedatagrid1/grids_db.php</b> on line <b>15</b><br />

tem um erro ai na funcao json_encode()...ta usando php 5.x ou 4.x ?

Celso Amaral · Setembro 16, 2008

Se puder dar uma olhada o exemplo está no endereço:

http://www.astelbtu.com.br/testedatagrid1/datagrid1.html

o teu server ta retornando isso aqui oh:
br />

Fatal error: Call to undefined function: json_encode() in /home/httpd/vhosts/astelbtu.com

.br/httpdocs/testedatagrid1/grids_db.php on line 15 
tem um erro ai na funcao json_encode()...ta usando php 5.x ou 4.x ?

Obrigado ...Rony ...eu corrigi....deu certo ...instanciei o JSON ... ficou assim

include("JSON/JSON.php");

$json = new Services_JSON();

.....

echo '({"dados":'.$json->encode($arr).'})';

Obrigado a todos ....Valeu !

PauloRJ · Setembro 17, 2008

Estou usando o exemplo 6

E quando chamo a pagina fica uns 10seg quando não mais com a Mensagem "Carregando..."

Para salvar tambem demora muito.

Alguma ideia!?

Falci · Setembro 17, 2008

Basta configurar para exibir o que você quer use

displayField:'campo',

valueField:'id_campo',

Se eu usar "renderTo: document.body" funciona (como teste);

Mas não consegui colocar isso dentro do grid.

Bem, eu fiz assim:

Crei um Store.. que pega os valores certinho (na verdade são 2 store's, um para o grid, outro para o combo), e chamei o load() dele;

Depois criei um Ext.form.ComboBox, com o store de cima..

Aih no Ext.grid.ColumnModel tem um item assim:

{
				header: "U.M.",
				dataIndex: 'nome_um',
				width: 150,
				sortable: true,
				editor: comboUM // esse é o combo..
			}

Era para colocar o comboBox no editor mesmo?

Tem como fazer ele mostrar o display, e não o value?

ronny · Setembro 17, 2008

Basta configurar para exibir o que você quer use

displayField:'campo',

valueField:'id_campo',

Era para colocar o comboBox no editor mesmo?

Tem como fazer ele mostrar o display, e não o value?

eh como o fabyo escreveu...no combo você configura oq quer mostrar e oq vai ser o valor....segue um exemplo de comboBox com store:

//store para o combo de estados...simples store
  var store_estado = new Ext.data.SimpleStore({
		fields: ['valor', 'sigla'],
		data : Ext.exampledata.states
	}); 
	...
{
		header: "UF",
		dataIndex: 'uf',
		width: 45,
		editor: new Ext.form.ComboBox({
	 		store: store_estado,
	 		displayField:'sigla',
	 	valueField: 'valor',
	 		typeAhead: true,
	 		mode: 'local',
	 		triggerAction: 'all',
		lazyRender:true		 	
		})
}

seria isso ?

ronny · Setembro 17, 2008

Estou usando o exemplo 6

E quando chamo a pagina fica uns 10seg quando não mais com a Mensagem "Carregando..."

Para salvar tambem demora muito.

Alguma ideia!?

ja viu no firebug oq ta retornando do servidor ?

Falci · Setembro 17, 2008

Ronny, não, não deu..

Como eu disse, se usar no grid naum funciona (será coincidencia?)..

Tah, duplo clique na celula do grid, aparece o ComboBox para escolher, eu escolho uma opção.. (até aki beleza..) aih quando a linha perde o foco (vou editar outra celular, por exemplo) aquela celula do grid passa a ter o valor do "valueField" do combo

Então não dá certo

=/

ronny · Setembro 17, 2008

Tah, duplo clique na celula do grid, aparece o ComboBox para escolher, eu escolho uma opção.. (até aki beleza..) aih quando a linha perde o foco (vou editar outra celular, por exemplo) aquela celula do grid passa a ter o valor do "valueField" do combo

cara dá certo sim...você deve ta trocando alguma coisa no seu script....eu acabei de fazer um teste aqui no meu com store para o combo..e funcionou...eh do jeito que coloquei no topico anterior pra você...igualzinho...

so lembrado que todo usando um store estatico que vem da pagina estado.js...onde tenho as siglas dos estados....essa pagina você deve chama-la na index q você ta usando pra carregar o grid:

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

e o meu estado.js ta assim:

Ext.namespace('Ext.exampledata');

Ext.exampledata.states = [
		['AC', 'AC', ''],
		['AL', 'AL', ''],
		['AM', 'AM', ''],
		['AP', 'AP', ''],
		['BA', 'BA', ''],
		...
		];

teste ai com calma q da certo...e usa o firebug pra verificar....ok!

Falci · Setembro 18, 2008

ueh..

['AM', 'AM', ''],

Mas assim o display fica igual ao value..

no meu caso não dá, tendo em vista que minha tabela tem ID's e Nomes, como valores para value e display, respectivamente, e que eles são diferentes..

Fabyo · Setembro 18, 2008

Como eu falei o displayField vai mostrar o campo que você definiu como displayField, nao tem como mostrar outra coisa so se tiver fazendo coisa errada

ronny · Setembro 18, 2008

ueh..
['AM', 'AM', ''],
Mas assim o display fica igual ao value..

no meu caso não dá, tendo em vista que minha tabela tem ID's e Nomes, como valores para value e display, respectivamente, e que eles são diferentes..

cara so coloquei pra você ter uma ideia...mas ali pode ser o id,nome ou id e id ou nome e nome...

pra pegar vindo da tabela eh a mesma ideia..so muda o que você vai armazenar no store sao os dados vindos de uma resp do servidor..

Falci · Setembro 18, 2008

Primeiro obrigado pela ajuda, sei que você's não tem obrigação de me ajudar..

Mas eu devo ser muito cabeça dura mesmo..

Olha só:

var dados = [
		['PR', 'Paraná'],
		['SC', 'Santa Catarina'],
		['RS', 'Rio Grande do Sul']
	];
  var store_estado = new Ext.data.SimpleStore({
		fields: ['sigla','valor'],
		data : dados
	});

no mesmo arquivo.. mais pra baixo..

var cm = new Ext.grid.ColumnModel(
		[
			{
				header: "Código",
				dataIndex: 'id',
				width: 45,
				sortable: true,
				editor: new Ext.grid.GridEditor(new Ext.form.TextField(
					{
						allowBlank: false
					}
				))
			},

			{
				header: "Nome",
				dataIndex: 'nome',
				width: 145,
				sortable: true,
				editor: new Ext.grid.GridEditor(new Ext.form.TextField(
					{
						allowBlank: false
					}
				))
			},
			 /*
			{
				header: "U.M.",
				dataIndex: 'nome_um',
				width: 75,
				sortable: true,
				editor: comboUM
			} */{
		header: "UF",
		dataIndex: 'uf',
		width: 75,
		editor: new Ext.form.ComboBox({
			 store: store_estado,
			 displayField:'valor',
			 valueField: 'sigla',
			 typeAhead: true,
			 mode: 'local',
			 triggerAction: 'all',
			 lazyRender:true
		})
		}
		]
	);
	cm.defaultSortable = true;

	var grid = new Ext.grid.EditorGrid('grid', {
		ds: ds,
		cm: cm,
		enableColLock:false,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
		monitorWindowResize : true,
		loadMask: true
	});
	grid.render();

No fim.. ficou assim..

Olha só.. quando eu clico na segunda linha, a primeira muda de "Paraná" para "PR", ou seja, de "displayField" para "valueField"

Onde estou errando ?

<_<

Novamente obrigado pela ajuda..

ronny · Setembro 18, 2008

Olha só.. quando eu clico na segunda linha, a primeira muda de "Paraná" para "PR", ou seja, de "displayField" para "valueField"

Onde estou errando ?

Novamente obrigado pela ajuda..

Falci,

como ta os indexes do store principal do grid ? testei aqui e ta funcionando beleza...fiz ate assim no array:

['1', 'AC'],
['2', 'AL'],
...

grava o valor e motra a sigla.....se quiser usar um store dinamico, vindo do bd, to postando um exemplo que testei qui pra você:

//store para armazenar os dados vindos da consulta do bd
ListingDataStore = new Ext.data.Store({
	  id: 'ListingDataStore',
	  proxy: new Ext.data.HttpProxy({
				url: 'db.php', 
				method: 'POST'
			}),
			baseParams:{task: "LISTAR"},
	  reader: new Ext.data.JsonReader({
		root: 'results',
		totalProperty: 'total',
		id: 'id'
	  },[ 
		{name: 'ID', type: 'int', mapping: 'ID_bd'},
		{name: 'Name', type: 'string', mapping: 'name_bd'}
	  ])
	}); 
...
//carrengando no combo os dados armazenados no store
{
		header: 'Teste',
		  dataIndex: 'TesteName',	//esse index eh do store principal
		  width: 120,
		  editor: new Ext.form.ComboBox({
			store: ListingDataStore,
			displayField:'Name',
			typeAhead: true,
			mode: 'local',
			triggerAction: 'all',
			selectOnFocus:true
			}),
		hidden: false
	  }...
ListingDataStore.load();//carregando o store do combo

o arquivo db.php eh onde você faz o select nos campos que você quer mostrar no combo.flw!

Falci · Setembro 19, 2008

hehe.. ultima vez que eu tento arrumar isso, depois eu vou partir para um POG mesmo..

O qrquivo completo:

CODE

Ext.example = function(){
    var msgCt;
 
    function createBox(t, s){

        return ['<div class=msg">',

                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',

                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',

                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',

                '</div&gt].join('');

    }

    return {

        msg : function(title, format){

            if(!msgCt){

                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);

            }

            msgCt.alignTo(document, 't-t');

            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));

            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);

            m.slideIn('t').pause(1).ghost("t", {remove:true});

        },
 
        init : function(){

            var s = Ext.get('extlib'), t = Ext.get('exttheme');

            if(!s || !t){ // run locally?

                return;

            }

            var lib = Cookies.get('extlib') || 'yahoo',

                theme = Cookies.get('exttheme') || 'aero';

            if(lib){

                s.dom.value = lib;

            }

            if(theme){

                t.dom.value = theme;

                Ext.get(document.body).addClass('x-'+theme);

            }

            s.on('change', function(){

                Cookies.set('extlib', s.getValue());

                setTimeout(function(){

                    window.location.reload();

                }, 250);

            });
 
            t.on('change', function(){

                Cookies.set('exttheme', t.getValue());

                setTimeout(function(){

                    window.location.reload();

                }, 250);

            });

        }

    };

}();
 
Ext.onReady(Ext.example.init, Ext.example);
 
// old school cookie functions grabbed off the web

var Cookies = {};

Cookies.set = function(name, value){

     var argv = arguments;

     var argc = arguments.length;

     var expires = (argc > 2) ? argv[2] : null;

     var path = (argc > 3) ? argv[3] : '/';

     var domain = (argc > 4) ? argv[4] : null;

     var secure = (argc > 5) ? argv[5] : false;

     document.cookie = name + "=" + escape (value) +

       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +

       ((path == null) ? "" : ("; path=" + path)) +

       ((domain == null) ? "" : ("; domain=" + domain)) +

       ((secure == true) ? "; secure" : "");

};
 
Cookies.get = function(name){

	var arg = name + "=";

	var alen = arg.length;

	var clen = document.cookie.length;

	var i = 0;

	var j = 0;

	while(i < clen){

		j = i + alen;

		if (document.cookie.substring(i, j) == arg)

			return Cookies.getCookieVal(j);

		i = document.cookie.indexOf(" ", i) + 1;

		if(i == 0)

			break;

	}

	return null;

};
 
Cookies.clear = function(name) {

  if(Cookies.get(name)){

    document.cookie = name + "=" +

    "; expires=Thu, 01-Jan-70 00:00:01 GMT";

  }

};
 
Cookies.getCookieVal = function(offset){

   var endstr = document.cookie.indexOf(";", offset);

   if(endstr == -1){

       endstr = document.cookie.length;

   }

   return unescape(document.cookie.substring(offset, endstr));

};
 
$(function(){
 
	Ext.BLANK_IMAGE_URL = '../images/default/s.gif';
 
	function formatDate(value){

        return value ? value.dateFormat('d M, Y') : '';

    };
 
	ds = new Ext.data.Store({                    // retrona algo como:

		proxy:  new Ext.data.ScriptTagProxy({    //

			url:'listar.php'                     // ({"total":"55","resultado":[

		}),                                      //    {"id":"1066","nome":"Agenda","nome_um":"Unidade"},

		reader:  new Ext.data.JsonReader({       //    {"id":"1056","nome":"Alfinete","nome_um":"Caixa"},

			root: 'resultado',                   //    {"id":"1021","nome":"Almofada","nome_um":"Unidade"},

			totalProperty: 'total',              // ...

			id: 'id'

		},                                       // Já tentei colocar o "um_id" no campo "nome_um", referente ao store abaixo, mas tb não deu;

			[

				{name: 'id'},

				{name: 'nome'},

				{name: 'nome_um'}

			]

		)

	});
 
	/** Store do ComboBox **/

	comboDS = new Ext.data.Store({               // retorna algo como:

		proxy:  new Ext.data.ScriptTagProxy({    //

			url:'listar_um.php'                  // ({"total":"8","resultado":[

		}),                                      //    {"um_id":"1","um_nome":"Unidade"},

		reader:  new Ext.data.JsonReader({       //    {"um_id":"2","um_nome":"Caixa"},

			root: 'resultado',                   //    {"um_id":"3","um_nome":"Pacote"},

			totalProperty: 'total',              //    {"um_id":"4","um_nome":"Frasco"},

			id: 'id'                             //  ...

		},

			[

                {name: 'um_id'},

				{name: 'um_nome'}

			]

		)

	});

	comboDS.load();

	/***********************/
 
	/** ComboBox U.M. **/

      var comboUM = new Ext.form.ComboBox({

	                displayField: 'um_nome',

	                //editable: false,

	                //forceSelection: true,

	                //hiddenName: 'um',

					//id: 'comboUM',

	                //inputType:'text',

	                //lazyInit: true,

	                //lazyRender:true,

	                mode: 'local',

                    //msgTarget: 'under',

                    store: comboDS,

                    selectOnFocus: true,

	                triggerAction: 'all',

	                typeAhead: true,

	                valueField: 'um_id'   // no seu ultimo exemplo não tinha valueField, mas sem ele, o grid manda o displayField

      });

	/*******************/
 
	var cm = new Ext.grid.ColumnModel(

		[

			{

				header: "Código",

				dataIndex: 'id',

				width: 45,

				sortable: true,

				editor: new Ext.grid.GridEditor(new Ext.form.TextField(

					{

						allowBlank: false

					}

				))

			},
 
			{

				header: "Nome",

				dataIndex: 'nome',

				width: 145,

				sortable: true,

				editor: new Ext.grid.GridEditor(new Ext.form.TextField(

					{

						allowBlank: false

					}

				))

			},
 
			{

				header: "U.M.",

				dataIndex: 'nome_um', // esse index vem da store principal, com o valor do dispalyField

				width: 75,            // porém mesmo retornando o mesmo valor do valueField não funciona

				editor: comboUM,

				hidden: false

			}

        ]

	);

    cm.defaultSortable = true;
 
	var grid = new Ext.grid.EditorGrid('grid', {

        ds: ds,

        cm: cm,

        enableColLock:false,

		selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),

		monitorWindowResize : true,

		loadMask: true

    });

	grid.render();
 
	var gridForm = new Ext.BasicForm(

		Ext.get('form1'),

		{
 
		}

	);
 
	var gridHeaderPanel = grid.getView().getHeaderPanel(true);

	var tb = new Ext.Toolbar(

			gridHeaderPanel,

			[

				{

					text: 'Novo',

					cls: 'x-btn-text-icon add',

					handler: function() {

						ds.add(

							new Ext.data.Record(

								{

                                    id: '',

									nome: '',

									nome_um: '',

									newRecord:true

								}

							)

						)

					}

				},

				{

					text: 'Deletar',//Deletar

					cls: 'x-btn-text-icon del',

					handler: function() {

						selectedRow = grid.getSelectionModel().getSelected();
 
						if(selectedRow) {

							Ext.MessageBox.confirm('Confirm', 'Deseja apagar?', function(btn) {

								if(btn == "yes"){

									gridForm.submit(

									{

										//waitMsg: 'Deletando usuario, Por favor espere...',

										url:'deletar.php',

										params:{rowid:selectedRow.data.id},

										success:function(form, action) {

											ds.remove(selectedRow);

											grid.getDataSource().reload();

										},

										failure: function(form, action) {

											Ext.example.msg('Opss..', 'Erro!');

										}

									});

								}

							});

						} else {Ext.MessageBox.alert('Opss!','Primeiro selecione um registro!')}

					}

				}	,

				{

					text: 'Salvar',

					cls: 'x-btn-text-icon save',

					handler: function() {

						jsonData = "[";
 
						var j;

						var erro = 0;

						for(i=0;i<ds.getCount();i++) {

							record = ds.getAt(i);

							if(record.data.newRecord || record.dirty) {

								//record.data["data_cadastro"].dateFormat('Y-m-d');

								if(record.data.id == "" || record.data.nome == "" || record.data.nome_um == "" ){

								  Ext.MessageBox.alert('Opss..', 'Todos os campos devem ser preenchidos!');

								  erro++;

								} else {

								  jsonData += Ext.util.JSON.encode(record.data) + ",";

								  j++;

                                }

							}

						}
 
						jsonData = jsonData.substring(0,jsonData.length-1) + "]";
 
						if(typeof j != "undefined"){

							gridForm.submit(

							{

								//waitMsg: 'Salvando alterações, por favor espere...',

								url:'salvar.php',

								params:{data:jsonData},

								success:function(form, action) {

									Ext.example.msg('Ok', 'Salvo com sucesso!');

									//Ext.Msg.alert('Alerta', 'Salvo com sucesso!!!!');

									//ds.commitChanges();

									grid.getDataSource().reload();

								},

								failure: function(form, action) {

									Ext.example.msg('Opss..', 'Erro!');

								}

							});

						}

					}

				}

			]

		)
 
    var gridFooter = grid.getView().getFooterPanel(true);

    var paging = new Ext.PagingToolbar(gridFooter, ds, {

        pageSize: 15,

        displayInfo: false,

        displayMsg: 'Mostrando resultados {0} - {1} de {2}',

        emptyMsg: "Nenhum resultado retornado"

    });
 
    ds.load({params:{start:0, limit:15}});

});

Fabyo · Setembro 19, 2008

Nao sei qual a duvida, os exemplos estao todos funcionando normal, caso precisem mudar alguns campos so prestarem atencao, nao tem segredo

Arquivado

DataGrid completo

Recommended Posts

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Celso Amaral 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Celso Amaral 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ronny 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ronny 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Celso Amaral 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PauloRJ 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Falci 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ronny 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ronny 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Falci 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ronny 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Falci 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

ronny 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Falci 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ronny 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Falci 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66