1 O painel de grade mais fácil
O painel de grade é uma das partes principais do ExtJS, e os dados podem ser exibidos, classificados, agrupados e editados através do painel da grade. O modelo e a loja são o núcleo dos dados de processamento do painel da grade, e cada painel de grade deve configurar o modelo e a loja. Para criar um painel de grade, você deve primeiro definir o modelo. O modelo inclui todos os campos que o painel de grade precisa exibir, o que equivale a uma coleção de campos de tabela no banco de dados. A loja pode ser considerada como uma coleção de uma linha de dados ou uma coleção de instâncias modelo. Cada loja contém uma ou mais instâncias de modelo, e os dados exibidos pelo painel da grade são armazenados na loja. O painel de grade obtém dados através da loja e os exibe, enquanto a loja lê e salva dados através do proxy.
Abaixo está um painel de grade para exibir as informações básicas do usuário, incluindo nome de usuário, email, número de telefone celular (nome, email, telefone) e primeiro crie um modelo de usuário (modelo de usuário).
Ext.Define ('Usuário', {Extend: 'Ext.Data.model', campos: ['nome', 'email', 'telefone']});Em seguida, crie uma loja, que é uma coleção de usuários, incluindo várias instâncias de usuário.
var userStore = ext.create ('ext.data.store', {modelo: 'user', // Dados do modelo de usuário acabamos de criar: [{name: 'lisa', e-mail: '[email protected]', telefone: '555-111-1224'}, {Nome: 'Bart', e-mail: 'Bart@ {nome: 'Homer', e-mail: '[email protected]', telefone: '555-222-1244'}, {name: 'marge', e-mail: '[email protected]', telefone: '555-222-1254'}]});Depois que o modelo e a loja são criados, você pode criar um painel de grade.
Ext.Create ('Ext.Grid.Panel', {rendermo: Ext.getBody (), Store: UserStore, // Liga a largura da loja: 400, altura: 200, título: 'Usuários do aplicativo', colunas: [{text: 'Nome', largura: 100, classificável: false, falsível: false, dataInDex: 'Nome', 'Width: 100, a classificação: false, falsa: falsa, dataIrd:' Model}, {text: 'Endereço de email', largura: 150, DataInDex: 'email', oculto: true}, {text: 'número de telefone', flex: 1, DataIndEx: 'telefone'}]});O último painel da grade do usuário é mostrado na figura.
2 agrupamento de dados do painel de grade (agrupamento)
Enquanto a propriedade Groupfield estiver definida na loja, os dados exibidos pelo painel da grade podem ser agrupados. Suponha que a empresa tenha muitos funcionários e precise agrupar os funcionários da empresa por departamento no painel de grade. Primeiro, defina a propriedade Groupfield para o departamento na loja.
Ext.create ('ext.data.store', {modelo: 'funcionário', dados: ..., groupfield: 'departamento' // Defina dados agrupados pelo departamento});Em seguida, adicione o recurso de agrupamento ao painel da grade para obter efeito de exibição de agrupamento.
Ext.Create ('Ext.Grid.Panel', {... Recursos: [{ftype: 'Grouping'}]});O efeito de exibição do grupo é mostrado na figura abaixo. Clique aqui para visualizar o código de exibição do grupo oficial.
Exibição de paginação em painel de 3 grade
Quando há mais dados e mais páginas a serem exibidos, os dados precisam ser exibidos no Paging. O painel da grade pode realizar a exibição da paginação através de dois métodos: barra de ferramentas de paginação e roller de paginação. A barra de ferramentas de paginação possui os botões da página/próxima página anterior. A Paging Scroller carrega dinamicamente os dados quando o painel da grade rola na parte inferior.
Para implementar a exibição de paginação, você deve primeiro definir a loja para apoiar a paginação. Defina o PageSize na loja. O PageSize padrão é 25. Defina o número total de dados no leitor TotalProperty e as paginas do plug -in de paginação de acordo com PageSize e TotalProperty. O código a seguir é definido como 4 e a TotalProperty é obtida a partir dos dados JSON retornados.
Ext.Create ('Ext.Data.Store', {Model: 'User', Autoload: true, Pagesize: 4, // Defina o número de dados exibidos por proxy de página: {Tipo: 'Ajax', Url: 'Data/Users.json', Reader: {Type: 'JSON', 'ROOT:' Users ',', // Users.json ', leitor: {type:' Json ', root:' usuários ',', // Users.json ', leitor: {type:' Json ', root:' usuários ', // Atributo relacionado ao JSON: 'Total' // Total Data Quantity}}});Suponha que o formato de dados JSON seja o seguinte
{ "success": true, "total": 12, "users": [ { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" }, { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" }, { "name": "Home", "E-mail": "[email protected]", "telefone": "555-222-1244"}, {"nome": "marge", "email": "[email protected]", "telefone": "555-222-1254"}]}} "A paginação da loja foi configurada. A função de paginação da barra de ferramentas de paginação é implementada no painel da grade.
Ext.Create ('Ext.Grid.Panel', {Store: UserStore, colunas: ..., DockedItems: [{xtype: 'PAGINGTOOLBAR', // Adicione a barra de ferramentas de paginação).O efeito de paginação da barra de ferramentas de paginação é mostrado na figura abaixo. Clique aqui para visualizar o código de função oficial da barra de ferramentas de paginação de paginação.
A implementação de paginação do rolador de paginação é relativamente simples. Basta definir o código a seguir no painel da grade. Clique aqui para visualizar o código de função oficial do Paging Scroller Paging.
Ext.Create ('Ext.Grid.Panel', {// Use o plug -in de paginação de Paging Scroller verticalScroller: 'PAGINGGRIDSCROLLER', // não redefinir a barra de rolagem quando a visualização é refrescada com invalidatescrolleRonsEnção: /////////0) quando a exibição).Painel de grade de 4 adicione a caixa de seleção
Basta definir a propriedade SelModel do painel de grade como ext.Selection.CheckBoxModel, clique aqui para visualizar o exemplo oficial de código.
Ext.Create ('Ext.Grid.Panel', {SelModel: Ext.Create ('Ext.Selection.CheckBoxModel'), // Defina o modo de seleção do painel de grade para armazenamento de caixa de seleção: UserSerStore, colunas: ...});5 exemplos abrangentes
var grid = new ext.grid.gridPanel ({store // fontes de dados cm //ext.grid.columnmodel colunas // As funções são as mesmas que ext.grid.columnmodel. apenas tem um cm autlowidth: border de título de título de título: thallllinespats: renderO // Com efeito de animação (o padrão é verdadeiro, quando a classe Ext.fx está disponível). displayInfo:true, //Document source displayInfo:true, //DocumentationMsg:'Show the records from {0} to {1}, a total of {2}', emptyMsg:'No record' }), tbar:[{ text:'Query', icon:'/trade/images/delete.gif', cls:'x-btn-text-icon', manipulador: function () {win.show ();}}}) // ********************************************* Ext.Grid.rowNumberer (), {cabeçalho: "ID do cliente", largura: 50, classificável: true, DataInDex: 'memid'}, {cabeçalho: "Nome do cliente", largura: 75, classable: true, datainDex: 'Memname'}, {sexo: 'Secret No.', width 50, dataDex: DataNex: 'MEMNAME'}, {Sex: 'Secret No.', width 50, DataNdex: DataNex: 'MEMNAME'}, {sexo ',' Secret No. ', Width 50, DataNd: renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}} {header: 'Tracking Number', width:150, dataIndex:'code'}, {header: 'Date', width:150, DataInndex: 'kd_time'}]); /*********************************************** // var modificado = storeedit.modified.slice (0); // ext.each (modificado, função (m) {alert (m.data.id); // os dados estão em m.data e id é o nome do campo}) // Obtenha dados da grade var selModel = grid.getSelectionModel (); Obtenha o modo de seleção var registro; if (! Selmodel.hasselection ()) {ext.msg.alert ('aviso', 'Selecione a linha a ser modificada!'); retornar; } Selmodel.getSelection (). Length; // número de linhas selecionadas registro = selmodel.getSelected (); // Obtenha dados de linhas selecionadas(1) Obtenha dados:
Linha única
id = registro.get ('id');ou
id = registro.data.id;
Várias linhas
Registre [i] .get ('ddd')(2) Excluir dados:
var obj = grid.getSelectionModel (). getSelected (); store.remove (obj); grid.getView (). refresh ();
(3) Consulta
store.BaseParams ['memid'] = fb.form.findfield ('memid'). getValue (); store.BaseParams ['start'] = 0; store.load ();(4) Adicione uma linha:
EXT traz um plugin
Requer arquivo lineexpander.js
var expand = new ext.ux.grid.rowexpander ({tpl: new ext.template ('<p> {endereço} </p>')});Adicione expanda as colunas da grade,
E adicione plugins: expanda o atributo de grade