PDA

View Full Version : Extjs 3.0 - FormPanel not show fields



Rafael
17 Apr 2009, 2:18 PM
The all parameter correct but dont show fields in Extend FormPanel.
The probleman in items of Extend Ext.Formpanel.



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%'
}]
}]
}];



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 )],




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, 5:39 PM
Looking at your code formulario is already an array so I think you should replace

items: [formulario],by

items: formulario,

on the FO_Formulario form, probably same for the recordData if it's already an array don't it back into another array.

Rafael
17 Apr 2009, 5:47 PM
if i use
items: formulario,

had a error :


ct is null

666ragez666
17 Apr 2009, 5:49 PM
hmm can you simplify the form as much as possible like a simple textbox. If the simplified version works there is something wrong with your formulario array.

Rafael
17 Apr 2009, 5:51 PM
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'
}
];

666ragez666
17 Apr 2009, 5:58 PM
be careful with "," if you do something like this


var foobar = [{
foo: 'bar',
bar: 'foo',
}]
the second "," would make IE crash

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'
}
];

Rafael
17 Apr 2009, 6:04 PM
I made what you advised to me, I removed the recordData to test and I continue problem the same

666ragez666
17 Apr 2009, 6:07 PM
can your put together all your code in a single file has advise there (http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase). if you post it, I would take the time to see what you've done wrong ;)

Rafael
17 Apr 2009, 6:16 PM
index.php


<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/xtheme-blue.css" />
<link href="css/portal.css" rel="stylesheet">
<link href="css/grouptabs.css" rel="stylesheet">

<!-- Load ExtJS -->
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-all-debug.js"></script>

<script src="js/overrides.js"></script>
<script src="script/funcoes.js"></script>
<script src="script/grid_cliente.js"></script>
<script src="script/funcoes_extend.js"></script>
menu.js


var viewport = new Ext.Viewport({
layout:'fit',
items:[{
xtype: 'grouptabpanel',
tabWidth: 130,
activeGroup: 0,
items: [{
mainItem: 1,
items: [{
title: 'Cliente',
layout: 'fit',
iconCls: 'x-icon-cliente',
tabTip: 'Formulário de Clientes',
style: 'padding: 10px;',
items: [{
layout: 'fit',
title: 'Clientes',
items: [new GR_GridPrincipal( dsCliente, coluna, Me_Busca, formulario, recordData)],
hideBorders: true
}]
},{
xtype: 'portal',
title: 'Sistema',
//tabTip: 'Sistema tabtip',
},{
title: 'Funcionarios',
iconCls: 'x-icon-funcionario',
tabTip: 'Formulário de Funcionarios',
style: 'padding: 10px;',
//html: Ext.example.shortBogusMarkup
},{
title: 'Backup',
iconCls: 'x-icon-backup',
tabTip: 'Formulário de Backup',
style: 'padding: 10px;',
//html: Ext.example.shortBogusMarkup
},{
title: 'Chamados',
iconCls: 'x-icon-chamado',
tabTip: 'Formulário de Chamados',
style: 'padding: 10px;',
//html: Ext.example.shortBogusMarkup
}]
}, {
expanded: true,
items: [{
title: 'Configuration',
iconCls: 'x-icon-configuration',
tabTip: 'Configuration tabtip',
style: 'padding: 10px;',
//html: Ext.example.shortBogusMarkup
}, {
title: 'Email Templates',
iconCls: 'x-icon-templates',
tabTip: 'Templates tabtip',
style: 'padding: 10px;',
//html: Ext.example.shortBogusMarkup
}]
}]
}]
});
grid_cliente.js


var dsCliente = new Ext.data.Store({
baseParams: { parametro: 'Cliente'},
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: '../select.php',
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',
renderer: formatDate,
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',
renderer: formatDate,
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 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 formulario = [{
xtype:'fieldset',
title: 'Dados do Cliente',
autoHeight:true,
defaults: {width: 210},
layout:'column',
items:[/*{
columnWidth:.3,
layout: 'form',
items: [{
xtype: 'combo',
fieldLabel:'Tipo Cliente',
width: 146,
loadingText : 'Carregando...',
hiddenName:'id_tipo_cliente',
id: 'codigo_tipo_cliente',
name: 'codigo_tipo_cliente',
emptyText : '-- Tipo Cliente --',
forceSelection: true,
editable: false,
//readOnly: true,
mode:'local',
store: new Ext.data.Store({
baseParams: { parametro: 'Tipo_Cliente'},
listeners:{
'load':function(){
if( tipo_cliente != "" ){
var combo = Ext.getCmp("codigo_tipo_cliente");
var rec = combo.findRecord('tipo_cliente', tipo_cliente);
combo.setValue(rec.get('codigo_tipo_cliente'));
}
}
},
proxy: new Ext.data.HttpProxy({url: 'select.php'}),
reader: new Ext.data.JsonReader({
root: 'resposta',
id: 'codigo_tipo_cliente',
fields: [
{name: 'codigo_tipo_cliente', mapping: 'codigo_tipo_cliente'},
{name: 'tipo_cliente', mapping: 'tipo_cliente'}
]
}),
autoLoad : true
}),
displayField: 'tipo_cliente',
valueField: 'codigo_tipo_cliente',
triggerAction: 'all',
listeners:{
select: function(combo, value) {
if( combo.value == 'fisica' ){
Ext.getCmp('razao_social').hide();
Ext.getCmp('fantasia_nome').setFieldLabel("Nome");
Ext.getCmp('cnpj_cpf').setFieldLabel("CPF");
Ext.getCmp('inscricao_estadual_rg').setFieldLabel("RG");
}
if( combo.value == 'juridica' ){
Ext.getCmp('razao_social').show();
Ext.getCmp('fantasia_nome').setFieldLabel("Fantasia");
Ext.getCmp('cnpj_cpf').setFieldLabel("CNPJ");
Ext.getCmp('inscricao_estadual_rg').setFieldLabel("Inscricao Estadual");
}
}
}
}]
},*/{
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%'
}]
}]
}];
funcoes_extend.js


/***************************** FUNÇÃO GLOBAL PARA GRID PRINCIPAL **********************************************/

