Ir para conteúdo


Foto

Tem como popular um combo com um item que não está na store?

#combobox #store

Melhor Resposta Wemerson Januario , 09 November 2015 - 12:37

Wemerson, cara, depois de muita dor de cabeça consegui fazer aparecer a opção 'Todos'. Mas se eu for cadastrar um produto, ao escolher o tipo de material, essa opção fica aparecendo. Teria como fazer a opção aparecer somente pro combo? 

Outra coisa, não consegui fazer o build, mas vou deixar pra outro post

Está acontecendo isso pois você definiu a config allTextField na definição da classe do store. Ao invés de adicionar a config  allTextField na definição da classe do store, configure isso apenas nos stores que deseja no momento da instanciação nos combos.

Confira como fiz no fiddle

https://fiddle.sencha.com/#fiddle/10l7

Visualizar todo o conteúdo do post


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

#1 Marcelo Augusto

Marcelo Augusto

    Member Avançado

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

Postado 05 November 2015 - 10:10

Estou implementando um combo e nele tem um evento select. Quando eu escolho uma das opções (de acordo com o que está cadastrado na store) o grid é populado de acordo com a minha query. No entanto, eu não tenho uma opção de mostrar todos, visto que tô pegando os itens da store. Será que tem como eu adicionar essa opção sem ter que cadastrar na minha store? Ou então, fazer uma query selecionando todos os elementos quando meu combo estiver vazio, sei lá..



#2 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 05 November 2015 - 11:52

Marcelo Augusto, pelo que entendi seria você add uma opção no Store do Combo que seria a opção "Todos"?

 

Se for isso mesmo tem como realizar isso, vou lhe dar o caminho das pedras:

 

- Monitora o evento "load" do Store do Combo;

- No callback do evento "load" você criar o objeto do Model do Store para ser o item da opção "Todos";

- Através da referência do seu Store você adiciona o novo item ("Todos") utilizando o método "insert" passando o index ZERO;

 

Seria mais ou menos isso.

 

Espero que lhe ajude.


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


#3 Marcelo Augusto

Marcelo Augusto

    Member Avançado

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

Postado 05 November 2015 - 14:29

É isso mesmo, Legolas. Por que quando o usuário clicar em "Todos", eu trago tudo de volta novamente. Porém, mesmo com suas dicas eu não consegui implementar :(

Também fiquei com uma dúvida quanto as suas dicas. Quando eu fizer o insert, esse registro vai ficar de forma permanente na minha store, ou só vai ser criado quando eu clicar no meu combobox?



#4 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 837 posts
  • LocationGoiânia - GO

Postado 05 November 2015 - 16:14

Marcelo, Irá criar um registro apenas para aquela instancia.

 

Para colorir ainda mais o desenho do Legolas acabei de criar uma solução para atender essa necessidade através de override na classe Ext.data.Store

 

Basta passar a propriedade de configuração allTextField como o nome do campo displayField, que irá fazer a mágica.

 

Acho que vai ajudar muitos por ai que procuram algo desse tipo.

 

 

confira:

https://fiddle.sencha.com/#fiddle/10l7

 

 

Abraços


  • Legolas curtiu isso

Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#5 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 06 November 2015 - 07:54

Boa meu caro @Wemerson.

 

Depois lança na seção de exemplos ;)


  • Wemerson Januario 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)


#6 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 837 posts
  • LocationGoiânia - GO

Postado 06 November 2015 - 08:33

Boa meu caro @Wemerson.

 

Depois lança na seção de exemplos ;)

All done Sir!

 

http://forum.extjs.c...s-no-index-0/


  • Legolas curtiu isso

Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#7 Marcelo Augusto

Marcelo Augusto

    Member Avançado

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

Postado 06 November 2015 - 10:24

Wemerson e Legolas, muito obrigado pela atenção..

 

Então, nesse exemplo que o wemerson deu eu farei o override da store no mesmo arquivo em que se encontra o meu combobox?

Abaixo eu coloquei o arquivo que contempla meu combo

Ext.define('Packt.view.inventory.ProductsList', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.productslist',
	//frame: true,
	requires: [
		'Ext.ux.form.SearchField',
		'Ext.toolbar.Spacer'
	],
	//store: 'Packt.store.inventory.Products',
	store: 'Products',
	columnLines: true,

	initComponent: function() {
		var me = this;

		if(Ext.isString(me.store)) {
			me.store = Ext.create('Packt.store.inventory.Products');
		}

		Ext.apply(me, {
			columns: [
				{
					width: '10%',
					dataIndex: 'codigo',
					text: 'Código'			
				},
				{
					width: '20%',
					dataIndex: 'nome',
					text: 'Nome'
				},
				{
					width: '30%',
					dataIndex: 'descricao',
					text: 'Descrição'
				},
				{
					width: '6%',
					dataIndex: 'quantidade',
					text: 'Quantidade'
				},
				{
					width: '9%',
					dataIndex: 'quantidadeMin',
					text: 'Quantidade Mínima'
				},
				{
					xtype: 'datecolumn',
					format: 'd/m/Y',
					width: '9%',
					dataIndex: 'dataCadastro',
					text: 'Data de Cadastro'
				},
				{
					width: '9%',
					dataIndex: 'Sigla_id',
					text: 'Unidade de Medida',
					renderer: function(value, metaData, record ){ 
						var siglasStore = Ext.getStore('siglas');			
						var sigla = siglasStore.findRecord('id', value);						
						return sigla != null ? sigla.get('name') : value;
					}
				},
				{
					width: '7%',
					dataIndex: 'tipoMaterial',
					text: 'Material',
					renderer: function(value, metaData, record) {
						var materiaisStore = Ext.getStore('materiais');						
						var material = materiaisStore.findRecord('id', value);						
						return material != null ? material.get('name') : value;
					}
				}
			],

			viewConfig: {
				stripeRows: true,
				getRowClass: function(record, index, rowParams, store) {
					if(record.get('quantidade') <= record.get('quantidadeMin')) {
						return "vermelho";

					} else {
						return "preto";
					}
				}
			},

			dockedItems: [
				{
					dock: 'top',
					xtype: 'toolbar',
					items: [
						{							
							fieldLabel: 'Pesquisar pelo nome',
							labelWidth: 110,
							flex: 1,
							xtype: 'searchfield',
							store: me.store,
							paramName: 'filter',
							onTrigger2Click: me.onSearchFieldTrigger2Click
						},
						{
							xtype: 'tbspacer',
							width: 50
						},
						{
							xtype: 'combo',
							itemId: 'combo-material',
							fieldLabel: 'Tipo de material',
							labelWidth: 90,							
							store: 'inventory.Materiais',
							displayField: 'name',
							valueField: 'id',
							query: 'local',
							listeners: {
								select: function(obj) {
									var grid = obj.up('grid');
									var liststore = grid.store;															
									liststore.proxy.extraParams = {
										action: 'filtrar_material',
										operacao: obj.getValue()
									},									
									liststore.load();
								}
							}
						}
					]
				},
				{
					xtype: 'pagingtoolbar',
					store: me.store,
					dock: 'bottom',
					displayInfo: true,
					emptyMsg: 'Não há registros a serem exibidos',
					displayMsg: 'Exibindo {0} - {1} de {2} registro(s)'
				}
			]
		});
		
		me.callParent(arguments);
		me.store.load();
	},

	onSearchFieldTrigger2Click: function() {
		var searchField = this,
			value = searchField.getValue(),
			store = searchField.store;

		var valorCombo = Ext.ComponentQuery.query('#combo-material')[0];		
		if(value.length >= 0) {
			//Passando os valores a serem resgatados no SERVER 
			//param1 : Valor a ser recuperado no backend
			//param2 : Valor selecionado no combo
			store.getProxy().setExtraParam('combo-material', valorCombo.getValue());

			store.filter({
				id: searchField.paramName,
				property: searchField.paramName,
				value: value
			});
			searchField.hasSearch = true;
			searchField.triggerCell.item(0).setDisplayed(true);
			searchField.updateLayout();
		}
	}
});


#8 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 837 posts
  • LocationGoiânia - GO

Postado 06 November 2015 - 10:29

Não Marcelo, existe um dir apropriado para guardar seus Overrides, e serão aplicados para toda sua app.

Você está usando Sencha CMD?

Essa app sua é pra valer ou estudos?

Sugiro que trabalhe/estude com Ext JS 6 caso o proposito da sua app seja aprendizado, terá mais facilidade para organizar isso e não perderá tempo com Ext 4.

 

Vlws


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#9 Marcelo Augusto

Marcelo Augusto

    Member Avançado

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

Postado 06 November 2015 - 10:42

Wemerson, estou usando o Senha CMD sim, cara. Essa app é pra valer, é um compilado de sisteminhas que tô desenvolvendo pro local onde tô estagiando. Mas também é estudo porquê na academia a gente só vê java, java, java e o meu supervisor se encantou quando viu o ExtJS e eu tô tentando aprendê-lo com a ajuda de vocês.. 



#10 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 837 posts
  • LocationGoiânia - GO

Postado 06 November 2015 - 10:59

a sim pensei que era estudo quando vi o Namespace Packt. Se é pra valer meu parceiro, mande ver ai então. Sobre os overrides, sugiro que coloque em uma pasta overrides e carregue eles no app.js via require.

 

Acho que no Ext JS 4 é assim que carrega overrides, não lembro muito bem.

//@require @packageOverrides
//@require @appOverrides



Ext.application({
  requires: [
    'AppOverrides.*'
  ],
  name: 'App',
  extend: 'App.Application',
  autoCreateViewport: true
});

Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#11 Marcelo Augusto

Marcelo Augusto

    Member Avançado

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

Postado 06 November 2015 - 14:27

Wemerson, cara, ainda não consegui fazer funcionar. Vou descrever como eu tentei fazer:

Criei um arquivo na pasta overrides chamado MaterialOverride.js e coloquei o seguinte código:

Ext.define('AppOverrides.data.Store', {
	override: 'Ext.data.Store',
	allText: 'Todos',
	allTextField: null,
	constructor: function(cfg) {
		var me = this;
		me.callParent(arguments);
		if(me.allTextField) {
			me.on('load', me.addAllOption, me);
		}
	},

	addAllOption: function() {
		var me = this,
		newRecord = {};
		newRecord[me.allTextField] = me.allText;
		me.insert(0, newRecord);
	}
});

Aí fui na store que referencio lá no meu combo e adicionei só aquela trecho do seu exemplo que é

allTextField: 'funcionario_nome',

Ela ficou assim:

Ext.define('Packt.store.inventory.Materiais', {
    extend: 'Ext.data.Store',
    allTextField: 'name',
    requires: [
        'Packt.model.inventory.Material'
    ],

    model: 'Packt.model.inventory.Material',

    //pageSize: 3,

    storeId: 'materiais',

    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'php/inventory/material.php',
        
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

No app.js eu coloquei exatamente como mostrou, menos essas linhas que estão comentadas, pois não sei exatamente onde elas devem ficar.

Nenhum erro foi mostrado, porém a opção 'Todos' não apareceu no combo.

 

Agradeço a sua ajuda, cara e espero não estar te atrapalhando muito.



#12 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 837 posts
  • LocationGoiânia - GO

Postado 06 November 2015 - 15:06

o que está acontecendo é que o arquivo de override não está sendo carregado ainda.

Crie um arquivo js chamado Store.js ao invés de MaterialOverride.js e salve dentro de overrides/data/. respeitando o namespace da classe.

Faça require de namespace AppOverrides.* no app.js

coloque o comentário exatamente como postei no arquivo app.js ou registre o path assim

Ext.Loader.setConfig({
paths : { 
'AppOverrides': 'overrides'
}
}); 

vai no seu arquivo sencha.cfg e adicione o dir no classpath

# The path(s) to application javascript sources (comma separated)
app.classpath=${app.dir}/app,${app.dir}/app.js,${app.dir}/overrides 

rode sencha app refresh e veja se aplica


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#13 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 837 posts
  • LocationGoiânia - GO

Postado 06 November 2015 - 15:17

este post mostra como aplicar overrides no Ext 4

 

http://moduscreate.c...t-js-overrides/


  • Legolas curtiu isso

Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#14 Marcelo Augusto

Marcelo Augusto

    Member Avançado

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

Postado 09 November 2015 - 10:41

Wemerson, cara, depois de muita dor de cabeça consegui fazer aparecer a opção 'Todos'. Mas se eu for cadastrar um produto, ao escolher o tipo de material, essa opção fica aparecendo. Teria como fazer a opção aparecer somente pro combo? 

Outra coisa, não consegui fazer o build, mas vou deixar pra outro post



#15 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 837 posts
  • LocationGoiânia - GO

Postado 09 November 2015 - 12:37   Melhor Resposta

Wemerson, cara, depois de muita dor de cabeça consegui fazer aparecer a opção 'Todos'. Mas se eu for cadastrar um produto, ao escolher o tipo de material, essa opção fica aparecendo. Teria como fazer a opção aparecer somente pro combo? 

Outra coisa, não consegui fazer o build, mas vou deixar pra outro post

Está acontecendo isso pois você definiu a config allTextField na definição da classe do store. Ao invés de adicionar a config  allTextField na definição da classe do store, configure isso apenas nos stores que deseja no momento da instanciação nos combos.

Confira como fiz no fiddle

https://fiddle.sencha.com/#fiddle/10l7


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#16 Marcelo Augusto

Marcelo Augusto

    Member Avançado

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

Postado 10 November 2015 - 10:22

Perfeito, cara! Muito obrigado pela atenção e pelas dúvidas sanadas, você e o Legolas!


  • Wemerson Januario curtiu isso

#17 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 10 November 2015 - 19:51

Perfeito, cara! Muito obrigado pela atenção e pelas dúvidas sanadas, você e o Legolas!

#TamoJunto


"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 #combobox, #store:

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

0 membros, 0 visitantes, 0 membros anônimos