Introdução aos recursos das tabelas em extjs
A tabela é definida pela classe ext.grid.gridpanel, herdada do ext.Panel, e o xtype é grade
As informações da coluna da tabela são definidas por ext.grid.columnmodel
O armazenamento de dados da tabela é definido pelo ext.data.store. De acordo com os diferentes dados analíticos, o armazenamento de dados pode ser dividido nos seguintes tipos:
JSONSTORE, SimpleStore, GroupingStore…
O processo básico de escrita de uma tabela:
1. Crie um modelo de coluna de tabela
var cm = new Ext.Grid.ColumnModel ({{Header: 'Role', DataInDex: 'Role'}, {Header: 'Level', DataIndEx: 'Grade'}, {Header: 'Create Date', DataIndex: 'Created', Type: 'Date', RenderRer: Ext.util. dados});2. Crie uma matriz de dados
var dados = [['soldado', '7', '2011-07-2412: 34: 56'], ['general', '10', '2011-07-2412: 34: 56'],]];
3. Crie um armazenamento de objetos de armazenamento de dados, que contém duas partes: proxy, a maneira de obter dados; leitor, a maneira de analisar dados
O mapeamento do ArrayReader é usado para definir a ordem das colunas
var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'role', mapping: 1}, {name: 'grade', mapping: 0} {name: 'createDate', mapping: 2, type:'date', DateFormat: 'ym-dh: i: s'} // Crie coluna de data e formato de exibição])}); store.load ();4. Crie um GridPanel, monte o ColumnModel e mantenha
var grid = new Ext.Grid.GridPanel ({rendermo: 'grade', armazenamento: armazenamento, cm: cm});Além disso, você pode usar o ScriptTagProxy para obter dados remotos, como mostrado abaixo
var store = new ext.data.store ({proxy: new ext.data.scriptTagProxy ({url: 'http: // ...'}), leitor: new ext.data.arrayReader ({{}, [{name: 'role', maping: 1}, {name: 'name:' '' ',', ',', ',', ',', 1}, names: '', ',', ',', ',', ',', 1}, names: '', ',', ',', ',', ',' Data). "Role", Direção: "ASC"} // Defina a sequência de classificação padrão, ASC/DEC});Propriedades comuns de tabelas
var grid = new ext.grid.gridPanel ({enableColumnMove: false, // As colunas de arrastar e soltar são proibidas para serem ativadas que são ativadas: False, // Desabilitar para alterar a largura da fita de coluna: Funcionar a fita: / ///skM Crossing LOADMASK: // Máscara e solicitar a função e a função quando a função da coluna quando a máscara de crossing da coluna e a máscara de cross: // máscara e a função da coluna quando a máscara de crossing: // máscara e a máscara de fita: var cm = new Ext.Grid.ColumnModel ({{Header: 'Role', DataInDex: 'Role', Largura: 90, classificável: true}, // largura Define a largura da coluna, o padrão de odansh); Ext.Grid.GridPanel ({rendermo: 'grade', armazenamento: armazenar, cm: cm viewConfig: {// Deixe cada coluna preencher automaticamente o formulário Forcefit: true} autoexpandColumn: 'Grade' // estender automaticamente a coluna, o id de coluna é definido na colunaModel});Renderizar mesas e definir estilos especiais para mesas
Basta adicionar um atributo renderizador ao CM e adicionar uma função personalizada para renderizar o estilo dos parâmetros passados (passados automaticamente por ext), ou seja, montar os eventos de resposta HTML, CSS ou JS correspondentes antes de retornar o valor.
função rendersex (value) {if (value == 'masculino') {return } else {return "<span style = 'cor: vermelho;'> feminino </span> <img src = 'imagens/icon_female.png'/>"; }} var cm = new Ext.grid.columnmodel ([{cabeçalho: 'id', dataInDex: 'id'}, {cabeçalho: 'name', dataInDex: 'name'}, {header: 'sexo', dataindex: 'sexo', render ': corredor'; ['2','Kate','female']]];var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'sex'} ])});store.load();var grid = new ext.grid.gridPanel ({AutoHeight: true, rendermo: 'grade', armazenamento: armazenamento, cm: cm});Exibir automaticamente os números de linha, basta criar um ROWNUMERER ao criar CM
var cm = new Ext.Grid.ColumnModel ([new Ext.Grid.rowNumberer (), // mostra números de linha {cabeçalho: 'id', dataindex: 'id'}, {header: 'name', dataindex: 'name'}, {header: 'sexo', datandex: 'sexo:', ',' name '}, {the header:' sexo ', datandex:' sexo: ',', 'name'}, {the header: 'sexo', datandex: 'sexo:';Excluir colunas
store.remove (store.getat (i));
Atualize a tabela
grid.View.Refresh ();
Adicione uma caixa de seleção para uma tabela
Precisa usar o CheckBoxSelectionModel
Seleção model sm deve ser colocado em cm e tabela quando usado
var sm = new Ext.Grid.CheckBoxSelectionModel (); var cm = new Ext.Grid.ColumnModel ([new Ext.Grid.Rownumberer (), SM, {Header: 'Number', DataIndEx: 'Id'}, {Header: 'Name', DatainDex: 'Name'} [ ['2', 'name2']]]; var store = new ext.data.store ({proxy: new ext.data.memoryproxy (dados), leitor: new ext.data.arrayReader ({}, [{name: 'id'}, {name: 'name'}])}); Ext.Grid.GridPanel ({AutoHeight: true, rendermo: 'grade', loja: armazenamento, cm: cm, sm: sm});Apenas uma linha é selecionada através da configuração do Model de Modos lúcicos:
var grid = new Ext.Grid.GridPanel ({AutoHeight: true, renderto: 'grade', armazenamento: armazenamento, cm: cm, sm: new ext.grid.rowselectionModel ({singleSelect: true})});Use o modelo selecionado para obter dados
grid.on ('clique', function () {var selections = grid.getSelectionModel (). getSelections (); para (var i = 0; i <seleção.Length; i ++) {var registro = seleções [i]; ext.msg.alert (registro.get ("id););}});Visualização da tabela
A partir da idéia de MVC, a tabela controla:
* Ext.data.store pode ser considerado um modelo
* Ext.Grid.GridPanel pode ser considerado um controlador
* Ext.Grid.GridView pode ser visto como uma visualização
* Geralmente, o GridView é gerado automaticamente pelo GridPanel. Se você deseja definir as propriedades do GridView, poderá obter a instância de visualização através do getView () do ext.Grid.GridPanel.
Ext.get ('Button1'). On ('Clique', function () {grid.getView (). Scrolltotop (); grid.getview (). FocusCell (0, 0); var célLET = grid.getView ().Use o ViewConfig do GridPanel para definir os parâmetros de inicialização do GridView ao criar uma tabela
var grid = new Ext.grid.GridPanel({ height: 100, width: 400, renderTo: 'grid', store: new Ext.data.Store({ autoLoad: true, proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, meta) }), columns: meta, ViewConfig: {columnStext: 'Show Column', // Defina o menu suspenso Prompt de texto ScrollOffSet: 30, // Defina a largura reservada da barra de rolagem no sTorScText certo: 'AscText', // Defina o menu suspenso Diretor Prompt SortDescText: 'Order', // Definir o menu suspenso Menu True PassadoAdicione uma barra de ferramentas de paginação a uma tabela
* Você pode usar a propriedade BBAR do GridPanel e criar o objeto de barra de ferramentas Ext.PagingToolBar
* Observe que, se a barra de ferramentas de paginação estiver configurada, store.load () deverá ser executado após a construção da tabela.
var grid = new Ext.Grid.GridPanel ({rendermo: 'grade', AutoHeight: true, Store: Store: CM: CM, BBAR: new Ext.PagingToolBar (} {2} ', emappymsg: "sem registro" // informações exibidas quando não houver dados})}); store.load ();Obtenha dados de paginação do script de fundo
Use httpproxy para passar a solicitação, obter os dados JSON do servidor e entregar -o ao JSONERERDER PARA ANÁLISE
var cm = new Ext.grid.ColumnModel([ {header:'number',dataIndex:'id'}, {header:'name',dataIndex:'name'}]);var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'page.jsp'}), reader: new Ext.data.jsonReader ({totalProperty: 'TotalProperty', root: 'root'}, [{name: 'id'}, {name: 'name'}])}); var grid = new ext.grid.gridPanel ({renderro: 'Grid', autocomempere -se: Armazene, CM: CM, BBAR: new Ext.PagingToolBar ({Pagesize: 10, Store: Store: DisplayInfo: true, displaymsg: 'mostre o {0} a {1} registros/total {2}', emappymsg: "no registro"})}); store.load ({params: {start: 0, limite: 10}});Se você deseja que a barra de ferramentas de paginação apareça na parte superior da tabela, você pode adicionar a barra de ferramentas usando as configurações da propriedade GridPanel TBAR.
Deixe o ExtJS pagar os dados retornados
* Você precisa apresentar o arquivo PagingMemoryProxy.js no diretório Exemplos/Locais na página
* Use PagingMemoryProxy para configurar o proxy
var store = new ext.data.store ({proxy: new ext.data.pagingMemoryProxy (dados), leitor: new ext.data.arrayReader ({}, [{name: 'id'}, {name: 'name' {{name: 'descn'}])}); store.load ({params: {start: 0, limite: 3}});Uso de editorGrid com controle de tabela editável
Etapas para fazer um editor -grid simples:
1. Defina a coluna columnmodel e adicione o atributo do editor a ele
var cm = new Ext.Grid.ColumnModel ([{cabeçalho: 'número', DataInDex: 'ID', editor: new Ext.grid.grideditor (new Ext.form.textfield ({allowBlank: false // não-input Value em Textfield não é permitido})},, {{name '', '', Datain, Datand em texto: Ext.form.textfield ({allowblank: false}))}]);2. Prepare uma matriz
var dados = [['1', 'Jason'], ['2', 'Jay']];
3. Crie ext.data.store, defina proxy de memória e defina o ArrayReader para analisar matrizes
var store = new ext.data.store ({proxy: new ext.data.memoryproxy (dados), leitor: new ext.data.arrayReader ({}, [{name: 'id'}, {name: 'name'})});4. Carregue dados e crie o editorGridPanel
store.Load (); var grid = new Ext.Grid.editorGridPanel ({AutoHeight: true, renderto: 'grade', armazenamento: armazenamento, cm: cm});Adicione e exclua dados para tabelas editáveis
1. Crie um conjunto de registros usando o Record Create Method MyRecord. MyRecord é equivalente a uma classe
var myRecord = ext.data.record.create ([{name: 'id', tipo: 'string'}, {name: 'name', type: 'string'}]); store.load ();2. Crie o painel EditorGridPanel e crie ext.toolbar na propriedade TBAR
var grid = new Ext.Grid.editorGridPanel ({AutoHeight: true, rendermo: 'grade', armazenar: armazenar, cm: cm, tBar: new ext.toolbar (['-', {//- significa text de separador de menu: 'add a linha', handler: 'function () {varp p = {//- significa myrc myrc ('; Grid.Stopediting (); 'Confirme para excluir?', FUNÇÃO (BTN) {if (BTN == 'Sim') {var sm = grid.getSelectionModel (); '-'])});Salvar resultados modificados para tabelas editáveis
Com base no exemplo acima, adicione um botão Salvar
texto: 'salvar', manipulador: function () {var m = store.modified.slice (0); // Obtenha os dados modificados no armazenamento (var i = 0; i <M.LenLength; i ++) {// Verifique se as informações da tabela estão corretas e se contém espaços var registro = m [i]; var fields = registro.fields.keys; for (var j = 0; j <fields.length; j ++) {var name = campos [j]; var value = registro.data [nome]; var colindex = cm.findcolumnIndex (nome); var rowindex = store.indexofid (registro.id); VAR Editor = CM.GetCellEditor (Colindex) .Field; if (! editor.validateValue (valor)) {ext.msg.alert ('tip', 'verifique se os dados inseridos estão corretos!', function () {grid.startediting (rowIndex, colindex);}); retornar; }}} var jsonArray = []; Ext.each (m, function (item) {jsonArray.push (item.data); // coloque os dados modificados em jsonArray}); Ext.lib.ajax.request (// use a solicitação AJAX para enviar ao plano de fundo Ext.msg.alert ("erro", "o servidor de dados salva!");Além disso, a loja pode definir a propriedade PrunemodifiedRecords: true. Dessa forma, a loja limpará automaticamente a tag modificada sempre que remove ou carrega operações, o que pode evitar o fenômeno de trazer todas as informações modificadas na próxima vez que for enviada.
Limitar o tipo de dados de entrada de tabela
Numberfield
{cabeçalho: 'id', dataInDex: 'id', editor: new Ext.Grid.Grideditor (new ext.form.numberfield ({// limites de campos numéricos que apenas os números podem ser inseridos allowblank: false, alowenegativo: false, // não pode entrar menos signo maxvalue: 10})}}}}ComboBox
var com combodata = [['0', 'java'], ['1', 'Android']]; {cabeçalho: 'ComboBox', DataInDex: 'combo', editor: new Ext.grid.grideditor (new ext.form.comBobox ({store: new Ext.data.simplestore ({fiLe VAPATTEXT: 'Selecione', Modo: 'Local', TriggerAction: 'All', ValueField: 'Value', DisplayField: 'Text', ReadOnly: true})), renderizador: function (value) {retorna combodata [value] [1]; }}DateField
{Header: 'Date', DataInDex: 'Date', Editor: new Ext.Grid.Grideditor (new Ext.form.datefield ({format: 'YM-D', MinValue: '2011-07-24', DisabledDays: [0, 6], Disabledday: 'Selecione a data (Segunda-feira e'})). }}Uso de PropertyGrid
É um componente de formulário avançado mais inteligente desenvolvido com base no editorGrid
var grid = new Ext.Grid.PropertyGrid ({Title: 'PropertyGrid', AutoHeight: true, largura: 400, rendermo: 'grade', viewConfig: {forceFit: true}, flair: {"string": "String", "Date: New Date (Date.Parse ('07/24/24/2011"), ")," String "," Date: }});Como desativar a função de edição do PropertyGrid
Grid.on ('antesDit', function (e) {e.cancel = true; return false;});Obtenha valor de acordo com o nome da tabela
grid.store.getbyId ('jason'). get (valor);Implementar tabelas aninhadas em extjs
Vamos ver o efeito primeiro:
O código é o seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html- ponte content = "text/html; charset = utf-8"/> <title> teste </title> <script type = "text/javascript"> </script> <link rel = "stylesheet" type = "text/csS" href = "lib/extjs/2_2_2_2s/scort/scring/jetsssssssssssssssncs". src = "lib/extjs/2_2/adaptador/ext/ext-bashe.js"> </script> <script type = "text/javascript" src = "lib/extjs/2_2/extl-al-al-debug.js"> </script> <script type = "text/javroscrint" " src = "lib/extjs/2_2/source/loce/ext-lang-zh_cn.js"> </script> <script type = "text/javascript" src = "lib/extjs/plus/rowexpander.js"> </script> <script type = "text/javsscrint"> ["Lugreen", "masculino", 26, ["matemática", 100], ["chinês", 150]]]], ["lisi", "masculino", 25, [["matemática", 100], ["chinês", 150]]], ["zhangsan", "masculino", 27, ["math", 120]], ["chinês", 15888888888, "], [" stay]], ["Zhangsan", "masculino", 27, ["math"/150]]], ["chinês", 168, "]; Ext.Data.SimpleStore ({Fields: ["Nome", "Sex", "Age", "Grade"], Data: testData}); var expander = novo ext.grid.rowexpander ({tpl: new ext.xtemplate ('<div>', '', '</div>') }); expander.on ("Expandir", function (expansor, r, corpo, rowindex) {// Encontre grade window.testele = body; //alert(body.id); if (ext.domquery.select ("div.x-panel-bwrap", corpo) .Length == 0) {// alert ("A" A "A" A "A" ALERT; Ext.Data.SimpleStore ({Fields: ["classe", "DeGrade"], Data: Data}); 'DeGrade', largura: 130, escondido: false, classificável: false, redimensionável: true}]); Autowidth: verdadeiro, AutoHeight: true}); "Gênero", DataIndex: 'Sex', Largura: 130, Ocipível: Falso, Sortível: Falso, Redicável: True}]); plugins: [expansor]});}); </script> <style type = "text/css">#div2 h2 {font-weight: 200; Fonte-tamanho: 12px;}. C1 H2 {font-weight: 200;} </style> </head> <body> <div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>O "rowexpander.js" usado é construído no exemplo oficial do ExtJS.
Há duas dicas a serem observadas ao implementar esta tabela aninhada:
1. A fonte de dados fornecida ao armazenamento de dados na tabela externa representa os dados na área de detalhes na forma de uma matriz aninhada, conforme mostrado no negrito abaixo.
var testData = [["Lugreen", "masculino", 26, ["matemática", 100], ["chinês", 150]]]], ["lisi", "masculino", 25, ["matemática", 100], ["chinês", 150]], ["zhangsan", "masculino", 27, ["math", 120]], ["zhangsan", "masculino", 27, ["math", 120]]], ["zhangsan", "masculino", 27, ["math", 120]], ["zhangsan", "masculino", 27, ["math", 120]], ["zhangsan", "masculino", 27, ["math", 120]], ["zhangsan", "masculino", 27, ["math", 120]]], ["zhangsan", "masculino", 27, ["math", 120],
Use o atributo json do objeto de registro na matriz para obter os dados em detalhes
var dados = r.json [3];
2. Adicione as tabelas aninhadas no evento de expansão de RowExpander.