Ir para conteúdo


Foto

Exemplo para grid


  • Por favor, faça o login para responder
2 respostas neste tópico

#1 rogerio

rogerio

    Member Avançado

  • Membros
  • PipPipPip
  • 85 posts

Postado 11 April 2008 - 16:24

vi que tem um monte de gente com algumas duvidas sobre grid e suas colunas
pois bem, fiz esse exemplo para tentar ajudar quem ta meio perdido.
nesse exemplo uso muito a separação do objeto que é muito importante para configurar eventos tanto para o objeto que dispara quanto para o que recebe (por exemplo o toobar desse exemplo).

é so adapitar o colunModel e store para seu xml mas de qualquer forma coloco o xml que usei.

aqui o js:
Ext.onReady(function(){
    Ext.QuickTips.init();
/*
 * Aqui eu crio o toolbar grid
 */
	var Escondertelefone = new Ext.Button({
		pressed :true
		,text:'Esconder telefone'
	});
	
	var Mostrartelefone= new Ext.Button({
		pressed :true
		,text:'Mostrar telefone'
	});
	
	var EsconderEmail= new Ext.Button({
		pressed :true
		,text:'Esconder Email'
	});
	var MostrarEmail = new Ext.Button({
		pressed :true
		,text:'Mostrar Email'
	});
	
	var MeuToolbar = new Ext.Toolbar({
		items:[
			Escondertelefone
			,Mostrartelefone
			,EsconderEmail
			,MostrarEmail
			]
	});
	
	/*
	 * começar montar meu griar meu grid
	 */
	//criar o data store
	storeAgenda = new Ext.data.Store({
			url: 'agenda.xml'						
			,reader: new Ext.data.XmlReader({
				record: 'Agenda'
				,id: 'IDAgenda'
				},[
				{name: 'IDAgenda', mapping: 'IDAgenda'}
				,{name: 'Nome', mapping: 'Nome'}
				,{name: 'Telefone', mapping: 'Telefone'}
				,{name: 'Emal', mapping: 'Emal'}
				,{name: 'Chk', mapping: 'Chk'}
			])
		});
	
	// Exmplo do check box (peguei do edit-grid, "column plugin example")
	var checkColumn = new Ext.grid.CheckColumn({
		header: "Chk"
		,dataIndex: 'Chk'
		,width: 55
	});
		
	//modo das colunas
	var MeuColumnModel = new Ext.grid.ColumnModel([
		{
			header: "ID"
			//,id:'tralala'
			,width: 50
			,dataIndex: 'IDAgenda'
			,defaultSortable: true
		},{
			header: "Nome"
			,width: 150
			,dataIndex: 'Nome'
			,defaultSortable: true
			,renderer: function(v, p, r, l){
				// v = value
				// p = essa coluna
				// r = record do store
				// l = numero da linha (uma especie de id da linha começa com 0, bem util para um plugin ou render)
                                                   // aqui eu coloco o tooptip no objeto
				p.attr = ' ext:qtip="Id Agenda: ' + r.data.IDAgenda + '<br />Nome ' + r.data.Nome + '<br />Telefone: ' + r.data.Numero + '<br />E-mail: ' + r.data.Emal + '<br />Id Row: ' + l + '"';
				return v;
			}
		},{
			header: "Telefone"
			,width: 150
			,align: 'left'
			,dataIndex: 'Telefone'
			,defaultSortable: true
		},{
			header: "E-mail"
			,width: 250
			,dataIndex: 'Emal'
			,defaultSortable: true
		}
		,checkColumn
	]);
	
	//crio o modo da lina nesse caso selecionar apenas uma
	var RwModel = new Ext.grid.RowSelectionModel({singleSelect:true});
	
	// crio o grid
	var gridAgenda = new Ext.grid.GridPanel({
			store: storeAgenda,
			cm: MeuColumnModel,
			plugins:checkColumn,
			sm: RwModel,
			border:true,
			stripeRows: true,
			loadMask: true,
			bbar: MeuToolbar,
			renderTo:'gridAgenda',
			width:700,
			height:400
	});
	storeAgenda.load();
	//comfigurar os eventos dos botões do toobar

	Mostrartelefone.setVisible(false);

	MostrarEmail.setVisible(false);

	Escondertelefone.on('click',function(){
		MeuColumnModel.setHidden( 2,true);
		Mostrartelefone.setVisible(true);
		Escondertelefone.setVisible(false);
	});
	Mostrartelefone.on('click',function(){
		MeuColumnModel.setHidden( 2,false);
		Escondertelefone.setVisible(true);
		Mostrartelefone.setVisible(false);
	});
	EsconderEmail.on('click',function(){
		MeuColumnModel.setHidden( 3,true);
		MostrarEmail.setVisible(true);
		EsconderEmail.setVisible(false);
	});
	MostrarEmail.on('click',function(){
		MeuColumnModel.setHidden( 3,false);
		EsconderEmail.setVisible(true);
		MostrarEmail.setVisible(false);
	});
	
});
// plugin da ext
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);
            record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-check-col-td'; 
        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
    }
};

