Ir para conteúdo


Foto

Combobox carrega apenas os primeiros 25 registros

combo

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

#1 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 24 February 2016 - 08:11

Olá, pessoal

 

Estou com esse problema no combobox, tenho mais de 25 produtos na store, mas ao abrir o combo, ele só carrega os primeiros 25. Alguém já teve esse problema?



#2 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 24 February 2016 - 09:30

Bom dia Marcelo,

 

Quando seu combo faz o load da store, ele está passando limit: 25 na requisição?  A Store tem uma configuração pageSize que por default é 25:  http://docs.sencha.c...re-cfg-pageSize

 

Quando eu não quero passar o limit, eu seto no proxy do store do meu Combo a config: limitParam: undefined - (Por padrão o limitParam = 'limit', colocando ele como undefined, não vai enviar o pageSize 25 no limit).

 

Me corrijam se eu estiver errada!  :)

 

Segue um exemplo pra vc ver: Este é o initComponent do Combobox

initComponent: function() {
	var me = this;

	Ext.apply(me,{
		store: Ext.create('App.store.Cidades', {
			proxy: {
				limitParam: undefined
			}
		})
	});

	me.callParent(arguments);
}

ratamiette

#3 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 24 February 2016 - 13:58

Olá, ratamiette

 

Não sei se coloquei o initComponent no local certo, mas no console apareceu um erro relacionado a criação do proxy:

Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: proxy.undefined
Ext.define('Packt.view.inventory.entrada_saida.FormEntradaSaida', {
	extend: 'Ext.form.Panel',
	alias: 'widget.formentradasaida',

	store: 'Packt.store.inventory.Entradas_Saidas',

	requires: [
		'Packt.util.Util',		
	],		

	frame: true,
	bodyPadding: 2,		

	layout: {
		type: 'hbox',
		align: 'stretch'
	},

	items: [
		{
			xtype: 'grid',
			width: '70%',
			columnLines: true,
			viewConfig: {				
				listeners: {
					render: createTooltip
				}
			},
			store: 'Packt.store.inventory.Entradas_Saidas',			
			columns: [
				{
					width: '15%',
					text: 'Produto',
					dataIndex: 'produto'
				},
				{
					width: '10%',
					text: 'Quantidade',
					dataIndex: 'quantidade'
				},
				{
					width: '20%',
					text: 'Destino',
					dataIndex: 'destino'
				},
				{
					xtype: 'datecolumn',
					width: '15%',
					format: 'd-m-Y H:i:s',
					text: 'Data da Operação',
					dataIndex: 'dataOperacao'
				},
				{
					width: '30%',
					text: 'Usuário| Matrícula',
					dataIndex: 'User_id'
				},
				{
					width: '10%',
					text: 'Operação',
					dataIndex: 'operacao'
				}				

			],		
			tbar: [				
				{
					xtype: 'combo',
					labelWidth: 40,
					itemId: 'comboEntradaSaida',
					fieldLabel: 'Filtrar',
					displayField: 'name',
					valueField: 'valor',
					queryMode: 'local',
					store: Ext.create('Ext.data.Store', {
						fields: ['valor', 'name'],
						data: [
							{"valor": "entrada", "name":"Entrada"},
							{"valor": "saida", "name":"Saída"},
							{"valor": "todos", "name":"Todos"}
						]
					}),
					listeners: {
						select: function(obj) {
							var grid = obj.up('grid');
							var liststore = grid.store;								
							liststore.proxy.extraParams = {
								action: 'filtrar_log',
								operacao: obj.getDisplayValue()
							},
							liststore.load();
						}
					}
				},
				{
					xtype: 'tbseparator'
				},
				{
					xtype: 'button',
					text: 'Exportar para PDF',
					itemId: 'exportar_pdf',
					iconCls: 'pdf'					
				}
			],
			dockedItems: [				
				{
					xtype: 'pagingtoolbar',
					dock: 'bottom',
					store: 'Packt.store.inventory.Entradas_Saidas',
					displayInfo: true,
					items: [
						{
							xtype: 'text',
							text: 'Coloque o mouse sobre um registro para ver as observações*',
							cls: 'infoText'
						}
					]
				}				
			]
		},
		{
			xtype: 'tbfill'
		},
		{
			xtype: 'form',
			bodyPadding: 10,
			width: '29%',			
			items: [
				{
					xtype: 'fieldset',
					title: 'Formulário',
					height: '33%',
					defaults: {
						afterLabelTextTpl: Packt.util.Util.required,
						anchor: '100%',
						allowBlank: false,
						labelWidth: 80
					},		
					items: [														
						{
							xtype: 'combobox',
							fieldLabel: 'Produto',
							forceSelection: true,
							name: 'produto',
							displayField: 'nome',
							valueField: 'nome',
							queryMode: 'remote',
							store: 'inventory.Products'			
						},
						{
							xtype: 'textfield',
							fieldLabel: 'Quantidade',
							name: 'quantidade',
							msgTarget: 'under'
						},
						{
							xtype: 'textfield',
							fieldLabel: 'Destino',
							name: 'destino',
							msgTarget: 'under'
						},
						{
							afterLabelTextTpl: '', //Override da configuração padrão
							allowBlank: true, //Override da configuração padrão
							xtype: 'textarea',
							fieldLabel: 'Observações',
							name: 'observacoes',
							height: 150
						}								
					],
					initComponent: function() {
						var me = this;

						Ext.apply(me, {
							store: Ext.create('Packt.store.inventory.Products', {
								proxy: {
									limitParam: undefined
								}
							})
						});
						me.callParent(arguments);
					}			
				},
				{
					xtype: 'fieldset',
					itemId: 'infoDoProduto',
					title: 'Info do Produto',										
					height: '33%',
					//cls: '',
					defaults: {
						cls: 'userNameText'
					},					
					items: [											
						{
							xtype: 'text',
							itemId: 'produto',
							text: 'Produto: ',
							cls: 'userNameText'
						},
						{
							xtype: 'tbfill'//Separar uma  informação de outra
						},
						{
							xtype: 'text',
							itemId: 'codProduto',
							text: 'Código'
						},
						{
							xtype: 'tbfill'
						},
						{
							xtype: 'text',
							itemId: 'qtdeProduto',
							text: 'Quantidade no Estoque: '
						},
						{
							xtype: 'tbfill'
						},
						{
							xtype: 'text',
							itemId: 'qtdeMinProduto',
							text: 'Quantidade Mínima: '
						},	
						{
							xtype: 'tbfill'
						},					
						{
							xtype: 'text',
							itemId: 'descProduto',
							text: 'Descrição: '
						}
					]
				},
				{
					xtype: 'fieldset',
					title: 'Imagem do Produto',					
					height: '33%',
					items: [
						{
							xtype: 'image',
							itemId: 'imageProduto',							
        					width: '50%',                
        					src: ''
						}
					]
				}
			],
			rbar: [//Toolbar localizada no lado direito com dois botões
				{
					xtype: 'button',
					itemId: 'entrada',
					scale: 'large',
					text: 'Entrada',			
					iconCls: 'entrada',
					iconAlign: 'top',
					cls: 'x-btn-as-arrow',
					formBind: true
				},
				{
					xtype: 'tbseparator'
				},
				{	
					xtype: 'button',
					itemId: 'saida',
					scale: 'large',
					text: 'Saída',			
					iconCls: 'saida',
					iconAlign: 'top',
					cls: 'x-btn-as-arrow',
					formBind: true
				}
			]			
		}
	]
});

function createTooltip(view) {//Função para mostrar uma informação ao passar o mouse sobre um registro

	view.tip = Ext.create('Ext.tip.ToolTip', {
		target: view.el,
		delegate: view.itemSelector,
		trackMouse: true,
		dismissDelay: 15000,
		renderTo: Ext.getBody(),		
		listeners: {
			beforeShow: function(tip) {

				var tooltip = view.getRecord(tip.triggerElement).get('observacoes');
				
				if(tooltip == "") {					
					tip.update("Nenhuma observação");					

				} else {
					tip.update(tooltip);					
					tip.on('show', function(){
						Ext.defer(tip.show, 10, tip);
					}, tip, {single: true});
				}
			}
		}
	});
}



#4 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 24 February 2016 - 14:33

Olá Marcelo,

 

Desculpe se faltou informação. Retirei uma parte do código pq era específico da minha app. Eu utilizo no initComponent pq eu defini uma classe só para o Combobox, pois utilizo ele em vários lugares.

 

Segue abaixo o código completo: Veja que insiro na config proxy o type = abstractproxy, pois tenho uma classe abstrata que serve para todas as stores.

 

No seu caso, defina o limitParam: undefined onde vc define o proxy da sua Store Packt.store.inventory.Products

Ext.define('App.view.cidade.Combo', {
	extend: 'Ext.form.field.ComboBox',
	alias: 'widget.cidadecombo',
	name: 'id_cidade',
	fieldLabel: t('Cidade'),
	displayField: 'cidade',
	valueField: 'id_cidade',
	emptyText: 'Selecione uma cidade...',
	autoLoadStore: false,
	minChars: 4,
	typeAhead: true,
	queryMode: 'local',

	initComponent: function() {
		var me = this;

		Ext.apply(this,{
			store: Ext.create('Radiusnet.store.Cidades', {
				proxy: {
					//type: 'abstractproxy',
					limitParam: undefined
				}
			})
		});

		me.callParent(arguments);
	}
});


ratamiette

#5 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 24 February 2016 - 15:29

Segue um link do Fiddle: https://fiddle.sench.../#fiddle/167r 

 

Espero que ajude. Veja onde insiro o initComponent. 


ratamiette

#6 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 24 February 2016 - 16:11

Observe: se você comentar me.store.getProxy().limitParam = undefined;  ele só vai aparecer 25 registros, ou seja, vai ignorar o ultimo e-mail que é [email protected] (id 26)

 

Descomente e irá aparecer todos os e-mails.!


ratamiette

#7 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 24 February 2016 - 23:06

ratamiette, continuo sem ter sucesso. Fiz de todos os modos que você mostrou, mas continua dando erro. Vejo no console que o limit não tá sendo enviado, aí no meu PHP da erro porquê ele fica sem saber quem é o limit e não retorna registro algum.



#8 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 25 February 2016 - 08:21

Bom dia, ratamiette

 

Modifiquei meu código PHP pra fazer a query mais simples se o limit não foi definido. Todos os registros da minha store estão sendo retornados, porém, dois erros estão sendo apresentados no meu console. Um quando eu abro a classe que contém o combo e outro quando eu tento selecionar um registro do combo.

Uncaught TypeError: Cannot read property 'cancel' of undefined
Uncaught TypeError: Cannot read property 'apply' of undefined
{
	xtype: 'combobox',
	fieldLabel: 'Produto',
	forceSelection: true,
	name: 'produto',
	displayField: 'nome',							
	valueField: 'nome',							
	queryMode: 'remote',
	/*initComponent: function() {
		var me = this;
		Ext.apply(this, {
		        store: Ext.create('Packt.store.inventory.Products', {
			      proxy: {
				      limitParam: undefined
			      }
			})
		});
		me.callParent(arguments);
	},*/
	initComponent: function() {
		var me = this;								
		me.store = Ext.create('Packt.store.inventory.Products');							
		me.store.getProxy().limitParam = undefined;
		me.callParent(arguments);						
	},
	listeners: {//Evento do combobox para setar as informações do produto selecionado no fieldset de informações do produto
			select: function(combo, records, e0pts) {									
				if(combo.getValue() != "" || combo.getValue() != null) {
					//Query para pegar a referência dos campos a serem preenchidos com os valores do produto
										var nomeProduto = Ext.ComponentQuery.query('#produto');
										var codProduto = Ext.ComponentQuery.query('#codProduto');
										var qtdeProduto = Ext.ComponentQuery.query('#qtdeProduto');
										var qtdeMinProduto = Ext.ComponentQuery.query('#qtdeMinProduto');
										var descProduto = Ext.ComponentQuery.query('#descProduto');
										var imageProduto = Ext.ComponentQuery.query('#imageProduto');									

										//Setando os valores nos campos
										nomeProduto[0].setText('Produto: '+ records[0].data.nome);
										codProduto[0].setText('Código: '+ records[0].data.codigo);
										qtdeProduto[0].setText('Quantidade no Estoque: '+ records[0].data.quantidade);
										qtdeMinProduto[0].setText('Quantidade Mínima: '+ records[0].data.quantidadeMin);
										descProduto[0].setText('Descrição: '+ records[0].data.descricao);
										if (records[0].data.picture != null) {//Se não tiver imagem, coloque uma padrão
											imageProduto[0].setSrc('resources/productImages/'+records[0].data.picture);

										} else {
											imageProduto[0].setSrc('resources/productImages/sem_imagem.gif');										
										}

									} 
								}
							}							
						},

Veja como ficou meu combo. Quando tentei fazer o initComponent da primeira forma (que está comentada) deu o erro de proxy.undefined



#9 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 25 February 2016 - 18:10

Boa tarde Marcelo,

 

Vou tentar descobrir o pq deste erro. 


ratamiette

#10 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 25 February 2016 - 23:10

Boa noite Marcelo,

 

É necessário tratar no backend mesmo. Se não existir o limit, não deve inserir na query. 

 

Vi que o meu exemplo no fiddle também deu estes erros ao expandir a lista do Combo e ao tentar selecionar um item. Encontrei a solução para não dar estes erros:

 

Comentei esta linha abaixo (dentro do initComponent):

me.callParent(arguments)

Por esta:

Ext.form.field.ComboBox.prototype.initComponent.call(me)

Após fazer isso, você vai ver que não aparecem mais os erros no console e você consegue selecionar um item do Combo. Não compreendi totalmente o porque de ter que chamar desta forma o initComponent. (não achei a diferença na net...)

 

Eu acredito que o motivo pelo qual dá erro ao chamar o me.callParent(arguments) seja por estarmos usando somente o xtype do combo, desta forma não estamos estendendo a classe, então não tem como chamarmos o callParent desta forma. Não sei se está correto esta informação...

 

 * Vamos ver se os experts esclarecem isso melhor pra nós... rsrs

 

Sobre você utilizar a primeira forma (a que está comentada), deu erro porque faltou definir as outras config's da proxy. Pra você utilizá-la, você teria que implementar toda a configuração da sua proxy. Segue exemplo abaixo:

/*
initComponent: function() {
	var me = this;
	
        Ext.apply(me, {
	     store: Ext.create('Packt.store.inventory.Products', {
                 proxy: {
                      type: 'ajax', //Configure de acordo com sua app                      
                      url: 'emails.json', //Configure de acordo com sua app
                      reader: {
                          type: 'json', //Configure de acordo com sua app
                          totalProperty: 'count', //Configure de acordo com sua app
                          root: 'rows' //Configure de acordo com sua app
                      },
                      limitParam: undefined
                 }
	     });
	});

	Ext.form.field.ComboBox.prototype.initComponent.call(me)
},
*/ 

Falei pra vc inserir o limitParam:undefined no initComponent do seu combobox, pois desta forma, se você utilizar a store  Packt.store.inventory.Products não só no combo, mas numa grid por exemplo, não vai interferir na sua paginação pelo fato de trazer todos os registros (se vc utiliza paginação, ele tem que passar o limit)

 

Bom espero que te ajude e que alguém nos responda se está correto minha teoria o fato de ter de chamar o initComponent pelo prototype da Classe do Combo.

 

Até mais!  ;)


ratamiette

#11 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 26 February 2016 - 08:48

Bom dia, ratamiette

 

Realmente agora os erros sumiram, porém, quando eu seleciono algum dos registros que, no meu grid de produtos não estão na primeira página, não consigo referencia-los na minha store. Por exemplo, tenho 27 produtos, no combo aparecem todos normalmente, lá no controller eu pego a referência da store e vejo se o produto que eu selecionei no meu combo está nela, só que eu percebi que a store só tá trazendo os 25 primeiros registros. Eu tentei setar ao criar a store, o pageSize undefined, mas continua indo 25. 

 

Não sei se consegui ser muito claro..



#12 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 29 February 2016 - 12:41

Marcelo, fiz uma solução nesse tópico "[RESOLVIDO] Retirar os parametros de paginação na requisição" que é utilizada para remover TODOS os parâmetros de paginação.

 

Veja se essa solução lhe ajuda.


  • ratamiette curtiu isso

"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)






Tópicos que também usam as tags combo:

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

0 membros, 0 visitantes, 0 membros anônimos