Ir para conteúdo


Foto

Mudar cor do GroupHeaderTpl no Feature Grouping


Melhor Resposta Wemerson Januario , 18 January 2016 - 18:34

Isso mesmo Rapha, fiz um fork do seu fiddle e implementei o override . agora ficará fácil brincar com o estilo do group com apenas um método.

 

Não mudou muito comparando sua implementação, mas agora ficará mais simples implementar nas próximas grids.

ao invés de usar style mudei para class css pra ficar mais profissa.(veja o arquivo style.css no fiddle)

 

saca só como ficou. 

 

https://fiddle.sencha.com/#fiddle/141g

 

espero que ajude. abraços

Visualizar todo o conteúdo do post


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

#1 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 18 January 2016 - 13:37

Boa tarde a todos,
 
Estou utilizando o feature Grouping na minha grid e está agrupando corretamente. Porém preciso mudar a cor do GroupHeaderTpl de acordo com um field do record: colorGroupHeader = red, green, etc...
 
Fiz da seguinte forma: Sobrescrevi o groupTpl e o método setupRowData para fazer isso. Gostaria de saber se alguém conhece um jeito simplificado para fazer isso... 
 
Link no Fiddle para ver o exemplo funcionando: https://fiddle.sencha.com/#fiddle/140s
 
Segue meu código abaixo:

 

- O que fiz foi no groupTpl inseri esta propriedade  {[values.styleGroupHeader]} 

 

- E no setupRowData inseri esta linha para recuperar valor que preciso:  rowValues.styleGroupHeader = 'color:'+record.get('colorGroupHeader')+';';
 

 features : {
			ftype:'grouping',
			enableNoGroups: false,
			groupHeaderTpl: 'Situação: {name} ({children.length})',
			groupTpl: [
				'{%',
					'var me = this.groupingFeature;',
					// If grouping is disabled, do not call setupRowData, and do not wrap
					'if (me.disabled) {',
						'values.needsWrap = false;',
					'} else {',
						'me.setupRowData(values.record, values.recordIndex, values);',
						'values.needsWrap = !me.disabled && (values.isFirstRow || values.summaryRecord);',
					'}',
				'%}',
				'<tpl if="needsWrap">',
					'<tr data-boundView="{view.id}" data-recordId="{record.internalId}" data-recordIndex="{[values.isCollapsedGroup ? -1 : values.recordIndex]}"',
						'class="{[values.itemClasses.join(" ")]} ' + Ext.baseCSSPrefix + 'grid-wrap-row<tpl if="!summaryRecord"> ' + Ext.baseCSSPrefix + 'grid-group-row</tpl>">',
						'<td class="' + Ext.baseCSSPrefix + 'group-hd-container" colspan="{columns.length}">',
							'<tpl if="isFirstRow">',
								'{%',
									// Group title is visible if not locking, or we are the locked side, or the locked side has no columns/
									// Use visibility to keep row heights synced without intervention.
									'var groupTitleStyle = (!values.view.lockingPartner || (values.view.ownerCt === values.view.ownerCt.ownerLockable.lockedGrid) || (values.view.lockingPartner.headerCt.getVisibleGridColumns().length === 0)) ? "" : "visibility:hidden";',
								'%}',
								'<div id="{groupId}" class="' + Ext.baseCSSPrefix + 'grid-group-hd {collapsibleCls}" tabIndex="0">',
									
'<div class="' + Ext.baseCSSPrefix + 'grid-group-title" style="{[groupTitleStyle]}{[values.styleGroupHeader]}">',// <<<<<<<<<<<<<< INSERI ESTA PROPRIEDADE {[values.styleGroupHeader]} 

										'{[values.groupHeaderTpl.apply(values.groupInfo, parent) || "&#160;"]}',
									'</div>',
								'</div>',
							'</tpl>',

							// Only output the child rows if  this is *not* a collapsed group
							'<tpl if="summaryRecord || !isCollapsedGroup">',
								'<table class="', Ext.baseCSSPrefix, '{view.id}-table ', Ext.baseCSSPrefix, 'grid-table',
									'<tpl if="summaryRecord"> ', Ext.baseCSSPrefix, 'grid-table-summary</tpl>"',
									'border="0" cellspacing="0" cellpadding="0" style="width:100%">',
									'{[values.view.renderColumnSizer(out)]}',
									// Only output the first row if this is *not* a collapsed group
									'<tpl if="!isCollapsedGroup">',
										'{%',
											'values.itemClasses.length = 0;',
											'this.nextTpl.applyOut(values, out, parent);',
										'%}',
									'</tpl>',
									'<tpl if="summaryRecord">',
										'{%me.outputSummaryRecord(values.summaryRecord, values, out);%}',
									'</tpl>',
								'</table>',
							'</tpl>',
						'</td>',
					'</tr>',
				'<tpl else>',
					'{%this.nextTpl.applyOut(values, out, parent);%}',
				'</tpl>', {
					priority: 200,

					syncRowHeights: function(firstRow, secondRow) {
						firstRow = Ext.fly(firstRow, 'syncDest');
						secondRow = Ext.fly(secondRow, 'sycSrc');
						var owner = this.owner,
							firstHd = firstRow.down(owner.eventSelector, true),
							secondHd,
							firstSummaryRow = firstRow.down(owner.summaryRowSelector, true),
							secondSummaryRow,
							firstHeight, secondHeight;

						// Sync the heights of header elements in each row if they need it.
						if (firstHd && (secondHd = secondRow.down(owner.eventSelector, true))) {
							firstHd.style.height = secondHd.style.height = '';
							if ((firstHeight = firstHd.offsetHeight) > (secondHeight = secondHd.offsetHeight)) {
								Ext.fly(secondHd).setHeight(firstHeight);
							}
							else if (secondHeight > firstHeight) {
								Ext.fly(firstHd).setHeight(secondHeight);
							}
						}

						// Sync the heights of summary row in each row if they need it.
						if (firstSummaryRow && (secondSummaryRow = secondRow.down(owner.summaryRowSelector, true))) {
							firstSummaryRow.style.height = secondSummaryRow.style.height = '';
							if ((firstHeight = firstSummaryRow.offsetHeight) > (secondHeight = secondSummaryRow.offsetHeight)) {
								Ext.fly(secondSummaryRow).setHeight(firstHeight);
							}
							else if (secondHeight > firstHeight) {
								Ext.fly(firstSummaryRow).setHeight(secondHeight);
							}
						}
					},

					syncContent: function(destRow, sourceRow) {
						destRow = Ext.fly(destRow, 'syncDest');
						sourceRow = Ext.fly(sourceRow, 'sycSrc');
						var owner = this.owner,
							destHd = destRow.down(owner.eventSelector, true),
							sourceHd = sourceRow.down(owner.eventSelector, true),
							destSummaryRow = destRow.down(owner.summaryRowSelector, true),
							sourceSummaryRow = sourceRow.down(owner.summaryRowSelector, true);

						// Sync the content of header element.
						if (destHd && sourceHd) {
							Ext.fly(destHd).syncContent(sourceHd);
						}

						// Sync the content of summary row element.
						if (destSummaryRow && sourceSummaryRow) {
							Ext.fly(destSummaryRow).syncContent(sourceSummaryRow);
						}
					}
				}
			],
			setupRowData: function(record, idx, rowValues) {
		        var me = this,
		            data = me.refreshData,
		            groupInfo = me.groupInfo,
		            header = data.header,
		            groupField = data.groupField,
		            store = me.view.dataSource,
		            grouper, groupName, prev, next;

		        rowValues.isCollapsedGroup = false;
		        rowValues.summaryRecord = null;

		        if (data.doGrouping) {
		            grouper = me.view.store.groupers.first();

		            // This is a placeholder record which represents a whole collapsed group
		            // It is a special case.
		            if (record.children) {
		                groupName = grouper.getGroupString(record.children[0]);

		                rowValues.isFirstRow = rowValues.isLastRow = true;
		                rowValues.itemClasses.push(me.hdCollapsedCls);
		                rowValues.isCollapsedGroup = true;
		                rowValues.groupInfo = groupInfo;
		                groupInfo.groupField = groupField;
		                groupInfo.name = groupName;
		                groupInfo.groupValue = record.children[0].get(groupField);
		                groupInfo.columnName = header ? header.text : groupField;
		                rowValues.collapsibleCls = me.collapsible ? me.collapsibleCls : me.hdNotCollapsibleCls;
		                rowValues.groupId = me.createGroupId(groupName);
		                groupInfo.rows = groupInfo.children = record.children;
		                if (me.showSummaryRow) {
		                    rowValues.summaryRecord = data.summaryData[groupName];
		                }
		                return;
		            }

		            groupName = grouper.getGroupString(record);

		            // See if the current record is the last in the group
		            rowValues.isFirstRow = idx === 0;
		            if (!rowValues.isFirstRow) {
		                prev = store.getAt(idx - 1);
		                // If the previous row is of a different group, then we're at the first for a new group
		                if (prev) {
		                    // Must use Model's comparison because Date objects are never equal
		                    rowValues.isFirstRow = !prev.isEqual(grouper.getGroupString(prev), groupName);
		                }
		            }

		            // See if the current record is the last in the group
		            rowValues.isLastRow = idx == store.getTotalCount() - 1;
		            if (!rowValues.isLastRow) {
		                next = store.getAt(idx + 1);
		                if (next) {
		                    // Must use Model's comparison because Date objects are never equal
		                    rowValues.isLastRow = !next.isEqual(grouper.getGroupString(next), groupName);
		                }
		            }

		            if (rowValues.isFirstRow) {
		                groupInfo.groupField = groupField;
		                groupInfo.name = groupName;
		                groupInfo.groupValue = record.get(groupField);
		                groupInfo.columnName = header ? header.text : groupField;
		                rowValues.collapsibleCls = me.collapsible ? me.collapsibleCls : me.hdNotCollapsibleCls;
		                rowValues.groupId = me.createGroupId(groupName);
		                rowValues.styleGroupHeader = 'color:'+record.get('colorGroupHeader')+';'; // <<<<<<<<<<<<< ADICIONEI ESTA LINHA

		                if (!me.isExpanded(groupName)) {
		                    rowValues.itemClasses.push(me.hdCollapsedCls);
		                    rowValues.isCollapsedGroup = true;
		                }

		                // We only get passed a GroupStore if the store is not buffered
		                if (store.buffered) {
		                    groupInfo.rows = groupInfo.children = [];
		                } else {
		                    groupInfo.rows = groupInfo.children = me.getRecordGroup(record).children;
		                }
		                rowValues.groupInfo = groupInfo;
		            }

		            if (rowValues.isLastRow) {
		                // Add the group's summary record to the last record in the group
		                if (me.showSummaryRow) {
		                    rowValues.summaryRecord = data.summaryData[groupName];
		                }
		            }
		        }
		    }
		},

