Archive for the ‘Ext JS’ Category

« Older Entries
Newer Entries »

Exemplo de window com layout HBox


01 fev

Tags: ,
Posted in Ext JS | No Comments »

O que é o layout Hbox ou Vbox. Simples! O layout Hbox (Caixa Horizontal) divide o layout proporcionamente em caixas horizontais. Ou seja, paineis do ExtJs ficarão um do lado do outro preenchendo todo o Objeto pai, no caso da imagem abaixo uma Window (janela). Já o Vbox tem o mesmo objetivo porém Verticalmente… ou seja, os painéis ficarão um acima do outro.

Veja abaixo um exemplo de HBox:

ExtJS

ExtJS

Script da janela acima:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<code>
var MyWindow=new Ext.Window({
    title:"Exemplo de Layout HBox",
    width:600,
    height:250,
    layout:"hbox",
    items:[
        {
            xtype:"panel",
            title:"Flex 1",
            flex:1,
            autoHeight:true,
            html:"Jotaquery o maior portal de javascript do Brasil."
        },
        {
            xtype:"panel",
            title:"Flex 1",
            flex:1,
            autoHeight:true,
            html:"Jotaquery o maior portal de javascript do Brasil."
        }
    ]
});
MyWindow.show();</code>

Veja abaixo um exemplo de VBox:

ExtJS

ExtJS

1
<code>Script da janela acima:</code>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<code>
var MyWindow=new Ext.Window({
    title:"Exemplo de Layout VBox",
    width:600,
    height:250,
    layout:"vbox",
    items:[
        {
            xtype:"panel",
            title:"Flex 1",
            flex:1,
            autoHeight:false,
            html:"Jotaquery o maior portal de javascript do Brasil.",
            autoWidth:false
        },
        {
            xtype:"panel",
            title:"Flex 1",
            flex:1,
            autoHeight:false,
            html:"Jotaquery o maior portal de javascript do Brasil."
        }
    ]
});</code>

1
2
<code>
<pre><code>MyWindow.show();</code>

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>
« Older Entries
Newer Entries »

JotaQuery

O mundo do Javascript