Requisitos:

• XCode (MacOS)
• Phone Gap SDK

Passo a passo:

1. Instalar o plugin do Cordova no XCode
2. Criar uma aplicação
3. Implementar o Hello World
4. Executar no Emulador iOS
5. Próximos Passos

1 – Instalando o Plugin do Cordova (Phone Gap no XCode)

1.1 – Depois de fazer o download do Phone Gap (Cordova) no site, unzipe o arquivo e faça a instalação do arquivo dmg que se encontra dentro do diretório iOS – deixe o XCode fechado enquanto faz essa instalação.

2 – Criando uma Aplicação no XCode

2.1 – Abra o XCode e selecione criar um novo projeto. Selecione “Cordova based application” e clique em “Next”:

2.2 – Dê um nome para o seu projeto e entre com um identificador da sua empresa. Desmarque a opção Use Automatic Reference Counting também:

2.3 – Escolha um diretório e salve o seu projeto. O XCode irá abrir o projeto.

3 – Hello World

3.1 – Vamos tentar executar o projeto para ver o que acontece:

3.2 – O seguinte erro deverá aparecer no simulador:

3.3 – Clique com o botão direito no projeto e escolha “Show in Finder”:

3.4 – Você irá ver uma pasta chamada “www”. Clique e arraste essa pasta para dentro do projeto:

3.5 – Depois que soltar a pasta dentro do diretório, uma janela de configuração irá se abrir: Marque as seguintes opções:

4 – Executando a Aplicação no Emulador iOS

4.1 – Vamos executar o projeto novamente, e este deve ser o resultado:

5 – Próximos Passos

Agora basta estudar a API e soltar a criatividade!

Até a próxima!

Se você não sabe o que é Sencha Touch e ficou curioso, pode assistir a primeira video-aula do curso de Sencha Touch 2, onde faço um overview completo da tecnologia.

Requisitos:

• Sencha Touch 2 SDK
• Sencha SDK Tools
• Browser (Chrome)
• Terminal – console
• Editor de texto
• Emulador mobile – iOS ou Android

Passo a passo desse tutorial:

1. Download do SDK
2. Criar o projeto
3. Fazer build
4. Usando o Emulador iOS
5. Usando o Emulador Android
6. Próximos Passos

1 – Instalando o SDK e ferramentas necessárias

O primeiro passo é fazer o download do SDK do Sencha Touch 2 e do SDK tools. Vamos primeiro instalar o SDK Tools:

1.1 – Vá até http://www.sencha.com/products/sdk-tools/download e faça o download para versão do seu sistema operacional.

1.2 – Instale do SDK Tools – basta seguir o next-next-finish:

1.3 – Vá até http://www.sencha.com/products/touch/download/ e faça download da versão Open Source. Depois que o download terminar, basta unzipar o arquivo em um servidor web (apache, por exemplo). É necessário que seja possível acessar o Sencha Touch através de um endereço local, como por exemplo http://localhost/sencha-touch-2.0.1. Para entender mais sobre isso, você pode assistir a aula 2 do Curso Gratuito de Sencha Touch 2.

2 – Criando o Projeto

Agora que já temos tudo instalado, vamos criar o nosso primeiro projeto. Recebo muitos emails perguntando como crio as minhas aplicações, e vou descrever para vocês agora.

2.1 – Eu fiz o deploy do SDK do Sencha Touch no meu servidor Apache que já vem no Mac. Mas você também pode usar o Mamp, Xampp, .

O diretório que o meu SDK está instalado é: /Users/loiane/Projects/sencha-touch-2.0.1

2.2 – Para criar o projeto precisamos abrir o terminar e navegar até o diretório onde o ST2 está instalado:

2.3 – Agora vamos usar o comando sencha generate app para gerar a base da aplicação. Para usarmos esse comando, precisamos passar mais 2 argumentos, sendo o primeiro o nome do namespace da nossa aplicação e o segundo o diretório onde será criada a aplicação. Vou criar uma aplicação com namespace STHelloWorld no diretório  /Users/loiane/Projects/touch2-hello-world. Sendo assim, preciso digitar o comando sencha generate app STHelloWorld ../touch2-hello-world:

2.4 – Como vocês podem ver, o SDK Tools gerou a aplicação completa no diretório:

2.5 – Se abrirmos o diretório da aplicação, veremos que a aplicação gerada contém tudo o que precisamos: a estrutura MVC, todos os arquivos da aplicação e o sdk do touch 2 incluso.

2.6 – Se acessarmos a aplicação no Google Chromes, por exemplo, teremos a seguinte resultado:

Pronto, a aplicação está pronta e você já pode começar a modificar e criar sua aplicação em cima dessa que criamos.

3 – Usando o Emulador iOS

3.1 – Bem até agora testamos apenas no browser. Isso é legal porque não precisamos fazer o build para um emulador toda vez que a gente mudar alguma coisa; podemos testar primeiro no browser e no final, quando estiver da maneira desejada, podemos fazer o build e testar em um emulador, antes de empacotar a nossa app ST2 para uma app iOS ou Android.

Note que na aplicação existe um arquivo chamado packager.json onde vamos editar as configurações para ver a aplicação funcionando em um emulador. A parte mais importante se quisermos executar é a configuração platform. Por padrão, já vem configurado para o iOS Emulator.

Para testarmos a aplicação no iOS Emulator (precisa ter o XCode instalado, se você usa MacOS), basta executar o seguinte comando: sencha app build native:

3.2 – Quando o SDK Tools terminar de construir a aplicação, o iOS Emulator irá abrir e podermos navegar na aplicação:

4 - Usando o Emulador Android

4.1 – Para usar o Android Emulator, precisamos ter o SDK do Android instalado na máquina. Caso você não tenha, vá até http://developer.android.com/sdk/index.html e faça o download e configure no seu sistema operacional.

4.2 – Abra o arquivo packager.json e configure as seguintes opções:

• “platform”:”AndroidEmulator”,
• “sdkPath”:”/Users/loiane/Documents/development/android-sdk-macosx”, (configure o caminho do SDK do Android no seu sistema operacional)
• “androidAPILevel”:”15″,

5 – Próximos Passos

Agora é só deixar a imaginação e criatividade fluir e criar lindas apps com ST2!

• Leia os guides da documentação: http://docs.sencha.com/touch/2-0/
• Veja alguns exemplos: http://docs.sencha.com/touch/2-0/#!/example
• Curso Online Gratuito: http://www.loiane.com/2012/03/curso-de-sencha-touch-2-gratuito/

Até a próxima!

Mais um exemplo sobre ExtJS 4 MVC aqui no  blog.

Este provavavelmente é o post mais pedido sobre ExtJS 4 MVC. Um exemplo de como começar uma aplicação MVC com PHP e MySQL.

Screenshot da aplicação:

Estrutura do Projeto:

Código Fonte:

Como o exemplo é bem grande e tem bastante código fonte, não vou postar aqui no blog. Quem tiver interesse pode pegar o código completo no meu github: https://github.com/loiane/extjs4-mvc-json-crud-php-mysql

Demo:

Quem tiver interesse, também pode ver o exemplo live: http://loiane.com/extjs/extjs4-mvc-json-crud-php-mysql

ScreenCast passo a passo:

Em breve vou gravar um screencast ensinando a fazer passo a passo esse exemplo também.

Até a próxima!

Vamos lá!

Estrutura do Projeto:

Model – Stock

Ext.define('ExtMVC.model.Stock', {
	extend: 'Ext.data.Model',
	fields: [
	    {name: 'company'},
        {name: 'price',   type: 'float'},
        {name: 'revenue %', type: 'float'},
        {name: 'growth %',  type: 'float'},
        {name: 'product %', type: 'float'},
        {name: 'market %',  type: 'float'}
    ]
});

Model – RadarDataSet

Ext.define('ExtMVC.model.RadarDataSet', {
	extend: 'Ext.data.Model',
	fields: ['Name', 'Data']
});

Store - Stock

Ext.define('ExtMVC.store.Stocks', {
    extend: 'Ext.data.ArrayStore',
    model: 'ExtMVC.model.Stock'
});

Store - RadarDataSet

Ext.define('ExtMVC.store.RadarDataSets', {
    extend: 'Ext.data.ArrayStore',
    model: 'ExtMVC.model.RadarDataSet',

    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    },

    data: [
    {
        'Name': 'Price',
        'Data': 100
    }, {
        'Name': 'Revenue %',
        'Data': 100
    }, {
        'Name': 'Growth %',
        'Data': 100
    }, {
        'Name': 'Product %',
        'Data': 100
    }, {
        'Name': 'Market %',
        'Data': 100
    }]
});

View – chart – StockBar

Ext.define('ExtMVC.view.chart.StockBar', {
	extend: 'Ext.chart.Chart',
    alias : 'widget.stockbar',

	flex: 1,
    shadow: true,
    animate: true,
    store: 'Stocks',
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['price'],
        minimum: 0,
        hidden: true
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['company'],
        label: {
            renderer: function(v) {
                return Ext.String.ellipsis(v, 15, false);
            },
            font: '9px Arial',
            rotate: {
                degrees: 270
            }
        }
    }],
    series: [{
        type: 'column',
        axis: 'left',
        highlight: true,
        style: {
            fill: '#456d9f'
        },
        highlightCfg: {
            fill: '#a2b5ca'
        },
        label: {
            contrast: true,
            display: 'insideEnd',
            field: 'price',
            color: '#000',
            orientation: 'vertical',
            'text-anchor': 'middle'
        },
        xField: 'name',
        yField: ['price']
    }]
});

View – chart – StockRadar

Ext.define('ExtMVC.view.chart.StockRadar', {
	extend: 'Ext.chart.Chart',
    alias : 'widget.stockradar',

	margin: '0 0 0 0',
    insetPadding: 20,
    flex: 1.2,
    animate: true,
    store: 'RadarDataSets',
    theme: 'Blue',
    axes: [{
        steps: 5,
        type: 'Radial',
        position: 'radial',
        maximum: 100
    }],
    series: [{
        type: 'radar',
        xField: 'Name',
        yField: 'Data',
        showInLegend: false,
        showMarkers: true,
        markerConfig: {
            radius: 4,
            size: 4,
            fill: 'rgb(69,109,159)'
        },
        style: {
            fill: 'rgb(194,214,240)',
            opacity: 0.5,
            'stroke-width': 0.5
        }
    }]
});

View – stocks- StockGrid

Ext.define('ExtMVC.view.stocks.StockGrid', {
	extend: 'Ext.grid.Panel',
	alias : 'widget.stockgrid',

	id: 'company-form',
    flex: 0.60,
    store: 'Stocks',
    title:'Company Data',

    perc: function(v) {
        return v + '%';
    },

    initComponent: function() {

	    this.columns= [
	        {
	            id       :'company',
	            text   : 'Company',
	            flex: 1,
	            sortable : true,
	            dataIndex: 'company'
	        },
	        {
	            text   : 'Price',
	            width    : 75,
	            sortable : true,
	            dataIndex: 'price',
	            align: 'right',
	            renderer : 'usMoney'
	        },
	        {
	            text   : 'Revenue',
	            width    : 75,
	            sortable : true,
	            align: 'right',
	            dataIndex: 'revenue %',
	            renderer: this.perc
	        },
	        {
	            text   : 'Growth',
	            width    : 75,
	            sortable : true,
	            align: 'right',
	            dataIndex: 'growth %',
	            renderer: this.perc
	        },
	        {
	            text   : 'Product',
	            width    : 75,
	            sortable : true,
	            align: 'right',
	            dataIndex: 'product %',
	            renderer: this.perc
	        },
	        {
	            text   : 'Market',
	            width    : 75,
	            sortable : true,
	            align: 'right',
	            dataIndex: 'market %',
	            renderer: this.perc
	        }
	    ];

		this.callParent(arguments);
    }
});

View – stocks- StockForm

Ext.define('ExtMVC.view.stocks.StockForm', {
	extend: 'Ext.form.Panel',
	alias : 'widget.stockform',

	requires: [
		'ExtMVC.view.stocks.StockGrid',
		'ExtMVC.view.chart.StockBar',
		'ExtMVC.view.chart.StockRadar'
	],

	title: 'Company data',
    frame: true,
    bodyPadding: 5,
    //width: 870,
    //height: 720,

    fieldDefaults: {
        labelAlign: 'left',
        msgTarget: 'side'
    },

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    items: [
        {
            height: 200,
            layout: 'fit',
            margin: '0 0 3 0',
            items: [{ xtype: 'stockbar'}]
        },
        {

        layout: {type: 'hbox', align: 'stretch'},
        flex: 3,
        border: false,
        bodyStyle: 'background-color: transparent',

        items: [{
        	xtype: 'stockgrid'
        }, {
            flex: 0.4,
            layout: {
                type: 'vbox',
                align:'stretch'
            },
            margin: '0 0 0 5',
            title: 'Company Details',
            items: [{
                margin: '5',
                xtype: 'fieldset',
                flex: 1,
                title:'Company details',
                defaults: {
                    width: 240,
                    labelWidth: 90,
                    disabled: true
                },
                defaultType: 'numberfield',
                items: [{
                    fieldLabel: 'Name',
                    name: 'company',
                    xtype: 'textfield'
                },{
                    fieldLabel: 'Price',
                    name: 'price',
                    maxValue: 100,
                    minValue: 0,
                    enforceMaxLength: true,
                    maxLength: 5
                },{
                    fieldLabel: 'Revenue %',
                    name: 'revenue %',
                    maxValue: 100,
                    minValue: 0,
                    enforceMaxLength: true,
                    maxLength: 5
                },{
                    fieldLabel: 'Growth %',
                    name: 'growth %',
                    maxValue: 100,
                    minValue: 0,
                    enforceMaxLength: true,
                    maxLength: 5
                },{
                    fieldLabel: 'Product %',
                    name: 'product %',
                    maxValue: 100,
                    minValue: 0,
                    enforceMaxLength: true,
                    maxLength: 5
                },{
                    fieldLabel: 'Market %',
                    name: 'market %',
                    maxValue: 100,
                    minValue: 0,
                    enforceMaxLength: true,
                    maxLength: 5
                }]
            }, {xtype:'stockradar'}]
        }]
    }]
});

ViewPort

/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('ExtMVC.view.Viewport', {
    extend: 'Ext.Viewport',

    layout: 'fit',

    requires: [
        'ExtMVC.view.stocks.StockForm',
        'ExtMVC.view.stocks.StockGrid',
        'ExtMVC.view.chart.StockBar',
        'ExtMVC.view.chart.StockRadar'
    ],

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: 'stockform'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Controller

Ext.define('ExtMVC.controller.Stocks', {
    extend: 'Ext.app.Controller',

    models: ['Stock','RadarDataSet'],

   	stores: ['Stocks', 'RadarDataSets'],

    views: [
        'chart.StockRadar',
        'chart.StockBar',
        'stocks.StockGrid',
        'stocks.StockForm'
    ],

    refs: [{
        ref: 'stockForm',
        selector: 'form'
    },{
        ref: 'stockGrid',
        selector: 'grid'
    }],

    init: function() {

        this.loadStore();

        this.control({
        	'stockgrid': {
        		selectionchange: this.selectionchange
        	}/*,
            'textfield': {
                change: this.changeField
            }*/,
            'numberfield': {
                change: this.changeField
            },
            'stockbar': {
                afterrender: function (chart,o) {

                    var series = chart.series.getAt(0);
                    series.listeners = {
                        itemmouseup: function(item) {

                            var series = Ext.ComponentQuery.query('stockbar')[0].series.get(0);
                            var index = Ext.Array.indexOf(series.items, item);
                            var selectionModel = Ext.ComponentQuery.query('grid')[0].getSelectionModel();

                            var selectedStoreItem = item.storeItem;
                            selectionModel.select(index);
                        }
                    }
                },
                beforerefresh: this.beforerefresh
            }
        });
    },

    loadStore: function(){

        var store = this.getStocksStore();

        // sample static data for the store
        var myData = [
            ['3m Co'],
            ['Alcoa Inc'],
            ['Altria Group Inc'],
            ['American Express Company'],
            ['American International Group, Inc.'],
            ['AT&T Inc'],
            ['Boeing Co.'],
            ['Caterpillar Inc.'],
            ['Citigroup, Inc.'],
            ['E.I. du Pont de Nemours and Company'],
            ['Exxon Mobil Corp'],
            ['General Electric Company'],
            ['General Motors Corporation'],
            ['Hewlett-Packard Co'],
            ['Honeywell Intl Inc'],
            ['Intel Corporation'],
            ['International Business Machines'],
            ['Johnson & Johnson'],
            ['JP Morgan & Chase & Co'],
            ['McDonald\'s Corporation'],
            ['Merck & Co., Inc.'],
            ['Microsoft Corporation'],
            ['Pfizer Inc'],
            ['The Coca-Cola Company'],
            ['The Home Depot, Inc.'],
            ['The Procter & Gamble Company'],
            ['United Technologies Corporation'],
            ['Verizon Communications'],
            ['Wal-Mart Stores, Inc.']
        ];

        for (var i = 0, l = myData.length, rand = Math.random; i < l; i++) {
            var data = myData[i];
            data[1] = ((rand() * 10000) >> 0) / 100;
            data[2] = ((rand() * 10000) >> 0) / 100;
            data[3] = ((rand() * 10000) >> 0) / 100;
            data[4] = ((rand() * 10000) >> 0) / 100;
            data[5] = ((rand() * 10000) >> 0) / 100;
        }

        store.loadData(myData);
    },

    selectionchange: function(model, records){

        var json, name, i, l, items, series, fields;

        var form = this.getStockForm().getForm();

        if (records[0]) {
            rec = records[0];

            if (!form) {
                form = this.getStockForm().getForm();
                fields = form.getFields();
                fields.each(function(field){
                    if (field.name != 'company') {
                        field.setDisabled(false);
                    }
                });
            } else {
                fields = form.getFields();
            }

            // prevent change events from firing
            fields.each(function(field){
                field.suspendEvents();
                console.log('suspended');
            });
            form.loadRecord(rec);
            this.updateRecord(rec);

            fields.each(function(field){
                field.resumeEvents();
            });

            fields.each(function(field){
                if (field.name != 'company') {
                    field.setDisabled(false);
                }
            });
        }
    },

    updateRecord: function(rec) {
        var name, series, i, l, items, json = [{
            'Name': 'Price',
            'Data': rec.get('price')
        }, {
            'Name': 'Revenue %',
            'Data': rec.get('revenue %')
        }, {
            'Name': 'Growth %',
            'Data': rec.get('growth %')
        }, {
            'Name': 'Product %',
            'Data': rec.get('product %')
        }, {
            'Name': 'Market %',
            'Data': rec.get('market %')
        }];

        var store = this.getRadarDataSetsStore();
        store.loadData(json);
        this.selectItem(rec);
    },

    selectItem: function(storeItem) {

        var name = storeItem.data.company;//storeItem.get('company'),
        var series = Ext.ComponentQuery.query('stockbar')[0].series.get(0);
        var i, items, l;

        series.highlight = true;
        series.unHighlightItem();
        series.cleanHighlights();
        for (i = 0, items = series.items, l = items.length; i < l; i++) {
            if (name == items[i].storeItem.get('company')) {
                selectedStoreItem = items[i].storeItem;
                series.highlightItem(items[i]);
                break;
            }
        }
        series.highlight = false;
    },

    changeField: function(field, newValue, oldValue) {

        console.log('changeField');

        var form = this.getStockForm().getForm();
        var rec = this.getStockGrid().getSelectionModel().getSelection()[0];

        if (rec && form) {
            if (newValue > field.maxValue) {
                field.setValue(field.maxValue);
            } else {
                form.updateRecord(rec);
                this.updateRecord(rec);
            }
        }
    },

    beforerefresh: function() {
        var timer = false;

        return function() {
            clearTimeout(timer);

            var series = Ext.ComponentQuery.query('stockbar')[0].series.get(0);
            var index = Ext.Array.indexOf(series.items, item);
            var selectionModel = Ext.ComponentQuery.query('grid')[0].getSelectionModel();
            var selectedStoreItem = item.storeItem;

            if (selectedStoreItem) {
                timer = setTimeout(function() {
                    this.selectItem(selectedStoreItem);
                }, 900);
            }
        };
    }
});

App

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'app/ux');

/*
 * BUG: suspentEvents not honoured in Ext.app.EventBus
 *
 * note: this fix does not queue events when asked.
 *
 * http://www.sencha.com/forum/showthread.php?171525
 */
Ext.syncRequire('Ext.app.EventBus');
Ext.override(Ext.app.EventBus, {
    constructor: function() {
        this.mixins.observable.constructor.call(this);

        this.bus = {};

        var me = this;
        Ext.override(Ext.Component, {
            fireEvent: function(ev) {
// [
// --
//              if (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false) {
// ++
                if (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false && !this.eventsSuspended) {
// ]
                    return me.dispatch.call(me, ev, this, arguments);
                }
                return false;
            }
        });
    }
});

Ext.application({
    name: 'ExtMVC',

    controllers: [
        'Stocks'
    ],

    autoCreateViewport: true
});

Página HTML

<html>
<head>
    <title>Ext JS 4 MVC Examples - loiane.com</title>
    <!-- Ext JS Files -->
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>

    <!-- App Files -->
    <script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>

Download do Código Fonte:

Você pode fazer o download do código fonte completo no meu repositório do github: https://github.com/loiane/extjs4-mvc-complex-dashboard

Demo:

Exemplo funcionando: http://loiane.com/extjs/extjs4-mvc-complex-dashboard

Todos os exemplos ExtJS 4 MVC:

http://www.loiane.com/2012/03/exemplos-sencha-extjs-4-em-mvc/

Até o próximo exemplo! 

Na aula de hoje vamos aprender como usar o MessageBox, aquela janela de alert. Vamos aprender todos os tipos de dialogs que podemos fazer com ExtJS, inclusive os customizados.

Quem quiser ver todas as aulas já publicadas, é só clicar aqui.

Espero que gostem dessa aula e fico no aguardo do feedback de vocês!

Requerimentos:

• Ext JS 4 SDK
• Servidor Apache (opcional).
• Editor de Texto (qualquer um de sua preferência). No vídeo usei o Sublime Text 2 (tem pra Mac OS, Windows e Linux – a versão shareware não expira!)
• Browser (de preferência Firefox com Firebug ou Chrome).

Vídeo:

Vimeo: http://vimeo.com/loiane/curso-extjs4-aula25

YouTube: em breve

Código: https://github.com/loiane/curso-extjs4

Slides:

Até a próxima aula!

Confesso que fiquei bem empolgada com a nova versão do framework, pois está cheia de novidades! Os pacotes passaram por uma reformulação de nomes, já que a empresa antes não se chamava Sencha, mas sim ExtJS.

Bem, pra quem não conhece o Ext GWT, ou como também é chamado, GXT, é um framework Java mantido pela Sencha baseado totalmente no GWT (o framework Java do Google), mas com a cara e interface linda que o ExtJS tem!

Os componentes UI do GXT são bem parecidos com os do ExtJS, mas com uma diferença: o código você faz TODO em Java, e o GWT se encarrega de gerar todo o código javascript para você.

Bem, o objetivo do post de hoje, além de fazer esta breve introdução, é mostrar como preparar o ambiente de desenvolvimento para começar a programar com o GXT e fazer um simples Hello World!

Realmente não sei como desenvolvedora Java e amante dos produtos da Sencha nunca escrevi sobre esse framework aqui no blog antes!

Vamos ao que interessa então!

Requisitos para este Tutorial – vou assumir que você seja um desenvolvedor Java e já tenha os seguintes items:

• Conhecimentos de Java
• Ter o Java SDK instalado na máquina
• Eclipse
• Fazer Download do Ext GWT 3

Passo a passo desse tutorial:

1. Instalar o Google Eclipse Plugin
2. Criar o projeto
3. Adicionar as bibliotecas necessárias
4. Desenvolver a aplicação
5. Executar a aplicação

Instalando o Google Eclipse Plugin

Um requisito para desenvolvermos projetos em GXT é ter o Google Eclipse Plugin instalado, já que o GXT é baseado no GWT. O primeiro passo então é abrir o Market Place do Eclipse e fazer uma busca por “google”. Depois que a busca estiver feita, vamos procurar o Google Plugin for Eclipse como destacado no screenshot abaixo. Irão ter outras opções com a versão do Eclipse também, mas esta versão que não mostra a versão do Eclipse irá automaticamente detectar a versão que você está usando o instalar o plugin compatível. E para instalar, basta usar o botão “Install”.

Uma dica muito importante: use o Java JDK 6 no Eclipse para instalar o Google Eclipse Plugin. Se estiver usando o JDK 7, vai dar erro.

O Eclipse vai calcular alguns requerimentos e também irá buscar pela versão correta a ser instalada no Eclipse. Neste caso clique em “Next” para prosseguir com a instalação:

Aceite os termos e prossiga com a instalação:

Pronto! Agora basta reiniciar o Eclipse para que as mudanças sejam aplicadas na IDE.

Criando o Projeto

Assim que reiniciarmos o Eclipse, um ícone do Google irá aparecer na barra de ferramentas da IDE. Para criar um novo projeto, clique na “seta para baixo” ao lado do ícone do Google e selecione “New Web Application Project”:

Dê um nome para o projeto (neste tutorial dei o nome de ext-gwt-helloworl), informe o nome do pacote base que irá usar (neste caso escolhi com.loiane.gxt3). Depois deixe apenas a opção “Use Google Web Toolkit” selecionada. Assim vamos criar um projeto “zerado”:

Pronto, o projeto foi gerado seguindo a estrutura de um projeto do GWT.

Adicionando as Bibliotecas

Como queremos criar um projeto usando o GXT 3, precisamos adicionar o jar correspondente da biblioteca ao projeto, já que este já contém as bibliotecas do GWT necessárias. Selecione o projeto, clique com o botão direito e escolha “Build Path” -> “Configure Build Path”:

Uma nova janela irá se abrir. Escolha a tab “Libraries” e clique em “Add External JARs…”.

Vá até o diretório onde descompactou o SDK do Ext GWT e selecione apenas o jar do gxt 3, como mostra o screenshot abaixo:

Pronto, o GXT já está adicionado no classpath do projeto. Clique em OK:

Desenvolvendo a Aplicação – Código

Agora que o projeto já está todo configurado, vamos começar com a diversão e implementar a nossa primeira aplicação com GXT 3. Para isso, selecione o projeto, clique com o botão direto e escolha “New” -> “Other”. Ache o folder do “Google Web Toolkit” e escolha “Module”:

Escolha o pacote (que escolhemos quando criamos o projeto, lembra?) e dê um nome para o módulo. Como essa é a nossa primeira applicacação, chamei de “HelloWorl”:

O plugin do Google vai criar um arquivo xml chamado “Hello World.gwt.xml” como mostrado abaixo. Mas como queremos criar uma aplicação com GXT, temos que fazer algumas mudanças.

Para fazermos essas mudanças, temos que adicionar a seguinte linha no arquivo xml:

Vamos aproveitar e dar um alias para o módulo de “helloworld” para facilitar as chamadas que iremos fazer daqui a pouco. No final, seu arquivo xml deve ficar assim:

<!--?xml version="1.0" encoding="UTF-8"?-->

	<source path="client" />

Agora vamos criar uma classe Entry Point. Para quem nunca trabalhou com GWT antes, a classe que extende um EntryPoint funciona como uma espécie de classe Main, que será executada quando executarmos a aplicação. Novamente, selecione o projeto, clique com o botão direto e escolha “New” -> “Other”. Ache o folder do “Google Web Toolkit” e escolha “Entry Point Class”:

O nome da nossa EntryPoint class será HelloWorld. Clique em Finish – um detalhe: depois de criar essa classe, note que o plugin automaticamente adicionou uma linha no arquivo de configuração do xml:

Agora que a classe está criada, vamos abrir a classe e adicionar o código do GXT:

package com.loiane.gxt3.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.widget.core.client.box.MessageBox;

public class HelloWorld implements EntryPoint {

	@Override
	public void onModuleLoad() {

		MessageBox messageBox = new MessageBox("First GXT 3 App", "Hello, World!");

		RootPanel.get().add(messageBox);

		messageBox.show();

	}

}

O código acima irá mostrar uma MessageBox (componente muito parecido com o do ExtJS) com um título e uma mensagem de “Hello, World!”.

Agora precisamos criar uma página HTML. Novamente, selecione a pasta “war” do projeto, clique com o botão direto e escolha “New” -> “Other”. Ache o folder do “Google Web Toolkit” e escolha “HTML Page”:

Dê um nome para a página HTML. Geralmente damos o mesmo nome do módulo:

Pronto, a página HTML será criada. Precisamos fazer uma modificação para adicionar o css do GXT 3. No final, o código HTML deve ficar parecido com o código abaixo:

    HelloWorld

<script type="text/javascript" language="javascript" src="helloworld/helloworld.nocache.js"></script>

</pre>
<iframe id="__gwt_historyFrame" style="position: absolute; width: 0; height: 0; border: 0;" src="javascript:''" width="320" height="240"></iframe>
<pre>

Executando

Pronto, nosso Hello World está implementado e agora vamos executar o projeto pela primeira vez. Como estamos usando o GWT, não precisamos nos preocupar em instalar nenhum webserver, pois o plugin do Google já vem com um especialmente projetado para executar projetos GWT. Para isso, vamos clicar novamente com o botão direito no projeto, e escolher a opção “Run As” -> “Web Application” (repare no ícone do plugin do Google):

O console do “Development Mode” vai abrir e se tudo estiver OK, vai mostrar um link. Dê um duplo clique no link e o seu browser default irá abrir.

Se você nunca executou um projeto GWT no seu browser antes, vai pedir para instalar o plugin do Google. Instale.

Dê um duplo clique novamente na url e agora que já temos o plugin do Google para app GWT instalado no browser, a seguinte tela deve aparecer.

Parabéns! Criamos e executamos nossa primeira aplicação GXT 3 juntos!

Estrutura Final do Projeto

No final, a estrutura do projeto deve ficar assim:

Download do Código Fonte

Você pode fazer download do código fonte completo desse tutorial no meu repositório do github: https://github.com/loiane/ext-gwt3-helloworld

Até a próxima!

O que vai mudar entre o tutorial do ExtJS 3 e ExtJS 4 é apenas o frontend, ou seja, o código ExtJS. Se quiser pode usar o backend que fiz no post passado com o código do ExtJS 4 ou o código do ExtJS 3 com o backend feito em PHP deste post.

Vamos lá!

Estrutura do Projeto:

Código ExtJS 4:

Model – Estado

Ext.define('ExtMVC.model.State',{
    extend: 'Ext.data.Model',
    fields: [
       {name: 'state_id'},
       {name: 'state_name'}
    ],
    idProperty: 'state_id'
});

Store – Estados

Ext.define('ExtMVC.store.States',{
    extend: 'Ext.data.Store',

    storeId: 'statesStore',

    model: 'ExtMVC.model.State',

    autoLoad:true,

    proxy: {
        type: 'ajax',

        url: 'php/listStates.php',

        reader: {
                type: 'json',
                root: 'data'
        }
    }
});

Model – Cidade

Ext.define('ExtMVC.model.City',{
    extend: 'Ext.data.Model',
    fields: [
       {name: 'city_id'},
       {name: 'state_id'},
       {name: 'city_name'}
    ],

    idProperty: 'city_id'
});

Store – Cidades

Ext.define('ExtMVC.store.Cities',{
    extend: 'Ext.data.Store',

    model: 'ExtMVC.model.City',

    proxy: {
        type: 'ajax',

        url: 'php/listCities.php',

        reader: {
                type: 'json',
                root: 'data'
        }
    }
});

View

Ext.define('ExtMVC.view.StateCityCombo' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.statecityform',

    frame: true,
    title:'Linked Comboboxes',
    style:'margin:16px',
    bodyStyle:'padding:10px',

    fieldDefaults: {
        labelAlign: 'right',
        labelWidth: 85,
        msgTarget: 'side'
     },

    items: [{
        xtype: 'combo',
        id: 'stateCombo',
        fieldLabel:'Select State',
        displayField:'state_name',
        valueField:'state_id',
        store: Ext.create('ExtMVC.store.States'),
        triggerAction:'all',
        mode:'local',
    },
    {
        xtype: 'combo',
        id: 'cityCombo',
        fieldLabel:'Select City',
        displayField:'city_name',
        valueField:'city_id',
        store: Ext.create('ExtMVC.store.Cities'),
        triggerAction:'all',
        mode:'local',
        disabled:true,
        lastQuery:''
    }]

 });

ViewPort

Ext.define('ExtMVC.view.Viewport', {
    extend: 'Ext.Viewport',
    layout: 'fit',

    requires: [
        'ExtMVC.view.StateCityCombo'
    ],

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: 'statecityform'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Controller

Ext.define('ExtMVC.controller.LinkedComboboxes', {
    extend: 'Ext.app.Controller',

    models: ['State', 'City'],

    stores: ['States', 'Cities'],

    views: ['StateCityCombo'],

    init: function() {

        this.control({
            'statecityform #stateCombo': {
                select: this.loadCityCombo
            }
        });
    },

     loadCityCombo: function(combo, records) {

        var comboCity = Ext.ComponentQuery.query('statecityform #cityCombo')[0];

        comboCity.setDisabled(true);
        comboCity.setValue('');
        comboCity.store.removeAll();

        comboCity.store.load({
            params: { stateId: combo.getValue() }
        });
        comboCity.setDisabled(false);
     }
});

App

Ext.Loader.setConfig({enabled: true});

Ext.application({
    name: 'ExtMVC',

    controllers: [
        'LinkedComboboxes'
    ],

    autoCreateViewport: true
});

listaEstados.php

<?php
    //chama o arquivo de conexão com o bd
    include("database.php");

    //consulta sql
    $query = mysql_query("SELECT * FROM State") or die(mysql_error());

    //faz um looping e cria um array com os campos da consulta
    $rows = array('data' => array());
    while($state = mysql_fetch_assoc($query)) {
        $rows['data'][] = $state;
    }

    //encoda para formato JSON
    echo json_encode($rows);
?>

listaCidades.php

<?php
    //chama o arquivo de conexão com o bd
    include("database.php");

    $stateId = $_REQUEST['stateId'];

    $queryString = "SELECT * FROM City WHERE state_id = " . $stateId;

    //consulta sql
    $query = mysql_query($queryString) or die(mysql_error());

    //faz um looping e cria um array com os campos da consulta
    $rows = array('data' => array());
    while($city = mysql_fetch_assoc($query)) {
        $rows['data'][] = $city;
    }

    //encoda para formato JSON
    echo json_encode($rows);
?>

Download do Código Fonte:

Você pode fazer o download do código fonte completo no meu repositório do github: https://github.com/loiane/extjs4-linked-combobox

Demo:

Exemplo funcionando: http://loiane.com/extjs/extjs4-linked-combobox/

Até a próxima!

Pois é, mais um evento neste mês de maio! Terceiro fim de semana seguido que palestro em algum evento! Dessa vez vou palestrar no Just Java 2012, em São Paulo. O evento será realizado nos dias 18 e 19 de maio no SENAC de Santo Amaro.

Vou palestrar sobre ExtJS 4 e Jax-RS. A palestra vai ser mais hands-on, usando Netbeans, Jax-RS e ExtJS 4. Vou fazer uma aplicação de exemplo para mostrar como é simples de usar o Jax-RS com Netbeans, e além disso, mostrar também que não é preciso usar Java em toda a aplicação, ou seja, é fácil integrar uma API Java com alguma outra tecnologia.

O evento conta com grandes nomes da comunidade Java brasileira e internacional, como Bruno Javaman, Fabiane Nardon, Yara e Vinícius Senger, Maltron, Mike Milinkovich (Eclipse Foundation), Stephen Chin (Oracle – the FX guy!), entre outros.

Se você está em São Paulo e trabalha com Java, este evento é imperdível!

Nos vemos lá!

Na aula de hoje vamos aprender como fazer o download, instalar em um webserver para acesso offline, vamos aprender para que serve cada arquivo que vem com o SDK, vamos fazer um hello world e executá-lo em um browser e um smartphone.

Quem quiser ver todas as aulas já publicadas, é só clicar aqui.

Recomendo altamente aprender ExtJS 4 também, afinal parte da API do Sencha Touch 2 é compartilhada com ExtJS 4. Você pode acompanhar o curso gratuito de ExtJS 4 aqui.

Espero que gostem dessa aula e fico no aguardo do feedback de vocês!

Requerimentos:

• SDK Sencha Touch 2
• Editor de Texto
• WebServer (Apache)
• Smartphone ou tablet (opcional)

Vídeo:

Vimeo: http://vimeo.com/loiane/curso-senchatouch2-aula02

YouTube: em breve

Código: https://github.com/loiane/curso-touch2

Slides:

Até a próxima aula!

E neste caso, você só poderá criar um outro server de uma versão diferente.

Tive esse problema na semana passada, quando migrei meus arquivos para uma nova máquina no trabalho. Mesmo tendo copiado o workspace e a pasta do eclipse com todas as configurações, tive esse erro.

Vamos ver como corrigir esse problema.

Para resolver esse erro, siga os passos:

1. Vá em Window–>Preferences–>Server–>Runtime Environments e faça um fiz do path do diretório do servidor.
2. Agora vá no diretório do workspace (\workspace\.metadata\.plugins\org.eclipse.core.runtime\.settings) e renomeie ou delete o arquivo org.eclipse.jst.server.tomcat.core.prefs  (se for renomear, pode ser para org.eclipse.jst.server.tomcat.core.prefs.bak).
3. Renomeie o arquivo  org.eclipse.wst.server.core.prefs para  org.eclipse.wst.server.core.prefs.bak (ou delete o arquivo). Este arquivo também se encontra no diretório \workspace\.metadata\.plugins\org.eclipse.core.runtime\.settings.

Até a próxima!

O post de hoje é uma dica de código bem rápida, mostrando apenas como se conectar com o MySQL usando o PHP:

<?php

//nome do servidor (127.0.0.1)
$servidor = "127.0.0.1";

//usuário do banco de dados
$user = "root";

//senha do banco de dados
$senha = "root";

//nome da base de dados
$db = "blog";

//executa a conexão com o banco, caso contrário mostra o erro ocorrido
$conexao = mysql_connect($servidor,$user,$senha) or die (mysql_error());

//seleciona a base de dados daquela conexão, caso contrário mostra o erro ocorrido
$banco = mysql_select_db($db, $conexao) or die(mysql_error());

?>

Bons códigos!

Vamos ao código então!

Estrutura do Projeto

Model – Number

Ext.define('ExtMVC.model.Number',{
    extend: 'Ext.data.Model',
    fields: [
       {name: 'value'},
       {name: 'text'}
    ],
    idProperty: 'value'
});

Store- Numbers

Ext.define('ExtMVC.store.Numbers', {
    extend: 'Ext.data.ArrayStore',
    model: 'ExtMVC.model.Number',

    data: [
        [123,'One Hundred Twenty Three'],
        ['1', 'One'],
        ['2', 'Two'],
        ['3', 'Three'],
        ['4', 'Four'],
        ['5', 'Five'],
        ['6', 'Six'],
        ['7', 'Seven'],
        ['8', 'Eight'],
        ['9', 'Nine']
    ],

    sortInfo: {
        field: 'value',
        direction: 'ASC'
    }
 });

View – ItemSelectorForm

Ext.define('ExtMVC.view.ItemSelectorForm', {
    extend: 'Ext.form.Panel',
    alias : 'widget.itemselectorform',

    requires: [
        'Ext.ux.form.ItemSelector',
        'ExtMVC.view.DockedToolbar',
        'ExtMVC.view.DockedButtons'
    ],

    title: 'ItemSelector Test',
    width: 700,
    bodyPadding: 10,
    height: 300,
    layout: 'fit',

    items:[{
        xtype: 'itemselector',
        name: 'itemselector',
        id: 'itemselector-field',
        anchor: '100%',
        fieldLabel: 'ItemSelector',
        store: Ext.create('ExtMVC.store.Numbers'),
        displayField: 'text',
        valueField: 'value',
        value: ['3', '4', '6'],
        allowBlank: false,
        msgTarget: 'side'
    }],

    dockedItems: [{
        xtype: 'toptoolbar',
        dock: 'top'
    },{
        xtype: 'bottombuttons',
        dock: 'bottom'
    }]
})

View – MultiSelectForm

Ext.define('ExtMVC.view.MultiSelectForm', {
    extend: 'Ext.form.Panel',
    alias : 'widget.multiselectform',

    requires: [
        'Ext.ux.form.MultiSelect',
        'ExtMVC.view.DockedToolbar',
        'ExtMVC.view.DockedButtons'
    ],

    title: 'MultiSelect Test',
    bodyPadding: 10,
    width: 700,

    items:[{
        anchor: '100%',
        xtype: 'multiselect',
        msgTarget: 'side',
        fieldLabel: 'Multiselect',
        name: 'multiselect',
        id: 'multiselect-field',
        allowBlank: false,
        store: Ext.create('ExtMVC.store.Numbers'),
        displayField: 'text',
        valueField: 'value',
        value: ['3', '4', '6'],
        ddReorder: true
    }],

    dockedItems: [{
        xtype: 'toptoolbar',
        dock: 'top'
    },{
        xtype: 'bottombuttons',
        dock: 'bottom'
    }]
})

View – DockedToolbar

Ext.define('ExtMVC.view.DockedToolbar', {
    extend: 'Ext.toolbar.Toolbar',
    alias : 'widget.toptoolbar',

    items: [{
        text: 'Options',
        menu: [{
            text: 'Get value',
            action: 'getValue'
        }, {
            text: 'Set value (2,3)',
            action: 'setValue'
        },{
            text: 'Toggle enabled',
            checked: true,
            action: 'enable'
        },{
            text: 'Toggle delimiter',
            checked: true,
            action: 'delimiter'
        }]
    }]
});

View – DockedButtons

Ext.define('ExtMVC.view.DockedButtons', {
    extend: 'Ext.toolbar.Toolbar',
    alias : 'widget.bottombuttons',

    ui: 'footer',
    defaults: {
        minWidth: 75
    },

    items: ['->', {
        text: 'Clear',
        action: 'clear'
    }, {
        text: 'Reset',
        action: 'reset'
    }, {
        text: 'Save',
        action: 'save'
    }]

});

View- Viewport

/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('ExtMVC.view.Viewport', {
    extend: 'Ext.Viewport',

    layout: {
        type:'vbox',
        padding: 10,
        align:'stretch'
     },

    requires: [
        'ExtMVC.view.MultiSelectForm',
        'ExtMVC.view.ItemSelectorForm'
    ],

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: 'multiselectform'
                },{
                    xtype: 'box',
                    html: '</br>'
                },{
                    xtype: 'itemselectorform'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Controller

Ext.define('ExtMVC.controller.SelectController', {
    extend: 'Ext.app.Controller',

    models: ['Number'],

    stores: ['Numbers'],

    views: ['MultiSelectForm', 'ItemSelectorForm'],

    init: function() {

        this.control({
            'form bottombuttons button[action=clear]': {
                click: this.clearForm
            },
            'form bottombuttons button[action=reset]': {
                click: this.resetForm
            },
            'form bottombuttons button[action=save]': {
                click: this.saveForm
            },
            'form toptoolbar menuitem[action=getValue]': {
                click: this.getValue
            },
            'form toptoolbar menuitem[action=setValue]': {
                click: this.setValue
            },
            'form toptoolbar menuitem[action=enable]': {
                checkchange: this.enable
            },
            'form toptoolbar menuitem[action=delimiter]': {
                checkchange: this.delimiter
            }
        });
    },

    clearForm: function(button){

        var field = button.up('form').down('multiselect');
        if (!field.disabled) {
            field.clearValue();
        }
    },

    resetForm: function(button){

        button.up('form').getForm().reset();
    },

    saveForm: function(button){

        var form = button.up('form').getForm();
        form.getValues(true);
        if (form.isValid()){
            Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                form.getValues(true));
        }
    },

    getValue: function(item){

        var value = item.up('form').down('multiselect').getValue();
        Ext.Msg.alert('Value is a split array', value.join(', '));
    },

    setValue: function(item){

        var value = item.up('form').down('multiselect').setValue(['2', '3']);
    },

    enable: function(item, checked){

        item.up('form').down('multiselect').setDisabled(!checked);
    },

    delimiter: function(item, checked){

        var field = item.up('form').down('multiselect');
        if (checked) {
            field.delimiter = ',';
            Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                          'see that values are now submitted as a single parameter separated by the delimiter.');
        } else {
            field.delimiter = null;
            Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                          'see that values are now submitted as separate parameters.');
        }
    }
});

App.js

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'app/ux');

Ext.application({
    name: 'ExtMVC',

    controllers: [
        'SelectController'
    ],

    autoCreateViewport: true
});

Página HTML

<html>
<head>
	<title>Ext JS 4 MVC Examples - loiane.com</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>

    <!-- Plugin Files -->
    <link rel="stylesheet" type="text/css" href="resources/ItemSelector.css" />

    <!-- App Files -->
    <script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>

Download do código fonte completo

Você pode fazer o download do código fonte completo através dos meu repositório do Github: https://github.com/loiane/extjs4-mvc-multiselect

Demo

Para ver esse projeto rodando, acesse o link: http://loiane.com/extjs/extjs4-mvc-multiselect/

Todos os exemplos ExtJS 4 MVC:

http://www.loiane.com/2012/03/exemplos-sencha-extjs-4-em-mvc/

Até o próximo exemplo! 

No mês de maio estarei novamente em Fortaleza – Ceará participando e palestrando na JavaCE Community Conference. O evento será realizado nos dias 11 e 12 de maio de 2012 na Faculdade 7 de Setembro.

Vou palestrar sobre ExtJS 4 e VRaptor e minha palestra será na sexta às 09:00h, logo depois da palestra do Paulo Silveira (responsa hein!).

O evento conta ainda com grandes nomes da comunidade Java brasileira, como Paulo Silveira, Mauricio Linhares, Douglas Campos (qmx), Fernando Meyer, Otávio Gonçalves (Java Bahia), Bruno Javaman, entre outras feras!

Vou levar 2 livros autografados para sorter entre os participantes do evento também!

Estive em Fortaleza em 2011 pela primeira vez para palestrar no BrazilJS e amei a cidade! Fui no mercado central e comprei castanha de cajú, farinha (farinha nordestina é a melhor do mundo!), doces e artesanato local. O pessoal também me levou num lugar para comer pizza de carne de sol/carne seca (caracas, é muuuuito bom!). Espero ir nesse lugar novamente viu Handerson !? rs

Nos vemos lá!

Na aula de hoje vamos aprender como declarar e usar variáveis no código sass. Vamos ver como acertar erros que podem acontecer no código sass também.

Quem quiser ver todas as aulas já publicadas, é só clicar aqui.

Espero que gostem dessa aula e fico no aguardo do feedback de vocês!

Requerimentos:

• Ruby
• Gem Sass
• Editor de Texto. Nas aulas estou usando o Sublime Text 2.
• Scout (Windows e Mac)  - sorry, não tem pra Linux - ou linha de comando.

Vídeo:

Vimeo: http://vimeo.com/loiane/curso-sass-compass-aula05

YouTube: em breve

Slides:

Até a próxima aula!

Como vocês sabem, estou postando os exemplos da Sencha no formato MVC aqui no blog. Essa semana, quando estava migrando um exemplo para MVC, me deparei com um bug do ExtJS.

Quando (por algum motivo) é necessário chamar o método suspendEvents de alguma classe, e essa mesma classe (geralmente um componente UI) tem um listener no control da classe controller de uma aplicação MVC, esse método não funciona e continua disparando os eventos.

Depois de muita dor de cabeça e muito debug, resolvi procurar no fórum da Sencha sobre esse problema. E não é que tem um bug aberto sobre isso lá? Sorte que nessa thread tem também uma solução temporária enquanto o pessoal da Sencha não acerta isso.

Bem, se você está passando por esse mesmo problema, e a versão que você está usando é a ExtJS 4.1  ou inferior, ou se o bug ainda estiver marcado como OPEN no fórum, adicione esse overrride no seu código que tudo volta a funcionar normalmente:

/*
 * BUG: suspentEvents not honoured in Ext.app.EventBus
 *
 * note: this fix does not queue events when asked.
 *
 * http://www.sencha.com/forum/showthread.php?171525
 */
Ext.syncRequire('Ext.app.EventBus');
Ext.override(Ext.app.EventBus, {
    constructor: function() {
        this.mixins.observable.constructor.call(this);

        this.bus = {};

        var me = this;
        Ext.override(Ext.Component, {
            fireEvent: function(ev) {
// [
// --
//              if (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false) {
// ++
                if (Ext.util.Observable.prototype.fireEvent.apply(this, arguments) !== false && !this.eventsSuspended) {
// ]
                    return me.dispatch.call(me, ev, this, arguments);
                }
                return false;
            }
        });
    }
});

Esse bug está aberto desde janeiro de 2012 e fiquei um pouco chateada por ele estar aberto até abril (mês que escrevi esse post). O MVC está sendo adotado pelo pessoal que começou a migrar e eu já estou ficando viciada em escrever apenas em MVC e não mais do modo estruturado como fazia com o ExtJS 3. E um bug desses realmente atrapalha (além dos outros existentes relacionados a MVC) e pode fazer com que algumas pessoas demorem mais para adotar a nova arquitetura, já que ela foi criada para ser usada como padrão de desenvolvimento em ExtJS.

Bons códigos!

Bem, por este motivo criei um exemplo. Fique á vontade para usar no seu projeto ou fazer melhorias!

O exemplo já utiliza o ComponentQuery e não utiliza o Ext.getCmp (arg!). Tentei seguir as melhores práticas para este exemplo!

O exemplo funciona assim:

CPF selecionado:

CNPJ selecionado:

Vamos ao código então!

Código:

Ext.Loader.setConfig({enabled: true});

Ext.require([
	'Ux.CpfField',
	'Ux.CnpjField'
]);

Ext.onReady(function() {

	Ext.create('Ext.form.Panel', {
		renderTo: Ext.getBody(),
		title: 'Exemplo Campos CPF e CNPJ',
		width: 250,
		bodyPadding: 5,
		fieldDefaults: {
			labelAlign: 'left',
			labelWidth: 50,
			anchor: '100%',
			msgTarget: 'under'
		},
		defaultType: 'textfield',
		items: [
		{
            xtype      : 'radiogroup',
            fieldLabel : 'Tipo de Pessoa',
            columns: 2,
            items: [
                {
                    boxLabel  : 'Física',
                    name      : 'tipoPessoa',
                    inputValue: 'cpf',
                    checked   : true
                }, {
                    boxLabel  : 'Jurídica',
                    name      : 'tipoPessoa',
                    inputValue: 'cnpj'
                }
            ],
            onChange: function(field){
            	var novoValor = field.tipoPessoa;
            	if (!Ext.isArray(novoValor)) {
            		if (novoValor == 'cpf') {
            		var cpf = Ext.ComponentQuery.query('cpffield')[0];
            		var cnpj = Ext.ComponentQuery.query('cnpjfield')[0];
            		cpf.setVisible(true);
            		cnpj.setVisible(false);
            	} else {
            		var cpf = Ext.ComponentQuery.query('cpffield')[0];
            		var cnpj = Ext.ComponentQuery.query('cnpjfield')[0];
            		cpf.setVisible(false);
            		cnpj.setVisible(true);
            	}
            	}
            }
        },
		{
			fieldLabel: 'CPF',
			name: 'cpf',
			xtype: 'cpffield',
			hidden: false
		},{
			fieldLabel: 'CNPJ',
			name: 'cpnj',
			xtype: 'cnpjfield',
			hidden: true
		}]
	});

});

Download do código fonte:

Você pode fazer o download do código fonte completo no meu repositório do github: https://github.com/loiane/extjs4-validacao-cpf-cnpj

Demo:

Quer ver esse exemplo funcionando? Clique no link: http://www.loiane.com/extjs/extjs4-validacao-cpf-cnpj/

Até a próxima!

Por exemplo, veja o grid abaixo:

Na descrição queremos exibir o seguinte conteúdo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.

Bem grande para apenas uma linha não é mesmo?

O que podemos então fazer para que o grid exiba todo esse conteúdo acima?

Basta acrescentar o seguinte css no seu projeto:

.x-grid-row .x-grid-cell-inner {
	white-space: normal;
}
.x-grid-row-over .x-grid-cell-inner {
	font-weight: bold;
	white-space: normal;
}

E a grid irá ficar assim:

Vamos ver como fica o código completo apresentado nesse post:

Código ExtJS 4:

Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);

Ext.define('Post', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'post'},
       {name: 'desc'}
    ]
});

Ext.onReady(function() {

    // sample static data for the store
    var myData = [
        ['ExtJS 4 Grid Multiline Row',
        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh,'+
        'sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis,'+
        'interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada,'+
        'libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non'+
        'sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.'+
		'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui,'+
		'consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed,'+
		'luctus eu,'+
		'massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.']
    ];

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        model: 'Post',
        data: myData
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        collapsible: true,
        multiSelect: true,
        columns: [
            {
                text     : 'Post',
          		width    : 150,
                sortable : false,
                dataIndex: 'post'
            },
            {
                text     : 'Description',
                flex     : 1,
                sortable : false,
                dataIndex: 'desc'
            }
        ],
        height: 200,
        width: 600,
        title: 'Array Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        }
    });
});

Código HTML:

<html>
<head>
	<title>Ext JS 4 Examples - loiane.com</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all.js"></script>

    <!-- App Files -->
    <script type="text/javascript" src="app.js"></script>

    <style type="text/css">
	.x-grid-row .x-grid-cell-inner {
		white-space: normal;
	}
	.x-grid-row-over .x-grid-cell-inner {
		font-weight: bold;
		white-space: normal;
	}
    </style>

</head>
<body>
	<div id="grid-example" style="padding:20px;"></div>
</body>
</html>

Download do Código Fonte:

Você pode fazer o download do código fonte completo através dos meu repositório do Github: https://github.com/loiane/extjs4-grid-multiline-row

Demo:

Para ver esse projeto rodando, acesse o link: http://loiane.com/extjs/extjs4-grid-multiline-row

Até a próxima!

Vamos ao código então!

Estrutura do Projeto

Model – Contact

Ext.define('ExtMVC.model.Contact',{
    extend: 'Ext.data.Model',
    fields: [
        {name: 'first', mapping: 'name > first'},
        {name: 'last', mapping: 'name > last'},
        'company',
        'email',
        'state',
        {name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
    ]
});

Model – FieldError

Ext.define('ExtMVC.model.FieldError',{
    extend: 'Ext.data.Model',
    fields: ['id', 'msg']
});

Model – State

Ext.define('ExtMVC.model.State',{
    extend: 'Ext.data.Model',
    fields: ['abbr', 'state']
});

Store – States

Ext.define('ExtMVC.store.States',{
    extend: 'Ext.data.ArrayStore',

    model: 'ExtMVC.model.State',

    data: [
        ['AL', 'Alabama', 'The Heart of Dixie'],
        ['AK', 'Alaska', 'The Land of the Midnight Sun'],
        ['AZ', 'Arizona', 'The Grand Canyon State'],
        ['AR', 'Arkansas', 'The Natural State'],
        ['CA', 'California', 'The Golden State'],
        ['CO', 'Colorado', 'The Mountain State'],
        ['CT', 'Connecticut', 'The Constitution State'],
        ['DE', 'Delaware', 'The First State'],
        ['DC', 'District of Columbia', "The Nation's Capital"],
        ['FL', 'Florida', 'The Sunshine State'],
        ['GA', 'Georgia', 'The Peach State'],
        ['HI', 'Hawaii', 'The Aloha State'],
        ['ID', 'Idaho', 'Famous Potatoes'],
        ['IL', 'Illinois', 'The Prairie State'],
        ['IN', 'Indiana', 'The Hospitality State'],
        ['IA', 'Iowa', 'The Corn State'],
        ['KS', 'Kansas', 'The Sunflower State'],
        ['KY', 'Kentucky', 'The Bluegrass State'],
        ['LA', 'Louisiana', 'The Bayou State'],
        ['ME', 'Maine', 'The Pine Tree State'],
        ['MD', 'Maryland', 'Chesapeake State'],
        ['MA', 'Massachusetts', 'The Spirit of America'],
        ['MI', 'Michigan', 'Great Lakes State'],
        ['MN', 'Minnesota', 'North Star State'],
        ['MS', 'Mississippi', 'Magnolia State'],
        ['MO', 'Missouri', 'Show Me State'],
        ['MT', 'Montana', 'Big Sky Country'],
        ['NE', 'Nebraska', 'Beef State'],
        ['NV', 'Nevada', 'Silver State'],
        ['NH', 'New Hampshire', 'Granite State'],
        ['NJ', 'New Jersey', 'Garden State'],
        ['NM', 'New Mexico', 'Land of Enchantment'],
        ['NY', 'New York', 'Empire State'],
        ['NC', 'North Carolina', 'First in Freedom'],
        ['ND', 'North Dakota', 'Peace Garden State'],
        ['OH', 'Ohio', 'The Heart of it All'],
        ['OK', 'Oklahoma', 'Oklahoma is OK'],
        ['OR', 'Oregon', 'Pacific Wonderland'],
        ['PA', 'Pennsylvania', 'Keystone State'],
        ['RI', 'Rhode Island', 'Ocean State'],
        ['SC', 'South Carolina', 'Nothing Could be Finer'],
        ['SD', 'South Dakota', 'Great Faces, Great Places'],
        ['TN', 'Tennessee', 'Volunteer State'],
        ['TX', 'Texas', 'Lone Star State'],
        ['UT', 'Utah', 'Salt Lake State'],
        ['VT', 'Vermont', 'Green Mountain State'],
        ['VA', 'Virginia', 'Mother of States'],
        ['WA', 'Washington', 'Green Tree State'],
        ['WV', 'West Virginia', 'Mountain State'],
        ['WI', 'Wisconsin', "America's Dairyland"],
        ['WY', 'Wyoming', 'Like No Place on Earth']
    ]
});

View – Form

Ext.define('ExtMVC.view.contact.ContactForm' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.contactform',

	frame: true,
    title:'XML Form',
    bodyPadding: 5,
    waitMsgTarget: true,

    fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 85,
            msgTarget: 'side'
     },

    items: [{
        xtype: 'fieldset',
        title: 'Contact Information',
        defaultType: 'textfield',
        defaults: {
            width: 280
        },
        items: [{
                fieldLabel: 'First Name',
                emptyText: 'First Name',
                name: 'first'
            }, {
                fieldLabel: 'Last Name',
                emptyText: 'Last Name',
                name: 'last'
            }, {
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, {
                xtype: 'combobox',
                fieldLabel: 'State',
                name: 'state',
                store: 'States',
                valueField: 'abbr',
                displayField: 'state',
                typeAhead: true,
                queryMode: 'local',
                emptyText: 'Select a state...'
            }, {
                xtype: 'datefield',
                fieldLabel: 'Date of Birth',
                name: 'dob',
                allowBlank: false,
                maxValue: new Date()
            }
        ]
    }],

    buttons: [{
        text: 'Load',
        action: 'load'
    }, {
        text: 'Submit',
        disabled: true,
        formBind: true,
        action: 'submit'
    }]

 });

View- Viewport

/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('ExtMVC.view.Viewport', {
    extend: 'Ext.Viewport',
    layout: 'fit',

    requires: [
        'ExtMVC.view.contact.ContactForm'
    ],

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: 'contactform',
                    reader : Ext.create('Ext.data.reader.Xml', {
                        model: 'ExtMVC.model.Contact',
                        record : 'contact',
                        successProperty: '@success'
                    }),
                    errorReader: Ext.create('Ext.data.reader.Xml', {
                        model: 'ExtMVC.model.FieldError',
                        record : 'field',
                        successProperty: '@success'
                    })
                }
            ]
        });

        me.callParent(arguments);
    }
});

Controller

Ext.define('ExtMVC.controller.Contacts', {
    extend: 'Ext.app.Controller',

    models: ['Contact', 'FieldError', 'State'],

   	stores: ['States'],

    views: ['contact.ContactForm'],

    refs: [{
        ref: 'contactForm',
        selector: 'contactform'
    }],

    init: function() {

        this.control({
        	'contactform button[action=load]': {
        		click: this.loadFormData
        	},
        	'contactform button[action=submit]': {
        		click: this.submitFormData
        	}
        });
    },

    loadFormData: function() {

    	this.getContactForm().getForm().load({
            url: 'data/xml-form-data.xml',
            waitMsg: 'Loading...'
		});
	},

	submitFormData: function() {

    	this.getContactForm().getForm().submit({
            url: 'data/xml-form-errors.xml',
            submitEmptyText: false,
            waitMsg: 'Saving Data...',

            success: function(form, action) {
               Ext.Msg.alert('Success', action.result.msg);
            },
            failure: function(form, action) {
                Ext.Msg.alert('Failed', action.result ? action.result.msg : 'No response');
            }
        });
	}
});

App.js

Ext.application({
    name: 'ExtMVC',

    controllers: [
        'Contacts'
    ],

    autoCreateViewport: true
});

Página HTML

<html>
<head>
	<title>Ext JS 4 MVC Examples - loiane.com</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>

    <!-- App Files -->
    <script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>

Download do código fonte completo

Você pode fazer o download do código fonte completo através dos meu repositório do Github: https://github.com/loiane/extjs4-mvc-ajax-xml-form

Demo

Para ver esse projeto rodando, acesse o link: http://loiane.com/extjs/extjs4-mvc-ajax-xml-form/

Todos os exemplos ExtJS 4 MVC:

http://www.loiane.com/2012/03/exemplos-sencha-extjs-4-em-mvc/

Até o próximo exemplo!

No mês de maio estarei em terras capixabas (minha terra natal querida!) na cidade do rei Roberto Carlos – Cachoeiro do Itapemirim palestrando e participando do Dev in Cachu, evento sobre TI organizado pelo NERDES (Grupo de Desenvolvedores do Espírito Santo).

O evento será realizado no dia 5 de maio (sábado) de 2012 no Centro Universitário de São Camilo, em Cachoeiro do Itapemirim.

O título na minha palestra é Desenvolvendo aplicações RIA com ExtJS 4, então vou falar sobre ExtJS 4 em geral. Se você for ao evento e quiser que eu aborde algum tópico em específico na palestra, deixe um comentário!

O evento conta ainda com nomes de peso do cenário de desenvolvimento brasileiro, como Paulo Silveira (Caelum), Franciso Souza (Globo.com), Ronaldo Ferraz (Thoughtworks), Almir Mendes (Giran), entre outros.

Outra notícia é que vou levar 2 livros meus autografados para sortear no evento!

E quem quiser adquirir o livro, entre em contato comigo que posso levar o livro e ainda dou um desconto camarada! A entrega pode ser feita sexta feira em Vitória ou no sábado em Cachu.

Na aula de hoje vamos aprender como usar o sorter e o filter, dois recursos bem legais da Store.

Quem quiser ver todas as aulas já publicadas, é só clicar aqui.

Espero que gostem dessa aula e fico no aguardo do feedback de vocês!

Requerimentos:

• Ext JS 4 SDK
• Servidor Apache.
• Editor de Texto (qualquer um de sua preferência). No vídeo usei o Sublime Text 2 (tem pra Mac OS, Windows e Linux – a versão shareware não expira!)
• Browser (de preferência Firefox com Firebug ou Chrome).
• Php + MySQL (ou outra linguagem e banco de dados de sua preferência)

Vídeo:

Vimeo: http://vimeo.com/loiane/curso-extjs4-aula24

YouTube: http://youtu.be/3DIMm2jJlKM

Código: https://github.com/loiane/curso-extjs4

Slides:

Até a próxima aula!

Devido ao número de pedidos por email que vinha recebendo para comprar meu livro, decidi fazer uma lojinha para a venda para aqueles que não possuem cartão de crédito internacional ou não querem esperar quase 2 meses para o livro chegar de alguma loja gringa.

Fiz então o pedido de alguns livros pela amazon.com – pois a entrega é mais rápida do que pela editora; e coloquei à venda na lojinha do blog.

Quem quiser obter uma cópia, o livro já vai autografado e vai todo embaladinho para não amassar. O frete também é grátis para todo o Brasil e o pagamento poder ser feito por boleto ou pelo cartão de crédito via pagseguro (também pode parcelar o livro em até 18x). O preço é 100 reais (preço do livro + impostos + frete). Tentei negociar com algumas livrarias aqui no Brasil, mas eles queriam vender o livro por 150 reais e não achei o preço justo.

Quem quiser fazer as contas para comparar, aí vai: o preço final do livro comprando com a editora fica 58,3 dólares (preço do livro + impostos + frete) x 1.84 (cotação dólar de abril 2012) = 107,27 reais. Na lojinha o livro já está aqui no Brasil (São Paulo) e despacho em até 24 horas após confirmação do pagamento.

Também tem a opção do ebook (pdf + mobi + epub) e o livro vai licenciado para o seu nome, email e endereço. Neste caso apenas sou apenas uma intermediadora com a editora, toda a compra é feita em seu nome. O livro também fica disponível na biblioteca virtual da editora, e é possível ler em um leitor feito em extjs!

Bem, em breve também vou adicionar mais ebooks (em português) que vou escrever quando tiver um tempo. Gostei da experiência de escrever livro, mas quando se tem uma editora por trás é muito burocrático e você não pode fazer nada com o livro, pois o livro não é meu, apenas tenho os direitos autorais dele. Por isso os próximos vou fazer através de produção independente.

Bem, quem se interessar, pode acessar o link loja.loiane.com.

Até a próxima!

Vamos ao código então!

Estrutura do Projeto

Model

Ext.define('Ext4Example.model.Stock', {
	extend: 'Ext.data.Model',
	fields: [
	    {name: 'company'},
        {name: 'price',      type: 'float'},
        {name: 'change',     type: 'float'},
        {name: 'pctChange',  type: 'float'},
        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
        // Rating dependent upon performance 0 = best, 2 = worst
        {name: 'rating', type: 'int', convert: function(value, record) {
            var pct = record.get('pctChange');
            if (pct < 0) return 2;
            if (pct < 1) return 1;
            return 0;
        }}
    ]
});

Store

Ext.define('Ext4Example.store.Stocks', {
    extend: 'Ext.data.ArrayStore',
    model: 'Ext4Example.model.Stock',
    data: [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
        ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
        ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
        ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
        ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
        ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
        ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
        ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
        ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
        ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
        ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
        ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
        ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
        ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
        ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
        ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
        ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
        ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
        ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
        ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
        ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
        ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
    ]
});

View – Grid

Ext.define('Ext4Example.view.stock.StockGrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.stockgrid',

    title : 'Company Data',

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    change: function(val) {
        if (val > 0) {
            return '<span style="color: green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color: red;">' + val + '</span>';
        }
        return val;
    },

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    pctChange: function(val) {
        if (val > 0) {
            return '<span style="color: green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color: red;">' + val + '%</span>';
        }
        return val;
    },

    // render rating as "A", "B" or "C" depending upon numeric value.
    rating: function(v) {
        if (v == 0) return "A";
        if (v == 1) return "B";
        if (v == 2) return "C";
    },

    viewConfig: {
        stripeRows: true
    },

    initComponent: function() {

    	this.store = 'Stocks';

    	this.columns = [{
            text     : 'Company',
            flex     : 1,
            sortable : false,
            dataIndex: 'company'
        },
        {
            text     : 'Price',
            width    : 75,
            sortable : true,
            renderer : 'usMoney',
            dataIndex: 'price'
        },
        {
            text     : 'Change',
            width    : 75,
            sortable : true,
            renderer : this.change,
            dataIndex: 'change'
        },
        {
            text     : '% Change',
            width    : 75,
            sortable : true,
            renderer : this.pctChange,
            dataIndex: 'pctChange'
        },
        {
            text     : 'Last Updated',
            width    : 85,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        },
        {
            text: 'Rating',
            width: 30,
            sortable: true,
            renderer: this.rating,
            dataIndex: 'rating'
        }];

    	this.callParent(arguments);
    }
});

View – Form

Ext.define('Ext4Example.view.stock.StockForm' ,{
    extend: 'Ext.form.FieldSet',
    alias : 'widget.stockform',

    margin: '0 0 0 10',

    title:'Company details',

    defaults: {
        width: 240,
        labelWidth: 90
    },

    defaultType: 'textfield',

    items: [{
        fieldLabel: 'Name',
        name: 'company'
    },{
        fieldLabel: 'Price',
        name: 'price'
    },{
        fieldLabel: '% Change',
        name: 'pctChange'
    },{
        xtype: 'datefield',
        fieldLabel: 'Last Updated',
        name: 'lastChange'
    }, {
        xtype: 'radiogroup',
        fieldLabel: 'Rating',
        columns: 3,
        defaults: {
            name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
        },
        items: [{
            inputValue: '0',
            boxLabel: 'A'
        }, {
            inputValue: '1',
            boxLabel: 'B'
        }, {
            inputValue: '2',
            boxLabel: 'C'
        }]
    }]
});

View – Panel

Ext.define('Ext4Example.view.stock.StockPanel' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.stockpanel',

    frame: true,
    title: 'Company Data',
    bodyPadding: 5,
    layout: 'column',    // Specifies that the items will now be arranged in columns

    fieldDefaults: {
        labelAlign: 'left',
        msgTarget: 'side'
    },

    items: [{
    	xtype: 'stockgrid',
    	columnWidth: .70
    },{
    	xtype: 'stockform',
    	columnWidth: .30
    }]

});

View- Viewport

/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('Ext4Example.view.Viewport', {
    extend: 'Ext.Viewport',
    layout: 'fit',

    requires: [
        'Ext4Example.view.stock.StockGrid',
        'Ext4Example.view.stock.StockForm'
    ],

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: 'stockpanel'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Controller

Ext.define('Ext4Example.controller.Stocks', {
    extend: 'Ext.app.Controller',

    stores: ['Stocks'],

    models: ['Stock'],

    views: ['stock.StockGrid','stock.StockForm','stock.StockPanel'],

    refs: [{
        ref: 'stockForm',
        selector: 'form'
    }],

    init: function() {

        this.control({
        	'stockgrid': {
        		selectionchange: this.gridSelectionChange,
                viewready: this.onViewReady
        	}
        });
    },

    gridSelectionChange: function(model, records) {

        if (records[0]) {
             this.getStockForm().getForm().loadRecord(records[0]);
        }
    },

    onViewReady: function(grid) {
        grid.getSelectionModel().select(0);
    }
});

App.js

Ext.application({
    name: 'Ext4Example',

    controllers: [
        'Stocks'
    ],

    autoCreateViewport: true
});

Página HTML

<html>
<head>
	<title>Ext JS 4 Examples - loiane.com</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>

    <!-- App Files -->
    <script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>

Download do código fonte completo

Você pode fazer o download do código fonte completo através dos meu repositório do Github: https://github.com/loiane/extjs4-mvc-grid-binded-form

Demo

Para ver esse projeto rodando, acesse o link: http://loiane.com/extjs/extjs4-mvc-grid-binded-form

Até o próximo exemplo!

Aproveitando que HTML 5 é um tópico super quente, resolvi postar uma tabela com a lista das tags do HTML 4 e HTML 5. A tabela abaixo lista as tags novas do HTML 5 (Versão 5), tags que continuam sendo usadas no HTML 5 (Versão 4/5) e tags que foram descontinuadas (Versão 4).

Fiz esse tabelinha para uso pessoal, mas resolvi compartilhar com vocês.

Fiz upload para o slideshare tb, caso alguém queira fazer download e imprimir, só baixar!

**atributos globais: class | contenteditable | contextmenu | dir | draggable | id| irrelevant | lang | ref | registrationmark | tabindex | template | title

Video:

Na aula de hoje vamos aprender como usar o JsonP Proxy. Vamos usar o mesmo exemplo da aula passada e vamos transformá-lo em JsonP. Vamos ver que o código do ExtJS não vai mudar muito, as mudanças maiores estão no server side – utilizamos PHP + MySQL.

O audio da aula ficou com alguns ruídos, mas nada que atrapalhe o entendimento do conteúdo.

Quem quiser ver todas as aulas já publicadas, é só clicar aqui.

Espero que gostem dessa aula e fico no aguardo do feedback de vocês!

Requerimentos:

• Ext JS 4 SDK
• Servidor Apache.
• Editor de Texto (qualquer um de sua preferência). No vídeo usei o Sublime Text 2 (tem pra Mac OS, Windows e Linux – a versão shareware não expira!)
• Browser (de preferência Firefox com Firebug ou Chrome).
• Php + MySQL (ou outra linguagem e banco de dados de sua preferência)
• Domínio diferente para fazer deploy do código server

Vídeo:

Vimeo: http://vimeo.com/loiane/curso-extjs4-aula23

YouTube: http://youtu.be/VpRcRzFBh_c

Código: https://github.com/loiane/curso-extjs4

Slides:

Até a próxima aula!

Vamos ao código então!

Estrutura do Projeto

Model

Ext.define('ExtMVC.model.ForumThread', {
    extend: 'Ext.data.Model',
    fields: [
        'title',
        'forumtitle',
        'forumid',
        'username',
        {name: 'replycount', type: 'int'},
        {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
        'lastposter',
        'excerpt',
        'threadid'
    ],
    idProperty: 'threadid'
});

Store

Ext.define('ExtMVC.store.ForumThreads', {
    extend: 'Ext.data.Store',
    model: 'ExtMVC.model.ForumThread',
    autoLoad: true,
    remoteSort: true,
    proxy: {
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        type: 'jsonp',
        url: 'http://www.sencha.com/forum/topics-browse-remote.php',
        reader: {
            root: 'topics',
            totalProperty: 'totalCount'
        },
        // sends single sort as multi parameter
        simpleSortMode: true
    },
    sorters: [{
        property: 'lastpost',
        direction: 'DESC'
    }]
});

View – Grid

Ext.define('ExtMVC.view.forumThread.ForumThreadGrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.forumthreadgrid',

    requires: 'Ext.ux.PreviewPlugin',

    title : 'ExtJS.com - Browse Forums',

    disableSelection: true,

    loadMask: true,

    viewConfig: {
        id: 'gv',
        trackOver: false,
        stripeRows: false,
        plugins: [{
            ptype: 'preview',
            bodyField: 'excerpt',
            expanded: true,
            pluginId: 'preview'
        }]
    },

    // pluggable renders
    renderTopic: function(value, p, record) {
        return Ext.String.format(
            '<strong><a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a></strong><a href="http://sencha.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
            value,
            record.data.forumtitle,
            record.getId(),
            record.data.forumid
        );
    },

    renderLast: function(value, p, r) {
        return Ext.String.format('{0}
by {1}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.get('lastposter'));
    },

    initComponent: function() {

    	this.store = 'ForumThreads';

    	this.columns = [
        {
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            renderer: this.renderTopic,
            sortable: false
        },{
            text: "Author",
            dataIndex: 'username',
            width: 100,
            hidden: true,
            sortable: true
        },{
            text: "Replies",
            dataIndex: 'replycount',
            width: 70,
            align: 'right',
            sortable: true
        },{
            id: 'last',
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 150,
            renderer: this.renderLast,
            sortable: true
        }];

         // paging bar on the bottom
        this.bbar = Ext.create('Ext.PagingToolbar', {
            store: this.store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                xtype: 'button',
                text: 'Show Preview',
                pressed: true,
                action: 'showPreview',
                enableToggle: true
            }]
        });

    	this.callParent(arguments);
    }
 });

View- Viewport

/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('ExtMVC.view.Viewport', {
    extend: 'Ext.Viewport',
    layout: 'fit',

    requires: [
        'ExtMVC.view.forumThread.ForumThreadGrid'
    ],

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: 'forumthreadgrid'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Controller

Ext.define('ExtMVC.controller.ForumThreads', {
    extend: 'Ext.app.Controller',

    stores: ['ForumThreads'],

    models: ['ForumThread'],

    views: ['forumThread.ForumThreadGrid'],

    init: function() {
    	this.control({
	        'forumthreadgrid button[action=showPreview]': {
	        	toggle: this.showPreview
	    	}
	    });
    },

    showPreview: function(btn, pressed){

        var preview = Ext.ComponentQuery.query('forumthreadgrid dataview')[0].plugins[0];

        preview.toggleExpanded(pressed);
    }
});

App.js

Ext.application({
    name: 'ExtMVC',

    paths: { 'Ext.ux': 'extjs/ux/' },

    controllers: [
        'ForumThreads'
    ],

    autoCreateViewport: true
});

Página HTML

<html>
<head>
	<title>Ext JS 4 MVC Examples - loiane.com</title>

	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

	 <style>
        .x-grid-cell-topic b {
            display: block;
        }
        .x-grid-cell-topic .x-grid-cell-inner {
            white-space: normal;
        }
        .x-grid-cell-topic a {
            color: #385F95;
            text-decoration: none;
        }
        .x-grid-cell-topic a:hover {
            text-decoration:underline;
        }
		.x-grid-cell-topic .x-grid-cell-innerf {
			padding: 5px;
		}
		.x-grid-rowbody {
	        padding: 0 5px 5px 5px;
		}
    </style>

    <script type="text/javascript" src="extjs/ext-debug.js"></script>

    <script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>

Download do código fonte completo

Você pode fazer o download do código fonte completo através dos meu repositório do Github: https://github.com/loiane/extjs4-mvc-paging-grid

Demo

Para ver esse projeto rodando, acesse o link: http://loiane.com/extjs/extjs4-mvc-paging-grid/

Até o próximo exemplo!

Fiz a enquete no twitter e facebook e vocês pediram! Em breve serão atendidos!

Na aula de hoje vamos aprender como usar o REST Proxy. Vamos usar o mesmo exemplo da aula passada e vamos transformá-lo em REST. Vamos ver que o código do ExtJS não vai mudar muito, as mudanças maiores estão no server side – utilizamos PHP + MySQL.

O exemplo em PHP está bem simples, fiz um cliente REST da forma mais simples possível no PHP, devido aos meus conhecimentos limitados na linguagem. Mas pelo que pesquisei na net, existem vários frameworks PHP que dão suporte á interface REST, que são bem mais completos e mais complexos também.

Quem quiser ver todas as aulas já publicadas, é só clicar aqui.

Espero que gostem dessa aula e fico no aguardo do feedback de vocês!

Requerimentos:

• Ext JS 4 SDK
• Servidor Apache.
• Editor de Texto (qualquer um de sua preferência). No vídeo usei o Sublime Text 2 (tem pra Mac OS, Windows e Linux – a versão shareware não expira!)
• Browser (de preferência Firefox com Firebug ou Chrome).
• Php + MySQL (ou outra linguagem e banco de dados de sua preferência)

Vídeo:

Vimeo: http://vimeo.com/loiane/curso-extjs4-aula22

YouTube: http://youtu.be/wnLpChYdcbI

Código: https://github.com/loiane/curso-extjs4

Slides:

Até a próxima aula!

O Jasmine é bem conhecido na área de testes para códigos escritos em JavaScript, mas quando estamos trabalhando com um framework, o código é um pouco mais complexo, e não queremos apenas testar e fazer asserts de valores, também queremos testar se o drag and drop está funcionando corretamente, além de outros recursos de componentes UI. Existe uma ferramenta que nos permite fazer esses testes de maneira bem simples e fácil, que se chama Siesta. O Siesta foi desenvolvido por uma empresa chamada Bryntum, e o dono dessa empresa é muito ativo na comunidade ExtJS.

O Siesta suporta fazer testes com componentes UI do ExtJS, como drag and drop, editor de grid e forms, load de grids, etc; além de também permitir testar funcionalidades da nova arquitetura do ExtJS 4: o MVC.

Além de ExtJS, o Siesta também oferece suporte a testes para JQuery e Node.js.

Eu estou usando essa ferramenta há algum tempo. Logo quando lançaram uma versão beta da ferramenta, a Bryntum me deu uma licença para testá-la (pedi gentilmente! #caradepau). Mas agora existem duas licenças: free e paga. Estou usando a versão free.

A ferramenta também permite a prática de TDD com ExtJS! Não é legal isso?

No screencast/vídeo abaixo explico um pouco sobre essa ferramenta e também faço um demo para demonstrar como é super bacana, além de explicar a diferença entra a versão free e paga.

Vimeo:

YouTube: http://youtu.be/x4np9VFvJTI

Slides:

Se você gostar do vídeo e quiser saber um pouco mais, como instalar a ferramenta, começar com os primeiros testes, deixe um feedback nos comentários desse post. Talvez possa até virar um novo curso online gratuito aqui no blog!

Até o próximo screencast!

Vamos ao código então!

Estrutura do Projeto

Model

Ext.define('ExtMVC.model.Book',{
    extend: 'Ext.data.Model',
    fields: [
        // set up the fields mapping into the xml doc
        // The first needs mapping, the others are very basic
        {name: 'Author', mapping: 'ItemAttributes > Author'},
        'Title',
        'Manufacturer',
        'ProductGroup'
    ]
});

Store

Ext.define('ExtMVC.store.Books', {
    extend: 'Ext.data.Store',
    model: 'ExtMVC.model.Book',
    autoLoad: true,
    proxy: {
        // load using HTTP
        type: 'ajax',
        url: 'data/sheldon.xml',
        // the return will be XML, so lets set up a reader
        reader: {
            type: 'xml',
            // records will have an "Item" tag
            record: 'Item',
            idProperty: 'ASIN',
            totalRecords: '@total'
        }
    }
});

View – Grid

Ext.define('ExtMVC.view.stock.BookGrid' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.bookgrid',

    title : 'XML Grid',

    initComponent: function() {

    	this.store = 'Books';

    	this.columns = [{
            text: "Author",
            flex: 1,
            dataIndex: 'Author',
            sortable: true
        },
        {
            text: "Title",
            width: 180,
            dataIndex: 'Title',
            sortable: true
        },
        {
            text: "Manufacturer",
            width: 115,
            dataIndex: 'Manufacturer',
            sortable: true
        },
        {
            text: "Product Group",
            width: 100,
            dataIndex: 'ProductGroup',
            sortable: true
        }];

    	this.callParent(arguments);
    }
});

View- Viewport

/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('ExtMVC.view.Viewport', {
    extend: 'Ext.Viewport',
    layout: 'fit',

    requires: [
        'ExtMVC.view.book.BookGrid'
    ],

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [
                {
                    xtype: 'bookgrid'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Controller

Ext.define('ExtMVC.controller.Books', {
    extend: 'Ext.app.Controller',

    stores: ['Books'],

    models: ['Book'],

    views: ['book.BookGrid'],

    init: function() {

    }
});

App.js

Ext.application({
    name: 'ExtMVC',

    controllers: [
        'Books'
    ],

    autoCreateViewport: true
});

Página HTML

<html>
<head>
	<title>Ext JS 4 MVC Examples - loiane.com</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>

    <!-- App Files -->
    <script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>

Download do código fonte completo

Você pode fazer o download do código fonte completo através dos meu repositório do Github: https://github.com/loiane/extjs4-mvc-xml-grid

Demo

Para ver esse projeto rodando, acesse o link: http://loiane.com/extjs/extjs4-mvc-xml-grid

Até o próximo exemplo!