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,246
    Vote Rating
    87
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi