1. #1
    Ext User
    Join Date
    Jun 2008
    Posts
    4
    Vote Rating
    0
    andreluige is on a distinguished road

      0  

    Default Load remote combobox on form load

    Load remote combobox on form load


    Hello guys...

    i see a lot of threads talking about load combobox from load form... but my problem still not solved...

    so them i decide post my code here looking for help...

    i start using extjs one weeh later so if want´s say something about best practices code plz say...


    this is my window code:

    Code:
    var frmCadCliente = new Ext.form.FormPanel({
        id:'frmCadCliente',
        baseCls: 'x-plain',
        defaultType: 'textfield',
        labelAlign: 'right',
        items: [{
            xtype:'fieldset',
            title:'Dados Cadastrais',
            autoHeight:true,
            defaultType: 'textfield',
            items :[new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                },
                items: [{
                    columnWidth: 0.35,
                    items: new Ext.form.TriggerField({
                        name: 'codigo',
                        id: 'codigo',
                        fieldLabel: '<b>Código</b>',
                        triggerClass : 'x-form-search-trigger',
                        anchor: '100%',
                        onTriggerClick: function(){winFrmViewCliente.show();},
                        onBlur: function() {
                            
                            Ext.getCmp('frmCadCliente').el.mask('Por favor,aguarde!', 'x-mask-loading');
                            
                            Ext.getCmp('frmCadCliente').findById('tipo_situacao').getStore(false).reload();
                            Ext.getCmp('frmCadCliente').findById('tipo_pessoa').getStore(false).reload();
                            
                            Ext.getCmp('frmCadCliente').getForm().load({
                                url     : 'viewCliente.php',
                                success : function() {
                                    Ext.getCmp('frmCadCliente').el.unmask();
                                },
                                params: {id: Ext.getCmp('frmCadCliente').findById('codigo').getValue()}
                                
                            });
                        
                        }
    
                    })
                },{
                    labelWidth: 45,
                    columnWidth: 0.65,
                    items: {
                        xtype: 'textfield',
                        name: 'nome',
                        fieldLabel: '<b>Nome</b>',
                        anchor: '100%'
                    }
                }]
            }),{
                fieldLabel: 'Nome Fantasia',
                name: 'nome_fantasia',
                anchor: '100%'
            },new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    columnWidth: 0.5
                },
                items: [{
                    items: new Ext.form.ComboBox({
                        id: 'tipo_situacao',
                        hiddenName: 'id_tipo_situacao',
                        fieldLabel: '<b>Tipo Situação</b>',
                        typeAhead: true,
                        triggerAction: 'all',
                        lazyRender: true,
                        mode: 'remote',
                        store: storeTipoSituacao,
                        valueField: 'id',
                        displayField: 'descricao',
                        editable: false,
                        anchor: '100%'
                    })
                },{
                    items: new Ext.form.ComboBox({
                        id: 'tipo_cliente',
                        hiddenName: 'id_tipo_cliente',
                        fieldLabel: 'Tipo Cliente',
                        store: storeTipoCliente,
                        mode: 'remote',
                        displayField: 'descricao',
                        valueField: 'id',
                        triggerAction: 'all',
                        editable: false,
                        anchor: '100%'
                    })
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    columnWidth: 0.5
                },
                items: [{
                    items: new Ext.form.ComboBox({
                        id: 'tipo_pessoa',
                        name: 'tipo_pessoa',
                        hiddenName: 'id_tipo_pessoa',
                        fieldLabel: '<b>Tipo Pessoa</b>',
                        store: storeTipoPessoa,
                        mode: 'remote',
                        displayField: 'descricao',
                        valueField: 'id',
                        triggerAction: 'all',
                        editable: false,
                        anchor: '100%'
                    })
                },{
                    items: {
                        xtype: 'textfield',
                        name: 'cnpj_cpf',
                        fieldLabel: 'CNPJ/CPF',
                        anchor: '100%'
                    }
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    columnWidth: 0.5
                },
                items: [{
                    items: {
                        xtype: 'textfield',
                        name: 'ie_rg',
                        fieldLabel: 'Incr. Estadual/RG',
                        anchor: '100%'
                    }
                },{
                    items: {
                        xtype: 'textfield',
                        name: 'im',
                        fieldLabel: 'Incri. Municipal',
                        anchor: '100%'
                    }
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    columnWidth: 0.5
                },
                items: [{
                    items: new Ext.form.ComboBox({
                        id: 'sexo',
                        hiddenName: 'id_sexo',
                        fieldLabel: 'Sexo',
                        store: storeSexo,
                        mode: 'remote',
                        displayField: 'descricao',
                        valueField: 'id',
                        triggerAction: 'all',
                        editable: false,
                        anchor: '100%'
                    })
                },{
                    items: {
                        xtype: 'datefield',
                        fieldLabel: 'Data de Nasci.',
                        name: 'data_nascimento',
                        anchor: '100%'
                    }
                }]
            })
        ]},new Ext.TabPanel({
            activeTab: 0,
            frame:true,
            height: 167,
            defaults:{bodyStyle:'padding:5px; background-color: #dfe8f6;'}, 
            items:[{
                title: 'Endereço',
                layout:'form',
                defaultType: 'textfield',
                plain: true,
    
                items: [new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form'
                },
                items: [{
                    columnWidth: 0.7,
                    items: {
                        xtype: 'textfield',
                        name: 'logradouro',
                        fieldLabel: 'Logradouro',
                        anchor: '100%'
                    }
                },{
                    columnWidth: 0.3,
                    labelWidth: 50,
                    items: {
                        xtype: 'textfield',
                        name: 'numero',
                        fieldLabel: 'Número',
                        anchor: '100%'
                    }
                }]
            }),{
                fieldLabel: 'Complemento',
                name: 'complemento',
                anchor: '100%'
            },new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    columnWidth: 0.5
                },
                items: [{
                    items: {
                        xtype: 'textfield',
                        name: 'bairro',
                        fieldLabel: 'Bairro',
                        anchor: '100%'
                    }
                },{
                    items: {
                        xtype: 'textfield',
                        name: 'cep',
                        fieldLabel: 'CEP',
                        anchor: '100%'
                    }
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    columnWidth: 0.5
                },
                items: [{
                    items: new Ext.form.ComboBox({
                        id: 'uf',
                        hiddenName: 'id_uf',
                        fieldLabel: 'UF',
                        store: storeUf,
                        mode: 'remote',
                        displayField: 'descricao',
                        valueField: 'id',
                        triggerAction: 'all',
                        editable: false,
                        anchor: '100%',
                        listeners: {
                            beforeselect: function(combo, record, index){
                                
                                Ext.getCmp('frmCadCliente').findById('cidade').setDisabled(true);
                                Ext.getCmp('frmCadCliente').findById('cidade').getStore(false).setBaseParam('uf', record.get(combo.valueField));
                                Ext.getCmp('frmCadCliente').findById('cidade').getStore(false).reload();
                                if (record.get(combo.valueField) != '') {
                                    Ext.getCmp('frmCadCliente').findById('cidade').setDisabled(false);
                                }
                                
                            }
                        }
                    })
                },{
                    items: new Ext.form.ComboBox({
                        id: 'cidade',
                        hiddenName: 'id_cidade',
                        fieldLabel: 'Cidade',
                        store: storeCidade,
                        mode: 'remote',
                        displayField: 'descricao',
                        valueField: 'id',
                        triggerAction: 'all',
                        editable: false,
                        disabled: true,
                        anchor: '100%'
                    })
                }]
            })]
            },{
                title: 'Contato',
                layout:'form',
                defaultType: 'textfield',
    
                items: [new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    style: 'padding-left:5px',
                },
                items: [{
                    columnWidth: 0.4,
                    items: {
                        xtype: 'textfield',
                        name: 'ddd_um',
                        fieldLabel: 'Telefone 1',
                        anchor: '100%'
                    }
                },{
                    columnWidth: 0.3,
                    items: {
                        hideLabel: true,
                        xtype: 'textfield',
                        name: 'telefone_um',
                        anchor: '100%'
                    }
                },{
                    columnWidth: 0.3,
                    labelWidth: 40,
                    items: {
                        xtype: 'textfield',
                        name: 'ramal_um',
                        fieldLabel: 'Ramal',
                        anchor: '100%'
                    }
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    style: 'padding-left:5px',
                },
                items: [{
                    columnWidth: 0.4,
                    items: {
                        xtype: 'textfield',
                        name: 'ddd_dois',
                        fieldLabel: 'Telefone 2',
                        anchor: '100%'
                    }
                },{
                    columnWidth: 0.3,
                    items: {
                        hideLabel: true,
                        xtype: 'textfield',
                        name: 'telefone_dois',
                        anchor: '100%'
                    }
                },{
                    columnWidth: 0.3,
                    labelWidth: 40,
                    items: {
                        xtype: 'textfield',
                        name: 'ramal_dois',
                        fieldLabel: 'Ramal',
                        anchor: '100%'
                    }
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    style: 'padding-left:5px',
                },
                items: [{
                    columnWidth: 0.4,
                    items: {
                        xtype: 'textfield',
                        name: 'ddd_fax',
                        fieldLabel: 'Fax',
                        anchor: '100%'
                    }
                },{
                    columnWidth: 0.3,
                    items: {
                        hideLabel: true,
                        xtype: 'textfield',
                        name: 'telefone_fax',
                        anchor: '100%'
                    }
                },{
                    columnWidth: 0.3,
                    labelWidth: 40,
                    items: {
                        xtype: 'textfield',
                        name: 'ramal_fax',
                        fieldLabel: 'Ramal',
                        anchor: '100%'
                    }
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    style: 'padding-left:5px',
                },
                items: [{
                    columnWidth: 1,
                    items: {
                        xtype: 'textfield',
                        name: 'email',
                        fieldLabel: 'E-mail',
                        anchor: '100%'
                    }
                }]
            }),new Ext.Container({
                autoEl: 'div',
                layout: 'column',
                defaults: {
                    xtype: 'container',
                    autoEl: 'div',
                    layout: 'form',
                    style: 'padding-left:5px',
                },
                items: [{
                    columnWidth: 1,
                    items: {
                        xtype: 'textfield',
                        name: 'site',
                        fieldLabel: 'Site',
                        anchor: '100%'
                    }
                }]
            })]
            }]
        })],
        reader       : new Ext.data.JsonReader({
            root   : 'records',
            fields : [
                {
                    name    : 'nome'
                },
                {
                    name    : 'id_tipo_situacao'
                },
                {
                    name    : 'id_tipo_pessoa'
                }
            ]
        
        })
    
    });
    
    var winFrmCadCliente = new Ext.Window({
        title: 'Cadastro de Cliente',
        width: 600,
        height: 456,
        iconCls: 'accordion',
        closable: false,
        resizable: false,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: frmCadCliente,
        buttons: [{
            text: 'Salvar',
            scale: 'medium',
            handler: function(){
                winFrmCadCliente.getComponent(0).getForm().submit({
                    url: 'saveCliente.php',
                    waitTitle: 'Por favor, aguarde.',
                    waitMsg: 'Salvando...',
                    success: function(form, action){
                        
                        //Ext.Msg.alert('Sucesso', 'Cliente cadastrado!');
                        winFrmCadCliente.getComponent(0).getForm().reset();
                        
                    },
                    failure: function(form, action){
    
                        Ext.MessageBox.show({
                            title: 'Erro',
                            msg: 'Ocorreu um problema na gravação dos dados. Verifique e tente novamente!',
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.ERROR
                        });
                        
                    }
                    
                });
                
            }
            //iconCls: 'accordion'
        },{
            text: 'Excluir',
            scale: 'medium'
            //iconCls: 'accordion'
        },{
            text: 'Limpar',
            scale: 'medium',
            handler: function(){
                winFrmCadCliente.getComponent(0).getForm().reset();
            }
            
            //iconCls: 'accordion'
        },{
            text: 'Imprimir',
            scale: 'medium'
            //iconCls: 'accordion'
        },{
            text: 'Sair',
            scale: 'medium',
            //iconCls: 'accordion',
            handler: function(){ winFrmCadCliente.hide();}
        }]
    });
    thx a lot guys...

    cya

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    A bit too much code to read through...

    There are 3 approaches to loading a remote combobox on a form:
    1. Set the combobox to mode:'local' and load it with data from the load request itself (useful if the list is short).
    2. Delay setting the combobox value until the list is loaded with a separate request (also, only useful is the list is short - I prefer option 1).
    3. Do not load the combobox, but temporarily set the valueNotFoundText (useful for valueField comboboxes with a long list).

  3. #3
    Ext User
    Join Date
    Jun 2008
    Posts
    4
    Vote Rating
    0
    andreluige is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    A bit too much code to read through...

    There are 3 approaches to loading a remote combobox on a form:
    1. Set the combobox to mode:'local' and load it with data from the load request itself (useful if the list is short).
    2. Delay setting the combobox value until the list is loaded with a separate request (also, only useful is the list is short - I prefer option 1).
    3. Do not load the combobox, but temporarily set the valueNotFoundText (useful for valueField comboboxes with a long list).
    Hello Condor,
    i was consourne about use my city combox in local mode, because my table city has more then 10k registers...
    folowing the options u give to me i try local mode... and using this approach works more faster then using the remote approach...

    thanks a lot for your help and your time, sorry for my english, it works now.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar