Extjs 3.0 - FormPanel not show fields

**666ragez666** · 17 Apr 2009 6:55 PM

Ok like I suspected

Code:

// WRONG
        items: [formulario],
        // OK
        //items: formulario,

give it a try yourself to do so make a new directory under examples of the ext js sdk and put the whole code into an .html file and browse it if you uncomment items: formulario it works fine the form is showing up ...

Code:

<html>
    <head>
          <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
        <!-- overrides to base library -->
 
 
        <!-- ** Javascript ** -->
        <!-- base library -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>

    
        <script type="text/javascript">
/****************************************************************************************************************/
WI_Formulario = function( dsStore, formulario, recordData, codigo, tipo_cliente, titulo, nome_contrato ){
    WI_Formulario.superclass.constructor.call(this, {
        id: 'formulario2',
        modal: true,
        title: titulo,
        width: 950,
        height: 560,
        minWidth: 350,
        minHeight: 250,
        layout: 'fit',
        plain:true,
        closable: true,
        border: false,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: [ new FO_Formulario( formulario, recordData, codigo, tipo_cliente, titulo, nome_contrato )],
        buttons: [{
            text: 'Salvar',
            id: 'salvar',
            handler: function(){
                //if(fp.getForm().isValid() && Ext.getCmp('senha_funcionario').getValue() == Ext.getCmp('repetir_senha_funcionario').getValue() ){
                    contrato = [];
                    var dados_cliente = [];
                    //console.error(GR_Privilegio_Funcionario.getStore().getRange());
                    Ext.each(GR_Contrato_Contratado.getSelections(), function(record){
                        contrato.push(record.data);
                    });
                    dados_cliente.push(Ext.getCmp("FO_Formulario").getForm().getValues());
                    Ext.Ajax.request({
                        url: 'insert.php',
                        method:'POST',
                        params: {
                            parametro: 'Cliente', 
                            contrato: Ext.util.JSON.encode(contrato),
                            dados_cliente: Ext.util.JSON.encode(dados_cliente),
                            codigo_cliente: codigo_cliente,
                        },
                        failure:function(){
                            Ext.MessageBox.alert('Informação', 'Erro ao salvar os dados!');
                        },                        
                        success:function(){
                            WI_Cadastra_Cliente.close();
                            dsContratoContratado.reload();
                            dsStore.reload();
                            Ext.MessageBox.alert('Informação', 'Cadastro realizado com sucesso!!!');                
                        }                        
                    });
                //}
            }
        },{
            text: 'Limpar',
            id: 'limpar',
            handler: function(){
                For_Dados_Funcionario.getForm().reset();
            }
        },{
            text: 'Atualizar',
            id: 'atualizar',
            handler: function(){
                //if(fp.getForm().isValid() && Ext.getCmp('senha_funcionario').getValue() == Ext.getCmp('repetir_senha_funcionario').getValue() ){
                    contrato = [];
                    var dados_cliente = [];
                    Ext.each(GR_Contrato_Contratado.getSelections(), function(record){                
                        contrato.push(record.data);
                    });
                    dados_cliente.push(Ext.getCmp("FO_Formulario").getForm().getValues());
                    Ext.Ajax.request({
                        url: 'update.php',
                        method:'POST',
                        loadMask: {msg:'Gravando...'},
                        params: {
                            parametro: 'Cliente', 
                            contrato: Ext.util.JSON.encode(contrato),
                            dados_cliente: Ext.util.JSON.encode(dados_cliente), 
                            codigo_cliente: codigo_cliente,
                        },
                        failure:function(){
                            Ext.MessageBox.alert('Informação', 'Erro ao salvar os dados!');
                        },                        
                        success:function(){
                            WI_Cadastra_Cliente.close();
                            dsContratoContratado.reload();
                            dsStore.reload();
                            Ext.MessageBox.alert('Informação', 'Cadastro realizado com sucesso!!!');                
                        }                        
                    });
                //}
            }
        }]
    });
}
Ext.extend(WI_Formulario, Ext.Window);






/********************************* CRIAR FORMULARIOS ************************************************************/
FO_Formulario = function( formulario, recordData, codigo, tipo_cliente, titulo, nome_contrato ){
    FO_Formulario.superclass.constructor.call(this, {
        id: 'formulario',
        labelWidth: 100, // label settings here cascade unless overridden
        iconCls: 'dados_funcionario',
        title: 'Dados do Cliente',
        bodyStyle:'padding:5px 5px 0',
        frame: true,
        width: 900,
        // WRONG
        items: [formulario],
        // OK
        //items: formulario,
        /*reader : new Ext.data.JsonReader({
            root   : 'resultado',
            fields : [recordData]
        })*/
    });

    /*if( codigo > 0 ){
        Ext.getCmp("formulario").getForm().load({  url:'select.php', params:{ parametro: 'Cliente', parametro2: 'detalhe', codigo_cliente: codigo, start: 0, limit: 25 }});
    }*/
}
Ext.extend(FO_Formulario, Ext.FormPanel);
        
        
        
        Ext.onReady(function(){
  var dsCliente = new Ext.data.Store({
        baseParams: { parametro: 'Cliente'},
        remoteSort: true,
        proxy: new Ext.data.HttpProxy({
            url: 'json.json',
            method: 'post'
        }),
        reader: new Ext.data.JsonReader({
            root:'resultado',
            totalProperty: 'total',
            id:'codigo_cliente'
        },[
            {name: 'codigo_cliente', mapping: 'codigo_cliente', type: 'int'},
            {name: 'fantasia_nome', mapping:'fantasia_nome', type:'string'},
            {name: 'tipo_cliente', mapping:'tipo_cliente', type:'string'},
            {name: 'data_pagamento', mapping: 'data_pagamento', type: 'date', dateFormat: 'Y-m-d'},
            {name: 'tempo_contrato', mapping:'tempo_contrato', type:'string'},
            {name: 'vencimento_contrato', mapping:'vencimento_contrato', type: 'date', dateFormat: 'Y-m-d'},
            {name: 'telefone', mapping:'telefone', type: 'string'},
            {name: 'fax', mapping:'fax', type: 'string'}
        ])
    });
    
    var coluna = [
        new Ext.grid.RowNumberer(),
        new Ext.grid.CheckboxSelectionModel(),
        {
            id:'codigo_cliente',
            header: "Codigo Cliente",
            dataIndex: 'codigo_cliente',
            width: 220,
            hidden: true,
            sortable: true,
            type: 'int',
            align: 'center',
            hideable : false,
        },{
            header: "Fantasia / Nome",
            dataIndex: 'fantasia_nome',
            width: 100,
            sortable: true,
            type: 'string',
            align: 'center',
        },{
            header: "Tipo Cliente",
            dataIndex: 'tipo_cliente',
            width: 100,
            hidden: true,
            sortable: true,
            type: 'string',
            align: 'center',
            hideable : false
        },{            
            header: "Data Pagamento",
            dataIndex: 'data_pagamento',
            
            width: 100,
            sortable: true,
            type: 'date',
            align: 'center'
        },{
            header: "Tempo Contrato",
            dataIndex: 'tempo_contrato',
            width: 100,
            sortable: true,
            type: 'string',
            align: 'center'
        },{
            header: "Venc. Contrato",
            dataIndex: 'vencimento_contrato',
            
            width: 100,
            sortable: true,
            type: 'date',
            align: 'center'
        },{
            header: "Telefone Contato",
            dataIndex: 'telefone',
            width: 110,
            sortable: true,
            type: 'string',
            align: 'center'
        },{
            header: "Fax",
            dataIndex: 'fax',
            width: 110,
            sortable: true,
            type: 'string',
            align: 'center'
        }
    ];    
    
    var Me_Busca =  new Ext.menu.Menu({
        id: 'Menu_Busca',
        items: [{
            text: 'Codigo Cliente',
            group: 'buscar_cliente',
            value: 'codigo_cliente',
            checked: false,
            checkHandler: onItemCheck_Cliente,
        }, {
            text: 'CPF/CNPJ do Cliente',
            group: 'buscar_cliente',
            value: 'cnpj_cpf',
            checked: false,
            checkHandler: onItemCheck_Cliente,
        }, {
            text: 'Fantasia/Nome do Cliente',
            group: 'buscar_cliente',
            value: 'fantasia_nome',
            checked: false,
            checkHandler: onItemCheck_Cliente,
        }]
    });
    
    function onItemCheck_Cliente(item, checked){
        Ext.getCmp("txt_campo").setValue('');
        Ext.getCmp("txt_campo").setValue(item.value);
        Ext.getCmp("txt_busca").setValue('');
        Ext.getCmp("txt_busca").focus();
    }

var formulario = [{
        xtype:'fieldset',
        title: 'Dados do Cliente',
        autoHeight:true,
        defaults: {width: 210},
        layout:'column',
        items:[{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'razao_social',
                fieldLabel: 'Razao Social',
                name: 'razao_social',
                id: 'razao_social',
                type: 'string',
                anchor:'95%'
            }]
        },{        
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'fantasia_nome',
                fieldLabel: 'Fantasia / Nome',
                name: 'fantasia_nome',
                id: 'fantasia_nome',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'cnpj_cpf',
                fieldLabel: 'CNPJ / CPF',
                name: 'cnpj_cpf',
                id: 'cnpj_cpf',
                //plugins: [new Ext.ux.InputTextMask('99.999.999/9999-99', true)],
                type: 'string',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        //validarCNPJ("cliente");
                    }
                },
                anchor:'95%'                            
            }]            
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'cep',
                fieldLabel: 'CEP',
                name: 'cep_cliente',
                id: 'cep_cliente',
                //plugins: [new Ext.ux.InputTextMask('99999-999', true)],
                type: 'string',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        getEndereco('cliente');
                    }
                },
                anchor:'95%'                            
            }]            
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'endereco',
                fieldLabel: 'Endereço',
                name: 'endereco_cliente',
                id: 'endereco_cliente',
                type: 'string',
                anchor:'95%'        
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{            
                xtype:'textfield',
                dataIndex: 'bairro',
                fieldLabel: 'Bairro',
                name: 'bairro_cliente',
                id: 'bairro_cliente',
                type: 'string',
                anchor:'95%'    
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'cidade',
                fieldLabel: 'Cidade',
                name: 'cidade_cliente',
                id: 'cidade_cliente',
                type: 'string',
                anchor:'95%'            
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'estado',
                fieldLabel: 'Estado',
                name: 'estado_cliente',
                id: 'estado_cliente',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'inscricao_estadual_rg',
                fieldLabel: 'IE / RG',
                name: 'inscricao_estadual_rg',
                id: 'inscricao_estadual_rg',
                //plugins: [new Ext.ux.InputTextMask('999.999.999.999', false)],
                type: 'string',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        //if( !CheckIE( Ext.getCmp("inscricao_estadual_cliente").getValue(), Ext.getCmp("estado_cliente").getValue()) )
                        //alert("Inscrição Estadual INVÁLIDA!!!");
                    }
                },
                anchor:'95%'                            
            }]            
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'telefone',
                fieldLabel: 'Tel. Contato',
                //plugins: [new Ext.ux.InputTextMask('(99) 9999-9999', true)],                        
                name: 'telefone',
                id: 'telefone',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'telefone_contato',
                fieldLabel: 'Tel. Contato',
                //plugins: [new Ext.ux.InputTextMask('(99) 9999-9999', true)],
                name: 'telefone_contato',
                id: 'telefone_contato',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'fax',
                fieldLabel: 'Fax',
                //plugins: [new Ext.ux.InputTextMask('(99) 9999-9999', true)],
                name: 'fax',
                id: 'fax',
                type: 'string',
                anchor:'95%'
            }]
        }]
    },{
        xtype:'fieldset',
        title: 'Dados do Contrato',
        autoHeight:true,
        defaults: {width: 210},
        style: 'margin-top: 10px',
        layout:'column',        
        items:[{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'datefield',
                dataIndex: 'data_pagamento',
                fieldLabel: 'Data',
                name: 'data_pagamento',
                id: 'data_pagamento',
                readOnly: true,
                type: 'date',
                anchor:'95%',
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'tempo_contrato',
                fieldLabel: 'Tempo Contrato',
                name: 'tempo_contrato',
                id: 'tempo_contrato',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        var data_pagamento = Ext.getCmp("data_pagamento").getValue();
                        var tempo_contrato = Ext.getCmp("tempo_contrato").getValue();
                        Ext.getCmp("vencimento_contrato").setValue(addDate(data_pagamento, tempo_contrato ));
                        Ext.getCmp("tempo_contrato").setValue( tempo_contrato.replace( /\D+/gi ,"" ));
                    }
                },                            
                anchor:'95%'                
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items:[{
                xtype:'datefield',
                type : 'date',
                dataIndex: 'vencimento_contrato',
                fieldLabel: 'Venc. Contrato',
                //plugins: [new Ext.ux.InputTextMask('99/99/9999', true)],                        
                readOnly: true,
                name: 'vencimento_contrato',
                id: 'vencimento_contrato',
                align: 'center',                
                anchor:'95%'                
            }]
        }]
    }];

    
    var recordData = [{
            name    : 'nome_contrato',
            mapping : 'nome_contrato',
        },{
            name    : 'data_pagamento',
            mapping : 'data_pagamento',
            type    : 'date',
            dateFormat: 'Y-m-d',
        },{
            name    : 'tempo_contrato',
            mapping : 'tempo_contrato',
        },{
            name    : 'vencimento_contrato',
            mapping : 'vencimento_contrato',
        },{
            name    : 'tipo_cliente',
            mapping : 'tipo_cliente',
        },{        
            name    : 'razao_social',
            mapping : 'razao_social',
        },{
            name    : 'fantasia_nome',
            mapping : 'fantasia_nome',
        },{
            name    : 'cnpj_cpf',
            mapping : 'cnpj_cpf',
        },{
            name    : 'inscricao_estadual_rg',
            mapping : 'inscricao_estadual_rg',
        },{
            name    : 'endereco',
            mapping : 'endereco'
        },{
            name    : 'cidade',
            mapping    : 'cidade'
        },{
            name    : 'estado',
            mapping : 'estado',
        },{
            name    : 'bairro',
            mapping : 'bairro',
        },{
            name    : 'cep',
            mapping : 'cep',
        },{    
            name    : 'telefone',
            mapping : 'telefone',
        },{
            name    : 'telefone_contato',
            mapping : 'telefone_contato',
        },{
            name    : 'fax',
            mapping : 'fax',
        }
    ];
 
 var win = new WI_Formulario( dsCliente, formulario, recordData, '1', 'type', 'Editar Cliente name', 'contrato');
 win.show();
 
            
}); //end onReady


    
    
    
        
        </script>
</head>
<body>

</body>
</html>

**Rafael** · 17 Apr 2009 6:56 PM

for GR_GridPrincipal

Code:

({"total":"3","resultado":[{"codigo_cliente":"1","fantasia_nome":"Atera Informatica","telefone":"(02
) 1321-3213","data_pagamento":"1999-12-31","tempo_contrato":"0","vencimento_contrato":"2009-12-31","fax"
:"(01) 3213-2132","tipo_cliente":"Pessoa Fisica"},{"codigo_cliente":"2","fantasia_nome":"Golive","telefone"
:"(32) 1321-3213","data_pagamento":"0000-00-00","tempo_contrato":"10","vencimento_contrato":"0000-00-00"
,"fax":"(31) 3213-2132","tipo_cliente":"Pessoa Juridica"},{"codigo_cliente":"3","fantasia_nome":"Autobyte"
,"telefone":"(32) 1321-3213","data_pagamento":"0000-00-00","tempo_contrato":"2321321321","vencimento_contrato"
:"0000-00-00","fax":"(31) 3213-2132","tipo_cliente":"Pessoa Juridica"}]})

FO_Formulario

Code:

({"total":"1","resultado":[{"codigo_cliente":"1","status_cliente":"A","data_pagamento":"1999-12-31","tempo_contrato"
:"0","vencimento_contrato":"2009-12-31","codigo_tipo_cliente":"1","razao_social":"Atera Informatica"
,"fantasia_nome":"Atera Informatica","cnpj_cpf":"02.132.132\/3232-10","inscricao_estadual_rg":"013.213
.213.212","endereco":"Rua: Oliveira Alves","cidade":"S\u00e3o Paulo","estado":"SP","bairro":"Ipiranga"
,"cep":"04210-060","telefone":"(02) 1321-3213","telefone_contato":"(02) 1321-3213","fax":"(01) 3213-2132"
,"tipo_cliente":"Pessoa Fisica"}]})

man please look at too reader of FO_Formulario

**666ragez666** · 17 Apr 2009 7:04 PM

you mean loading a record in the form ?

**shibubh** · 17 Apr 2009 7:10 PM

Originally Posted by Rafael

for GR_GridPrincipal

Code:

({"total":"3","resultado":[{"codigo_cliente":"1","fantasia_nome":"Atera Informatica","telefone":"(02
) 1321-3213","data_pagamento":"1999-12-31","tempo_contrato":"0","vencimento_contrato":"2009-12-31","fax"
:"(01) 3213-2132","tipo_cliente":"Pessoa Fisica"},{"codigo_cliente":"2","fantasia_nome":"Golive","telefone"
:"(32) 1321-3213","data_pagamento":"0000-00-00","tempo_contrato":"10","vencimento_contrato":"0000-00-00"
,"fax":"(31) 3213-2132","tipo_cliente":"Pessoa Juridica"},{"codigo_cliente":"3","fantasia_nome":"Autobyte"
,"telefone":"(32) 1321-3213","data_pagamento":"0000-00-00","tempo_contrato":"2321321321","vencimento_contrato"
:"0000-00-00","fax":"(31) 3213-2132","tipo_cliente":"Pessoa Juridica"}]})

FO_Formulario

Code:

({"total":"1","resultado":[{"codigo_cliente":"1","status_cliente":"A","data_pagamento":"1999-12-31","tempo_contrato"
:"0","vencimento_contrato":"2009-12-31","codigo_tipo_cliente":"1","razao_social":"Atera Informatica"
,"fantasia_nome":"Atera Informatica","cnpj_cpf":"02.132.132\/3232-10","inscricao_estadual_rg":"013.213
.213.212","endereco":"Rua: Oliveira Alves","cidade":"S\u00e3o Paulo","estado":"SP","bairro":"Ipiranga"
,"cep":"04210-060","telefone":"(02) 1321-3213","telefone_contato":"(02) 1321-3213","fax":"(01) 3213-2132"
,"tipo_cliente":"Pessoa Fisica"}]})

man please look at too reader of FO_Formulario

if this is your json data then verify this with

http://www.jslint.com/

**Rafael** · 17 Apr 2009 7:12 PM

yes

Code:

FO_Formulario = function( formulario, recordData, codigo, tipo_cliente, titulo, nome_contrato ){
    FO_Formulario.superclass.constructor.call(this, {
        id: 'formulario',
        labelWidth: 100, // label settings here cascade unless overridden
        iconCls: 'dados_funcionario',
        title: 'Dados do Cliente',
        bodyStyle:'padding:5px 5px 0',
        frame: true,
        width: 900,
        items: [formulario],
        reader : new Ext.data.JsonReader({
            root   : 'resultado',
            fields : [recordData]
        })
    });

    if( codigo > 0 ){
        Ext.getCmp("formulario").getForm().load({  url:'select.php', params:{ parametro: 'Cliente', parametro2: 'detalhe', codigo_cliente: codigo, start: 0, limit: 25 }});
    }
}
Ext.extend(FO_Formulario, Ext.FormPanel);

**666ragez666** · 17 Apr 2009 7:13 PM

same recordData is already an array so you don't need the [], see the attached code the form loads ....

json.json

Code:

{
    "total": "1",
    "resultado": [{
        "codigo_cliente": "1",
        "status_cliente": "A",
        "data_pagamento": "1999-12-31",
        "tempo_contrato": "0",
        "vencimento_contrato": "2009-12-31",
        "codigo_tipo_cliente": "1",
        "razao_social": "Atera Informatica",
        "fantasia_nome": "Atera Informatica",
        "cnpj_cpf": "02.132.132\/3232-10",
        "inscricao_estadual_rg": "013.213\n.213.212",
        "endereco": "Rua: Oliveira Alves",
        "cidade": "S\u00e3o Paulo",
        "estado": "SP",
        "bairro": "Ipiranga",
        "cep": "04210-060",
        "telefone": "(02) 1321-3213",
        "telefone_contato": "(02) 1321-3213",
        "fax": "(01) 3213-2132",
        "tipo_cliente": "Pessoa Fisica"
    }]
}

Code:

<html>
    <head>
          <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
        <!-- overrides to base library -->
 
 
        <!-- ** Javascript ** -->
        <!-- base library -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all-debug.js"></script>

    
        <script type="text/javascript">
/****************************************************************************************************************/
WI_Formulario = function( dsStore, formulario, recordData, codigo, tipo_cliente, titulo, nome_contrato ){
    WI_Formulario.superclass.constructor.call(this, {
        id: 'formulario2',
        modal: true,
        title: titulo,
        width: 950,
        height: 560,
        minWidth: 350,
        minHeight: 250,
        layout: 'fit',
        plain:true,
        closable: true,
        border: false,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: [ new FO_Formulario( formulario, recordData, codigo, tipo_cliente, titulo, nome_contrato )],
        buttons: [{
            text: 'Salvar',
            id: 'salvar',
            handler: function(){
                //if(fp.getForm().isValid() && Ext.getCmp('senha_funcionario').getValue() == Ext.getCmp('repetir_senha_funcionario').getValue() ){
                    contrato = [];
                    var dados_cliente = [];
                    //console.error(GR_Privilegio_Funcionario.getStore().getRange());
                    Ext.each(GR_Contrato_Contratado.getSelections(), function(record){
                        contrato.push(record.data);
                    });
                    dados_cliente.push(Ext.getCmp("FO_Formulario").getForm().getValues());
                    Ext.Ajax.request({
                        url: 'insert.php',
                        method:'POST',
                        params: {
                            parametro: 'Cliente', 
                            contrato: Ext.util.JSON.encode(contrato),
                            dados_cliente: Ext.util.JSON.encode(dados_cliente),
                            codigo_cliente: codigo_cliente,
                        },
                        failure:function(){
                            Ext.MessageBox.alert('Informação', 'Erro ao salvar os dados!');
                        },                        
                        success:function(){
                            WI_Cadastra_Cliente.close();
                            dsContratoContratado.reload();
                            dsStore.reload();
                            Ext.MessageBox.alert('Informação', 'Cadastro realizado com sucesso!!!');                
                        }                        
                    });
                //}
            }
        },{
            text: 'Limpar',
            id: 'limpar',
            handler: function(){
                For_Dados_Funcionario.getForm().reset();
            }
        },{
            text: 'Atualizar',
            id: 'atualizar',
            handler: function(){
                //if(fp.getForm().isValid() && Ext.getCmp('senha_funcionario').getValue() == Ext.getCmp('repetir_senha_funcionario').getValue() ){
                    contrato = [];
                    var dados_cliente = [];
                    Ext.each(GR_Contrato_Contratado.getSelections(), function(record){                
                        contrato.push(record.data);
                    });
                    dados_cliente.push(Ext.getCmp("FO_Formulario").getForm().getValues());
                    Ext.Ajax.request({
                        url: 'update.php',
                        method:'POST',
                        loadMask: {msg:'Gravando...'},
                        params: {
                            parametro: 'Cliente', 
                            contrato: Ext.util.JSON.encode(contrato),
                            dados_cliente: Ext.util.JSON.encode(dados_cliente), 
                            codigo_cliente: codigo_cliente,
                        },
                        failure:function(){
                            Ext.MessageBox.alert('Informação', 'Erro ao salvar os dados!');
                        },                        
                        success:function(){
                            WI_Cadastra_Cliente.close();
                            dsContratoContratado.reload();
                            dsStore.reload();
                            Ext.MessageBox.alert('Informação', 'Cadastro realizado com sucesso!!!');                
                        }                        
                    });
                //}
            }
        }]
    });
}
Ext.extend(WI_Formulario, Ext.Window);






/********************************* CRIAR FORMULARIOS ************************************************************/
FO_Formulario = function( formulario, recordData, codigo, tipo_cliente, titulo, nome_contrato ){
    FO_Formulario.superclass.constructor.call(this, {
        id: 'formulario',
        labelWidth: 100, // label settings here cascade unless overridden
        iconCls: 'dados_funcionario',
        title: 'Dados do Cliente',
        bodyStyle:'padding:5px 5px 0',
        frame: true,
        width: 900,
        // WRONG
        //items: [formulario],
        // OK
        items: formulario,
        reader : new Ext.data.JsonReader({
            root   : 'resultado',
            fields : recordData
        })
    });

    if( codigo > 0 ){
        this.getForm().load({  url:'json.json', params:{ parametro: 'Cliente', parametro2: 'detalhe', codigo_cliente: codigo, start: 0, limit: 25 }});
    }
}
Ext.extend(FO_Formulario, Ext.FormPanel);
        
        
        
        Ext.onReady(function(){
  var dsCliente = new Ext.data.Store({
        baseParams: { parametro: 'Cliente'},
        remoteSort: true,
        proxy: new Ext.data.HttpProxy({
            url: 'json.json',
            method: 'post'
        }),
        reader: new Ext.data.JsonReader({
            root:'resultado',
            totalProperty: 'total',
            id:'codigo_cliente'
        },[
            {name: 'codigo_cliente', mapping: 'codigo_cliente', type: 'int'},
            {name: 'fantasia_nome', mapping:'fantasia_nome', type:'string'},
            {name: 'tipo_cliente', mapping:'tipo_cliente', type:'string'},
            {name: 'data_pagamento', mapping: 'data_pagamento', type: 'date', dateFormat: 'Y-m-d'},
            {name: 'tempo_contrato', mapping:'tempo_contrato', type:'string'},
            {name: 'vencimento_contrato', mapping:'vencimento_contrato', type: 'date', dateFormat: 'Y-m-d'},
            {name: 'telefone', mapping:'telefone', type: 'string'},
            {name: 'fax', mapping:'fax', type: 'string'}
        ])
    });
    
    var coluna = [
        new Ext.grid.RowNumberer(),
        new Ext.grid.CheckboxSelectionModel(),
        {
            id:'codigo_cliente',
            header: "Codigo Cliente",
            dataIndex: 'codigo_cliente',
            width: 220,
            hidden: true,
            sortable: true,
            type: 'int',
            align: 'center',
            hideable : false,
        },{
            header: "Fantasia / Nome",
            dataIndex: 'fantasia_nome',
            width: 100,
            sortable: true,
            type: 'string',
            align: 'center',
        },{
            header: "Tipo Cliente",
            dataIndex: 'tipo_cliente',
            width: 100,
            hidden: true,
            sortable: true,
            type: 'string',
            align: 'center',
            hideable : false
        },{            
            header: "Data Pagamento",
            dataIndex: 'data_pagamento',
            
            width: 100,
            sortable: true,
            type: 'date',
            align: 'center'
        },{
            header: "Tempo Contrato",
            dataIndex: 'tempo_contrato',
            width: 100,
            sortable: true,
            type: 'string',
            align: 'center'
        },{
            header: "Venc. Contrato",
            dataIndex: 'vencimento_contrato',
            
            width: 100,
            sortable: true,
            type: 'date',
            align: 'center'
        },{
            header: "Telefone Contato",
            dataIndex: 'telefone',
            width: 110,
            sortable: true,
            type: 'string',
            align: 'center'
        },{
            header: "Fax",
            dataIndex: 'fax',
            width: 110,
            sortable: true,
            type: 'string',
            align: 'center'
        }
    ];    
    
    var Me_Busca =  new Ext.menu.Menu({
        id: 'Menu_Busca',
        items: [{
            text: 'Codigo Cliente',
            group: 'buscar_cliente',
            value: 'codigo_cliente',
            checked: false,
            checkHandler: onItemCheck_Cliente,
        }, {
            text: 'CPF/CNPJ do Cliente',
            group: 'buscar_cliente',
            value: 'cnpj_cpf',
            checked: false,
            checkHandler: onItemCheck_Cliente,
        }, {
            text: 'Fantasia/Nome do Cliente',
            group: 'buscar_cliente',
            value: 'fantasia_nome',
            checked: false,
            checkHandler: onItemCheck_Cliente,
        }]
    });
    
    function onItemCheck_Cliente(item, checked){
        Ext.getCmp("txt_campo").setValue('');
        Ext.getCmp("txt_campo").setValue(item.value);
        Ext.getCmp("txt_busca").setValue('');
        Ext.getCmp("txt_busca").focus();
    }

var formulario = [{
        xtype:'fieldset',
        title: 'Dados do Cliente',
        autoHeight:true,
        defaults: {width: 210},
        layout:'column',
        items:[{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'razao_social',
                fieldLabel: 'Razao Social',
                name: 'razao_social',
                id: 'razao_social',
                type: 'string',
                anchor:'95%'
            }]
        },{        
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'fantasia_nome',
                fieldLabel: 'Fantasia / Nome',
                name: 'fantasia_nome',
                id: 'fantasia_nome',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'cnpj_cpf',
                fieldLabel: 'CNPJ / CPF',
                name: 'cnpj_cpf',
                id: 'cnpj_cpf',
                //plugins: [new Ext.ux.InputTextMask('99.999.999/9999-99', true)],
                type: 'string',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        //validarCNPJ("cliente");
                    }
                },
                anchor:'95%'                            
            }]            
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'cep',
                fieldLabel: 'CEP',
                name: 'cep_cliente',
                id: 'cep_cliente',
                //plugins: [new Ext.ux.InputTextMask('99999-999', true)],
                type: 'string',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        getEndereco('cliente');
                    }
                },
                anchor:'95%'                            
            }]            
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'endereco',
                fieldLabel: 'Endereço',
                name: 'endereco_cliente',
                id: 'endereco_cliente',
                type: 'string',
                anchor:'95%'        
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{            
                xtype:'textfield',
                dataIndex: 'bairro',
                fieldLabel: 'Bairro',
                name: 'bairro_cliente',
                id: 'bairro_cliente',
                type: 'string',
                anchor:'95%'    
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'cidade',
                fieldLabel: 'Cidade',
                name: 'cidade_cliente',
                id: 'cidade_cliente',
                type: 'string',
                anchor:'95%'            
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'estado',
                fieldLabel: 'Estado',
                name: 'estado_cliente',
                id: 'estado_cliente',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'inscricao_estadual_rg',
                fieldLabel: 'IE / RG',
                name: 'inscricao_estadual_rg',
                id: 'inscricao_estadual_rg',
                //plugins: [new Ext.ux.InputTextMask('999.999.999.999', false)],
                type: 'string',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        //if( !CheckIE( Ext.getCmp("inscricao_estadual_cliente").getValue(), Ext.getCmp("estado_cliente").getValue()) )
                        //alert("Inscrição Estadual INVÁLIDA!!!");
                    }
                },
                anchor:'95%'                            
            }]            
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'telefone',
                fieldLabel: 'Tel. Contato',
                //plugins: [new Ext.ux.InputTextMask('(99) 9999-9999', true)],                        
                name: 'telefone',
                id: 'telefone',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'telefone_contato',
                fieldLabel: 'Tel. Contato',
                //plugins: [new Ext.ux.InputTextMask('(99) 9999-9999', true)],
                name: 'telefone_contato',
                id: 'telefone_contato',
                type: 'string',
                anchor:'95%'
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'fax',
                fieldLabel: 'Fax',
                //plugins: [new Ext.ux.InputTextMask('(99) 9999-9999', true)],
                name: 'fax',
                id: 'fax',
                type: 'string',
                anchor:'95%'
            }]
        }]
    },{
        xtype:'fieldset',
        title: 'Dados do Contrato',
        autoHeight:true,
        defaults: {width: 210},
        style: 'margin-top: 10px',
        layout:'column',        
        items:[{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'datefield',
                dataIndex: 'data_pagamento',
                fieldLabel: 'Data',
                name: 'data_pagamento',
                id: 'data_pagamento',
                readOnly: true,
                type: 'date',
                anchor:'95%',
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items: [{
                xtype:'textfield',
                dataIndex: 'tempo_contrato',
                fieldLabel: 'Tempo Contrato',
                name: 'tempo_contrato',
                id: 'tempo_contrato',
                enableKeyEvents: true,
                listeners: {
                    "blur": function(){
                        var data_pagamento = Ext.getCmp("data_pagamento").getValue();
                        var tempo_contrato = Ext.getCmp("tempo_contrato").getValue();
                        Ext.getCmp("vencimento_contrato").setValue(addDate(data_pagamento, tempo_contrato ));
                        Ext.getCmp("tempo_contrato").setValue( tempo_contrato.replace( /\D+/gi ,"" ));
                    }
                },                            
                anchor:'95%'                
            }]
        },{
            columnWidth:.3,
            layout: 'form',
            items:[{
                xtype:'datefield',
                type : 'date',
                dataIndex: 'vencimento_contrato',
                fieldLabel: 'Venc. Contrato',
                //plugins: [new Ext.ux.InputTextMask('99/99/9999', true)],                        
                readOnly: true,
                name: 'vencimento_contrato',
                id: 'vencimento_contrato',
                align: 'center',                
                anchor:'95%'                
            }]
        }]
    }];

    
    var recordData = [{
            name    : 'nome_contrato',
            mapping : 'nome_contrato',
        },{
            name    : 'data_pagamento',
            mapping : 'data_pagamento',
            type    : 'date',
            dateFormat: 'Y-m-d',
        },{
            name    : 'tempo_contrato',
            mapping : 'tempo_contrato',
        },{
            name    : 'vencimento_contrato',
            mapping : 'vencimento_contrato',
        },{
            name    : 'tipo_cliente',
            mapping : 'tipo_cliente',
        },{        
            name    : 'razao_social',
            mapping : 'razao_social',
        },{
            name    : 'fantasia_nome',
            mapping : 'fantasia_nome',
        },{
            name    : 'cnpj_cpf',
            mapping : 'cnpj_cpf',
        },{
            name    : 'inscricao_estadual_rg',
            mapping : 'inscricao_estadual_rg',
        },{
            name    : 'endereco',
            mapping : 'endereco'
        },{
            name    : 'cidade',
            mapping    : 'cidade'
        },{
            name    : 'estado',
            mapping : 'estado',
        },{
            name    : 'bairro',
            mapping : 'bairro',
        },{
            name    : 'cep',
            mapping : 'cep',
        },{    
            name    : 'telefone',
            mapping : 'telefone',
        },{
            name    : 'telefone_contato',
            mapping : 'telefone_contato',
        },{
            name    : 'fax',
            mapping : 'fax',
        }
    ];
 
 var win = new WI_Formulario( dsCliente, formulario, recordData, 1, 'type', 'Editar Cliente name', 'contrato');
 win.show();
 
            
}); //end onReady


    
    
    
        
        </script>
</head>
<body>

</body>
</html>

**Rafael** · 17 Apr 2009 7:20 PM

is here work, but this method i do is wrong ?

**666ragez666** · 17 Apr 2009 7:30 PM

I don't know exactly, just one piece of advice. I think you should try to break your application in smaller part and make kind of test cases everywhere you can. Like here, just make a single page which load your form with some fakedata. When you are sure the form is working properly integrate it to the rest of the application.

Debugging in javascript is quiet tedious time to time, so by making such "test case" you sometimes same hours of debugging because problems become simpler.

Like the previous poster mentioned you json was broken also something you should check. What are you using on server side php ?

Other remark, JsonReader in the form but wouldn't much smarter to pass an extracted record from the grid and directly load it via

Code:

this.getForm().loadRecord(record);

It would save a client-server roundtrip.

**Rafael** · 17 Apr 2009 7:35 PM

then i try if only one script and work, but i use more have a error ct is null

**666ragez666** · 17 Apr 2009 7:40 PM

I think it's related to another component

Extjs 3.0 - FormPanel not show fields

Thread Tools

Search Thread

Display

same

same