o xml que uso é esse:
<ConsultarAgenda>
	<Agenda>
		<IDAgenda >000001</IDAgenda>
		<Nome>Rogerinho Malandro</Nome>
		<Telefone >11 1111-1111</Telefone>
		<Emal>Rogerinho Malandro</Emal>
		<Chk>1</Chk>
	</Agenda>
	<Agenda>
		<IDAgenda>000002</IDAgenda>
		<Nome>Rogerinho Malandro</Nome>
		<Telefone >22 2222-2222</Telefone>
		<Emal>Rogerinho Malandro</Emal>
	</Agenda>
		<Agenda ><IDAgenda>000003</IDAgenda>
		<Nome>Rogerinho Malandro</Nome>
		<Telefone >33 3333-3333</Telefone>
		<Emal>Rogerinho Malandro</Emal>
		<Chk>0</Chk>
	</Agenda>
	<Agenda>
		<IDAgenda>000004</IDAgenda>
		<Nome>rogerio</Nome>
		<Telefone >44 4444-4444</Telefone>
		<Emal>Rogerinho Malandro</Emal>
		<Chk>0</Chk>
	</Agenda>
	<Agenda>
		<IDAgenda>000005</IDAgenda>
		<Nome>rogerio</Nome>
		<Telefone >55 5555-5555</Telefone>
		<Emal>Rogerinho Malandro</Emal>
		<Chk>0</Chk>
	</Agenda>
	<Agenda>
		<IDAgenda>000006</IDAgenda>
		<Nome>rogerio</Nome>
		<Telefone >66 6666-6666</Telefone>
		<Emal>Rogerinho Malandro</Emal>
		<Chk>1</Chk>
	</Agenda>
	<Agenda>
		<IDAgenda>000007</IDAgenda>
		<Nome>Rogrio Coelho</Nome>
		<Telefone >77 7777-7777</Telefone>
		<Emal>Rogerinho Malandro</Emal>
		<Chk>1</Chk>
	</Agenda >
</ConsultarAgenda>


e aqui o html:
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
		<script type="text/javascript" src="js/ext-base.js"></script>
		<script type="text/javascript" src="js/ext-all.js"></script>
		<script type="text/javascript" src="ExemploExtgrid.js"></script>
	</head>
	<body>
		<div id="gridAgenda"></div>
	</body>
</html>


e acabou...
espero te ajudado
;)

#2 Leonardo

Leonardo

    Member Avançado

  • Membros
  • PipPipPip
  • 312 posts
  • LocationSão José dos Campos - SP

Postado 24 June 2008 - 15:53

Olá,, nao consegui rodar seu codigo nao,, tudo funciona perfeitamente, só que ele nao traz o arquivo XML;..;.
Leonardo Melo de Lima
Blog: http://tudodeti.blogspot.com/

#3 Vinícius Stutz

Vinícius Stutz

    Member Avançado

  • Membros
  • PipPipPip
  • 52 posts
  • LocationRJ

Postado 03 March 2009 - 11:17

Isso também acontece aqui comigo... só funciona se for JSON...
Atenciosamente,
Vinícius Stutz

OBS: Ajude a manter o fórum organizado! Quando sua dúvida for sanada, altere o título do seu tópico adicionando [RESOLVIDO] junto ao título.




0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos