Hoje vou postar sobre como gerar uma grid com registros agrupados, e botões de ação.
Inicialmente quero frisar que o framework Ext Js é pago, sendo liberado apenas para projetos open source, porem o custo x beneficio dele é muito bom mesmo.
Primeiro baixem o framework no site Sencha.
Uma vez salvo no computador local, vamos instala-lo:
Por motivos de organização eu optei por colocar os .js na pasta Content > Ext, e as imagens em resources > images como mostra na figura abaixo
Abra um projeto de nome de sua preferencia e vamos instalar o framework nele.
<link rel="stylesheet" href="@Url.Content("~/Content/ext/css/ext-all.css")" type="text/css" media="screen" />
<script type="text/javascript" src="@Url.Content("~/Content/ext/js/ext-all.js")"></script>
Aqui existem algumas observações:
Em muitos exemplos pela internet afora eu vejo as pessoas referenciando seus arquivos de forma manual, eu nao vejo isso como certo, porem eu gosto de desenvolver localmente e fazer o deploy de arquivos apenas quando necessario mesmo, entao nesse caso, para poder ter mais produtividade eu uso o "URL.Content" que "descobre" a estrutura de pasta que se encontra e ja a usa de forma correta.
Voltando ao sssunto principal, basta referenciarmos esses dois arquivos que o framework ja estara instalado.
No Mvc, o correto é gerar models "gordas", com todo o processamento entao em uma interface eu criei um content result como se segue:
public ContentResult XmlUsuariosGrupos(string Conf)
{
BancoEntities BD = new BancoEntities();
//reconstruindo o helper para dar o action no link-------------------------------------------------------------------------------
HttpContextWrapper httpContextWrapper = new HttpContextWrapper(System.Web.HttpContext.Current);
UrlHelper urlHelper = new UrlHelper(new RequestContext(httpContextWrapper, RouteTable.Routes.GetRouteData(httpContextWrapper)));
//-------------------------------------------------------------------------------------------------------------------------------
var Listagem = (from usu_grupos in BD.usu_grupos
from usuarios in BD.usuarios
where
usuarios.CodGrupo == usu_grupos.Usu_Gru_Cod &&
usu_grupos.Conf_Codigo == Conf
select new
{
usu_grupos.Usu_Gru_Nome,
usuarios.Nome,
usuarios.Sobrenome,
usuarios.CodUsuario,
usuarios.CodGrupo
});
XElement matches = new XElement("Grupos");
XElement match = null;
XDocument doc = new XDocument(new XDeclaration("1.0", "utf-8", "yes"), matches);
foreach (var item in Listagem)
{
match = new XElement("Agrupamento");
match.Add(new XElement("id", item.CodUsuario));
match.Add(new XElement("Nome", item.Nome + " " + item.Sobrenome));
match.Add(new XElement("Grupo", item.Usu_Gru_Nome));
match.Add(new XElement("Acoes", "<a href='" + urlHelper.Action("EditaDireitosEspeciais", "Iniciais", new { id = item.CodUsuario, CodGrupo = item.CodGrupo } ) + "'>Gerenciar Direitos Especiais</a>"));
matches.Add(match);
}
ContentResult ret = new ContentResult();
ret.ContentType = "text/xml";
ret.Content = doc.ToString();
return ret;
}
Com isso geramos um xml satisfatorio para o Framework, vamos prestar atenção em um detalhe: no contexto de model o helper do action link nao funciona, sendo que é necessário reconstruir o mesmo dentro do ContentResult para o mesmo poder ser utilizado, afinal por mais utilidade que se tenha uma listagem, ela não passa apenas de uma listagem, e as vezes precisamos de botões de ação, para edição de usuarios, CRUDS em geral, etc.
Na nossa view eu coloquei o java da seguinte forma:
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
]);
Ext.onReady(function () {
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'Nome', mapping: 'Nome' },
'Grupo', 'Acoes'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
//inserindo propriedades de agrupamento------------
groupField: 'Grupo',
//-------------------------------------------------
proxy: {
type: 'ajax',
url: "@Url.Content("~/Listagem/_ListaGruposUsuariosXml/")?Conf=@ViewBag.Conf",
reader: {
type: 'xml',
record: 'Agrupamento',
idProperty: 'id'
}
}
});
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Nome do Grupo: {name} ({rows.length} Usuários Cadastrado{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: false,
startCollapsed: true
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ text: "Nome", width: 250, dataIndex: 'Nome', sortable: true },
{ text: "Nome do Grupo de usuários", width: 250, dataIndex: 'Grupo', sortable: true },
{ text: "Ações Possiveis", width: 250, dataIndex: 'Acoes', sortable: false },
],
//funcoes extras---------------------------------------------------------------------
collapsible: true,
animCollapse: true,
iconCls: 'icon-grid',
frame: true,
resizable: true,
title: "Grupos de usuários",
//----------------------------------------------------------------------------------
//aqui começa o agrupamento----------------------------------------------------------
features: [groupingFeature],
//-----------------------------------------------------------------------------------
renderTo: 'Grid',
width: 900,
height: 700
});
});
</script>
Bom primeiramente, devo me desculpar pois eu fiz muito "em cima do exemplo" do site do Ext JS, detesto manter os nomes das variaveis, mas como o proposito aqui é apenas um exemplo entao acabei deixando.
Alguns detalhes merecem um pouco de atenção como a linha:
Ext.Loader.setPath('Ext.ux', '../ux');
Aqui o framework diz onde estao seus outros arquivos de apoio e o motivo que eu deixei a organização dele sem mexer, apenas para melhorar a compreensão.
na linha
url: "@Url.Content("~/Listagem/_ListaGruposUsuariosXml/")?Conf=@ViewBag.Conf",
chamamos o ajax que carregara a grid com o xml de dados, observe o uso do helper Url.Content .
o Xml que eu gerei ficou mais ou menos assim
<Grupos> <Agrupamento> <id>77</id> <Nome>Theo Teste</Nome> <Grupo>Grupo Limitado</Grupo> <Acoes><a href='/Iniciais/EditaDireitos/77?Grupo=139'>Gerenciar Direitos Especiais</a></Acoes> </Agrupamento> </Grupos>
nas linhas
reader: {
type: 'xml',
record: 'Agrupamento',
idProperty: 'id'
}
Indicamos que sera enviado um xml, ja que o framework suporta outros formatos, informamos que as linhas estao na chave Agrupamento, e o Id de cada registro é o id
nas linhas:
Ext.onReady(function () {
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'Nome', mapping: 'Nome' },
'Grupo', 'Acoes'
]
Definimos o nome das colunas, preste atenção que somente a primeira precisa ser mapeada, sendo que as outras ja vem na sequencia apenas com os nomes
nas linhas:
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Nome do Grupo: {name} ({rows.length} Usuários Cadastrados{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: false,
startCollapsed: true
});
criamos a grid com o agrupamento sendo que antes do nome do agrupamento vira a string "Nome do Grupo:" e o proprio framework faz a conta de linhas em
({rows.length} Usuários Cadastrados{[values.rows.length > 1 ? "s" : ""]})
para saber quantos usuarios estao cadastrados nesse agrupamento.
na linha:
startCollapsed: true
diz que os registros ja vem "fechados" mostrando apenas os agrupamentos.
nas linhas:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ text: "Nome", width: 250, dataIndex: 'Nome', sortable: true },
{ text: "Nome do Grupo de usuários", width: 250, dataIndex: 'Grupo', sortable: true },
{ text: "Ações Possiveis", width: 250, dataIndex: 'Acoes', sortable: false },
],
Informamos o framework que a chave "Nome" no Xml linka com a Coluna "Nome", sua largura em px, e se ele pode ser "organizavel" ou seja se vc pode clicar na coluna e a grid se rearranjar em ordem crescente ou decrescente com base na coluna selecionada, as outras linhas seguem o mesmo padrão.
nas linhas:
//funcoes extras---------------------------------------------------------------------
collapsible: true,
animCollapse: true,
iconCls: 'icon-grid',
frame: true,
resizable: true,
title: "Grupos de usuários",
//----------------------------------------------------------------------------------
temos as funções extras da grid, autoexplicaveis.
na linha:
//aqui começa o agrupamento----------------------------------------------------------
features: [groupingFeature],
//-----------------------------------------------------------------------------------
aplicamos as preferencias ja citadas na grid
nas linhas:
renderTo: 'Grid',
width: 900,
height: 700
informamos que o elemento que recebera a grid tem o Id de "Grid", sua largura e altura, no meu caso foi uma div com id de "Grid"
espero ter sido de utilidade, e em caso de duvidas ou afins, por favor me enviem um email ou comentem a duvida porque eu ficarei feliz em ajudar...
Nenhum comentário:
Postar um comentário