Ir para conteúdo

Arquivado

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

Luis Paullo

[Resolvido] EXTJS abrir janela para edição

Recommended Posts

Salve pessoal..

 

Não sei se estou na area certa mais vamo la =D

 

To brincando como EXTJS --so iniciante mesmo!! to com um problema

 

fiz o grid form pra Inserir registros e tals

 

o problema e que queria dar 2 clicks na linha do grid e abrir uma window com os dados no form pra edição..

 

Eu fui no forum do EXTJ mais o pessoal la e muito parado e num ajuda em nd..

vim aqui nos master q tem a galera que sempre ajuda ^^

 

ainda num fiz nada dessa parte pois tudo q tentei da errado .. segue meu codigo do grid..

Ext.onReady(function(){

Ext.QuickTips.init();		  
var itemsPerPage = 10;   // set the number of items you want per page		
var store = Ext.create('Ext.data.Store', {
	id:'idMenu',
	autoLoad: false,
	fields:['idMenu','nomeMenu', 'linkMenu','status'],
	pageSize: itemsPerPage, // items per page
	proxy: {
		type: 'ajax',
		url: 'grid/m_manager.php', 
		reader: {
			type: 'json',
			root: 'data',
			totalProperty: 'total'
		}
	}
});
store.load({
	params:{
		start:0,
		limit: itemsPerPage
	}
});
grid = Ext.create('Ext.grid.Panel', {
	title: 'Lista Menu',
	store: store,
	id:'grid_painel',
	iconCls:'table',
	width: 700,
	columns: [
	{
		xtype: 'rownumberer', 	
		width: 40,	
		sortable: false
	},{
		header: 'Nome Menu', 	
		width: 150, 
		dataIndex: 'nomeMenu'
	},{
		header: 'Link - pagina',  	
		width: 150,	
		dataIndex: 'linkMenu'
	},{
		header: 'Ativado', 	
		width: 55,
		renderer:status,	
		dataIndex: 'status'
	}],
	dockedItems: [{
		xtype: 'pagingtoolbar',
		store: store,   // same store GridPanel is using
		dock: 'bottom',
		displayInfo: true,
		displayMsg: 'Mostrando {0} - {1} de {2}',
		displayEmpty: 'Sem Dados'
	}], 
	//rederiza para o elemento div
	renderTo:  "container"
});
});

 

Já sei como funciona a parte do submit, so precisaria d um exemplo ou um artigo tutorial sei la =P

especificando uma forma simples de carrega um form com as informações do grid, pra edição

 

desde já agradeço!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então cara, isso é fácil. ^_^

 

Você está procurando pelos eventos relacionados aos itens contidos no grid. Logo, os que iniciam com item:

ExtJs Manual

 

But, você já deu uma olhada como fica a aplicação usando MVC? Como está começando agora com ExtJs, recomendo que você inicie os estudos logo com uma aplicação MVC, isto se você já tiver noção sobre MVC é claro, pois o projeto fica bem mais organizado.

 

Por exemplo, você teria uma view para exibir o grid, um controller para definir as ações que devem ser executadas após determinado evento, e uma model para resgatar os registros e salvá-los.

 

Se você quiser, eu posso mostrar um exemplo prático que tenho aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites

VLW JCMais ..

 

passa o exemplo ai que fico agradecido :lol:

 

vo sai da forma procedural então =X

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sem entrar em maiores detalhes e utilizado o mesmo código que você postou:

 

Aqui eu utilizo o ExtJS 4 e funciona sem problema.

 

Ext.onReady(function(){
   	Ext.QuickTips.init();         	

	Ext.create('Ext.data.Store', {
		storeId:'menuStore',
		fields:['id', 'nomeMenu', 'linkMenu', 'status'],
		data:{'items':[
			{ 'id': '1', 'nomeMenu': 'Item 1', 'linkMenu':'admin',  'status':'active'  },
			{ 'id': '2', 'nomeMenu': 'Item 2', 'linkMenu':'views',  'status':'active' },
			{ 'id': '3', 'nomeMenu': 'Item 3', 'linkMenu':'ports',  'status':'active'  },
			{ 'id': '4', 'nomeMenu': 'Item 4', 'linkMenu':'google', 'status':'active'  }
		]},
		proxy: {
			type: 'memory',
			reader: {
				type: 'json',
				root: 'items'
			}
		}
	});

	grid = Ext.create('Ext.grid.Panel', {
           	title: 'Lista Menu',
           	store: Ext.data.StoreManager.lookup('menuStore'),
           	id:'grid_painel',
           	iconCls:'table',
           	width: 700,
           	columns: [
           	{
                   	xtype: 'rownumberer',   
                   	width: 40,  	
                   	sortable: false
           	},{
                   	header: 'Nome Menu',	
                   	width: 150, 
                   	dataIndex: 'nomeMenu'
           	},{
                   	header: 'Link - pagina',    	
                   	width: 150, 	
                   	dataIndex: 'linkMenu'
           	},{
                   	header: 'Ativado',  	
                   	width: 55,
                   	renderer:status,    	
                   	dataIndex: 'status'
           	}],
           	dockedItems: [{
                   	xtype: 'pagingtoolbar',
                   	store: Ext.data.StoreManager.lookup('menuStore'),
                   	dock: 'bottom',
                   	displayInfo: true,
                   	displayMsg: 'Mostrando {0} - {1} de {2}',
                   	displayEmpty: 'Sem Dados'
           	}], 
			listeners: {
				/* 
				 * itemdblclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object eOpts )
				 * Fires when an item is double clicked.				
				 */
				itemdblclick: function(dv, record, item, index, e) {
						alert('Evento disparado');
					}
			},
           	//rederiza para o elemento div
           	renderTo:  "container"
   	});
});

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.