:)  


ratamiette

#2 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 839 posts
  • LocationGoiânia - GO

Postado 18 January 2016 - 15:56

Olá Rah!

 

Se for usar isso em vários lugares, talvez seria legal você fazer um override no feature e implementar um método template chamado por exemplo getGroupingClass dai não precisará sobrescrever tova vez esses métodos gigantes, todo vez que quiser modificar a classe do header do agrupamento vc implementaria esse método na config do feature e retorna a string com o nome da classe css

ficando assim:

getGroupingClass: function(record, idx, rowValues) {
 if(record.get('qual_cor_do_record')){
    return "green-background";
 }

}

Essa idea pode ser estuda no método getRowClass das views da grid.

 

Inspirações

http://docs.sencha.c...hod-getRowClass

http://docs.sencha.c....html#renderRow

 

Abraços


  • ratamiette curtiu isso

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

 

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


#3 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 18 January 2016 - 16:22

Oii Wemerson,

 

Obrigada pela resposta!

 

Acredito que vou utilizar somente em 1 lugar mesmo, é bem específico... Mas se futuramente eu precisar usar em outro lugar, farei um override no feature como você disse. 

 

Porém agora me surgiu uma dúvida de como ficaria isso.

 

Eu faria o override do método setupRowData e do groupTpl como fiz acima? Ou você tem alguma outra solução? caso sim, onde eu inseri esta linha no setupRowData: 

rowValues.styleGroupHeader = 'color:'+record.get('colorGroupHeader')+';'; 

 Terei que atribuir ao rowValues.styleGroupHeader  o retorno da funcao getGroupingClass definida na config da feature, certo? É mais ou menos essa idéia? 

 

 

* Obs: Eu somente altero a cor da 1º row da grid (campo que é feito o agrupamento), que é o groupHeaderTpl. Desta forma como você disse, ele não vai tentar alterar de todas as rows da grid né?

 

 

Abçs  ;)


ratamiette

#4 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 839 posts
  • LocationGoiânia - GO

Postado 18 January 2016 - 18:34   Melhor Resposta

Isso mesmo Rapha, fiz um fork do seu fiddle e implementei o override . agora ficará fácil brincar com o estilo do group com apenas um método.

 

Não mudou muito comparando sua implementação, mas agora ficará mais simples implementar nas próximas grids.

ao invés de usar style mudei para class css pra ficar mais profissa.(veja o arquivo style.css no fiddle)

 

saca só como ficou. 

 

https://fiddle.sencha.com/#fiddle/141g

 

espero que ajude. abraços


  • Legolas e ratamiette curtiram isso

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

 

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


#5 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 18 January 2016 - 18:50

Era isso mesmo que estava imaginando... Obrigada por demonstrar no Fiddle!

 

Com certeza vai ajudar e muito!

 

:D Obrigadaaaaaa

 


  • Wemerson Januario curtiu isso
ratamiette

#6 ratamiette

ratamiette

    Member Avançado

  • Membros
  • PipPipPip
  • 73 posts

Postado 20 January 2016 - 09:18

Precisei fazer um update no Fiddle. Então caso alguém precise...

 

Adicionei este código abaixo na linha 103. Estava acontecendo o seguinte: quando clicava pra fechar o group (collapse), ele ficava sem a classe, pois quando isCollapsedGroup = true, o field colorGroupHeader do record é vazio. Então pego este field do primeiro children do group.

if (me.getGroupingCls) {
    rowValues.groupingCls = record.children[0].get('colorGroupHeader');
}

Segue o link com a correção: https://fiddle.sencha.com/#fiddle/140s

 

 

Até mais!


  • Wemerson Januario curtiu isso
ratamiette




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

0 membros, 0 visitantes, 0 membros anônimos