Archive for novembro, 2009

« Older Entries

Grid Panel e JsonStore – ExtJS


19 nov

Tags: ,
Posted in Ext JS | No Comments »

Abaixo um exemplo simples de GridPanel do ExtJS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<code>
var MyGrid = new Ext.grid.GridPanel({
    title:"Exemplo de Grid",
    width:400,
    height:250,
    columns:[
        {
            header:"Coluna A",
            sortable:true,
            resizable:true,
            width:100,
            dataIndex:"string"
        },
        {
            header:"Coluna B",
            sortable:true,
            resizable:true,
            width:100,
            dataIndex:"string"
        },
        {
            header:"Coluna C",
            sortable:true,
            resizable:true,
            width:100,
            dataIndex:"string"
        }
    ]
});
</code>
<pre>Para que a grid acima possa receber dados, basta criar um Store, JsonStore por exemplo, caso crregue via ajax os dados e no formato JSON, que é o recomendado. Depois adicione o atributo "store" no GridPanel e atribua a variavel do Store criado.
Veja o exemplo de um JsonStore logo abaixo:
<pre><code>
var store = new Ext.data.JsonStore({
url: 'get-images.php', //Url do arquivo que será chamado
root: 'images', //Nó principal para o objeto iniciar a leitura
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}] //Campos que serão carregados do JSON
});
//Defina o método para carregar o JsonStore criado acima
store.load();
//Caso precise recarregar use: store.reload();
//Caso precise executar algo após carregar ou recarregar use o atributo "callback", ex: store.load({callback:function(){ alert('Ok, carregado!'); }});
</code>
O arquivo PHP chamado (ou linguagem que bem entender) dever retornar os dados no seguinte formato: { images: [ {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)}, {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)} ] } Lembrando que o primeiro nó é o Root ou nó pricipal. Dúvidas, postem... =D

Trabalhando com Store – ExtJS


18 nov

Posted in Ext JS | No Comments »

Abaixo criamos um data Record informando os campos do Store, depois criamos um JsonReader para tornar o json record legível para o store e por fim convertemos em data Store.

Após isso usamos o método add para adicionar records ou linhas ao store. Vejam o exemplo abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<code>
&lt;script type="text/javascript"&gt;
Ext.onReady(function(){
var Record = Ext.data.Record.create([
{name: 'ProductTypeName'},
{name: 'ProductName'},
{name: 'PriceEconomic'},
{name: 'Quantity'}
]);
var JsonReader = new Ext.data.JsonReader({root: 'Items'},[Record]);
var Store = new Ext.data.Store({reader: JsonReader});
Ext.get('btn').on('click',function(){
for(x=0;x&lt;10;x++){
Store.add(new Record({
ProductTypeName: 'A',
ProductName: 'B',
PriceEconomic: 'C',
Quantity: new Date()
}));
}
var data = Store;
alert(data);
});
});
&lt;/script&gt;
&lt;button id="btn"&gt;+&lt;/button&gt;
</code>

ExtJS – Exemplo de Janela para login


17 nov

Tags: , , ,
Posted in Ext JS | 2 Comments »

Exemplo de uma simples tela de login em ExtJS, usando o submit em ajax e trantando o erro se o mesmo acontecer.

Login Simples

Login Simples


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<code>
Ext.onReady(function() {
var windowLoginSimples = new Ext.Window({
title: "Login Simples",
width: 350,
height: 140,
items: [{
xtype: "form",
            id:"windowLoginSimples_form",
labelWidth: 100,
labelAlign: "left",
layout: "form",
autoHeight: true,
padding: "10",
defaults: {
xtype: "textfield",
anchor: "100%",
                allowBlank:false
},
items: [{
fieldLabel: "Login",
                name:"login"
},
{
fieldLabel: "Senha",
inputType: "password",
                name:"senha"
}]
}],
        buttons:[{
            text:'Cancelar',
            handler:function(){
                windowLoginSimples.close();    //Linha responsável por fechar a janela e cancelar o login.
            }
        },{
            text:'Ok',
            handler:function(){
                if(Ext.getCmp('windowLoginSimples_form').getForm().isValid()){ //Verificando se o form é válido
                    Ext.getCmp('windowLoginSimples_form').getForm().submit({
                        url: 'enviar.php',
                        success: function(form, action) {
                       //Irá executar esta função quando o success for igual a: true
                       Ext.Msg.alert('Resposta', action.result.msg);//Mensagem personalizada da página "enviar.php"
                        },
                        failure: function(form, action) {
                            //Irá executar esta função quando o success for igual a: false
                            switch (action.failureType) {
                                case Ext.form.Action.CLIENT_INVALID:
                                    Ext.Msg.alert('Falha', 'Formulario enviado com dados invalidos');
                                    break;
                                case Ext.form.Action.CONNECT_FAILURE:
                                    Ext.Msg.alert('Falha', 'Falha na comunicacao');
                                    break;
                                case Ext.form.Action.SERVER_INVALID:
                               Ext.Msg.alert('Falha', action.result.msg);//Erro personalizado na página "enviar.php"
                       }
                        }
                    });
                }
            }
        }]
});
windowLoginSimples.show();
});
</code>
« Older Entries

JotaQuery

O mundo do Javascript