GR_GridPrincipal = function( dsStore, coluna, Menu_Busca, formulario, recordData ){
GR_GridPrincipal.superclass.constructor.call(this, {
id: 'GidPrincipal',
store: dsStore,
sm: new Ext.grid.CheckboxSelectionModel(),
loadMask: {msg:'Carregando...'},
clicksToEdit: 1,
height: 505,
border: false,
listeners: {
rowdblclick: function( grid, rowIndex, e ) {
//if( '<?php echo $_SESSION["privilegio_cliente_editar"]; ?>' == 0 ){
if( Ext.getCmp("GidPrincipal").selModel.getCount() == 1 ){
new WI_Formulario( dsStore, formulario, recordData, dsStore.getAt(rowIndex).get('codigo_cliente'), dsStore.getAt(rowIndex).get('tipo_cliente'), 'Editar Cliente '+ dsStore.getAt(rowIndex).get('fantasia_nome'), dsStore.getAt(rowIndex).get('nome_contrato'));
//Ext.getCmp('codigo_tipo_cliente').setDisabled(true);
Ext.getCmp('limpar').setVisible(false);
Ext.getCmp('salvar').setVisible(false);
grid.getSelectionModel().clearSelections();
Ext.getCmp("formulario2").show();
}
else
Ext.MessageBox.show({
title: 'Operação Inválida',
msg: 'Escolha apenas 1 cliente para editar seu perfil!',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.WARNING
});
//}
},
},
columns: coluna,
viewConfig: { forceFit:true },
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: dsStore,
displayInfo: true,
}),
tbar: [{
text:'&nbsp;Cadastrar Cliente',
id: 'teste',
style: 'padding-left: 7px;',
iconCls:'cadastrar_cliente',
handler: function(){
/* FormularioClienteShow(0, '', '');
Ext.getCmp('atualizar').setVisible(false);
//Ext.getCmp('codigo_tipo_cliente').setValue('juridica');
Ext.getCmp('data_pagamento').setValue(getData());
*/
},
}, '-',{
text:'Editar Cliente',
style: 'padding-left: 7px;',
/*handler: function(){
if( Ext.getCmp("GidPrincipal").selModel.getCount() == 1){
var selections = Ext.getCmp("GidPrincipal").selModel.getSelections();
FormularioClienteShow( selections[0].json.codigo_cliente, dsStore.getAt(rowIndex).get('tipo_cliente'), 'Editar Cliente '+ selections[0].json.fantasia_nome, selections[0].json.codigo_contrato);
//Ext.getCmp('codigo_tipo_cliente').setDisabled(true);
Ext.getCmp('limpar').setVisible(false);
Ext.getCmp('salvar').setVisible(false);
Ext.getCmp("GidPrincipal").getSelectionModel().clearSelections();
}
else{
Ext.MessageBox.show({
title: 'Operação Inválida',
msg: 'Escolha apenas 1 cliente para editar seu perfil!',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.WARNING
});
}
},*/
tooltip:'Editar',
iconCls:'editar_cliente'
},'-',{
text:'Excluir Cliente',
tooltip:'Excluir',
iconCls:'excluir_cliente',
style: 'padding-left: 7px;',
handler: function(){
aux = 0;
var prez = [];
var selections = Ext.getCmp("GidPrincipal").selModel.getSelections();
Confirma();
function Confirma(){
if( aux < Ext.getCmp("GidPrincipal").selModel.getCount() ){
Ext.MessageBox.show({
title: 'Confirmar Exclusão',
msg: 'Tem certeza que deseja excluir o funcionário '+ selections[aux].json.fantasia_nome +' ?',
buttons: Ext.MessageBox.YESNOCANCEL,
icon: Ext.MessageBox.QUESTION,
buttonText : {
cancel : "Cancelar",
yes : "Sim",
no : "Não"
},
fn: function(btn){
if ( btn == 'yes' ){
prez.push(selections[aux].json.codigo_cliente);
aux++;
Confirma();
}
else if( btn == 'no' ){
aux++;
Confirma();
}
else if( btn == 'cancel' ){
Ext.getCmp("GidPrincipal").getSelectionModel().clearSelections();
return false;
}
},
});
}
else{
if( prez.length > 0 )
excluirRegistro( prez, "Cliente", dsStore );
Ext.getCmp("GidPrincipal").getSelectionModel().clearSelections();
}
}
}
},'-',{
text: 'Gráfico',
iconCls: 'grafico',
style: 'padding-left: 7px;',
handler: function(){
Grafico("Cliente");
},
},'-',{
text:'Busca Avançada',
iconCls: 'procurar_cliente',
style: 'padding-left: 7px;',
menu: Menu_Busca,
},{
xtype: 'hidden',
name : 'txt_campo',
id : 'txt_campo',
},{
xtype: 'searchfield',
store: dsStore,
name: 'txt_busca',
id : 'txt_busca',
onSearch: function(){
this.store.proxy.api.load = "../search.php";
this.store.load({ params: { start: 0, limit: 25, valor: Ext.getCmp('txt_busca').getValue(), busca: Ext.getCmp('txt_campo').getValue() } });
},
onClear: function(){
busca_cliente = "";
Ext.getCmp("txt_busca").setValue('');
this.store.proxy.api.load = "../select.php";
this.store.load({ params: { start: 0, limit: 25 } });
}
}],
});
dsStore.load({ params: { start: 0, limit: 25 } });

}
Ext.extend(GR_GridPrincipal, Ext.grid.GridPanel);







/****************************************************************************************************************/
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,
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, 6:47 PM
can you give an exemple of a json client data ...... also I have to cut lot of things to make your stuff work ...

666ragez666
17 Apr 2009, 6:55 PM
Ok like I suspected


// 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 ...


<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

({"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



({"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
for GR_GridPrincipal

({"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



({"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


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


{
"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"
}]
}



<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
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

Rafael
17 Apr 2009, 7:54 PM
Man i found a probleman, i have a archive ovverride.js , this archive is a provocation error .

But have a line white into Formpanel.


EDIT --------

this line whit is a css of grouptabs.css
The name of class is .x-tab-joint

666ragez666
17 Apr 2009, 8:49 PM
cool;)

Rafael
17 Apr 2009, 9:20 PM
thank you 666ragez666.

But i have a probleman with this class .x-tab-joint of css.

The line of grouptabpanel into TABPANEL.

I try this modify this css and i sucess try i post here.

mjlecomte
18 Apr 2009, 7:03 AM
As was suggested to you a few times, you would do much better to post SMALL test cases. Posting heaps of code like that are not conducive to getting help in the forums, nor for your understanding what the isolated problem is.