Results 1 to 8 of 8

Thread: Problem with Database driven Combobox

  1. #1

    Question Problem with Database driven Combobox

    hey folks,

    i trying around with extjs the last time. now as the application become bigger i started to put some things in seperated files and use customized components. in the following i have a form panel with 4 fieldsets and within 2 comboboxes which "should" load data from a database. in my first version i defined the stores seperatly from the form. and now i tryied to write it into the components config.

    unfortunatly now doesn't work anymore. the arrow of the combox where shown on the left side of the field and not on the right where it should be. autocomplet doesn't work anymore and when i write in the form field and clicking with the mouse in it a strange list with my data occures. the store loads correct and the data is well formed json.

    maybe someone has the time to look over my code. i appreciate any kind of tips hints and critics

    thx

    Code:
    PhotographerForm = Ext.extend(Ext.form.FormPanel, {
        url: 'form_insert.php',
        frame: true,
        border: false,
        width: 300,
        buttonAlign: 'right',
        initComponent:function(){
            var config = {
                items:[{
                    xtype: 'fieldset',
                    id: 'persondata',
                    collapsible: true,
                    title: 'Personendaten',
                    items:[{
                        xtype: 'textfield',
                        fieldLabel: 'Name',
                        name: 'name',
                        allowBlank: false,
                        vtype: 'alpha'
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'Vorname',
                        name: 'prename',
                        allowBlank: false
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'Firma',
                        name: 'company',
                        allowBlank: true
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'Benutzernamer',
                        name: 'username',
                        allowBlank: false
                    }]                                    
                },{
                    xtype: 'fieldset',
                    id: 'adressdata',
                    collapsible: true,
                    collapsed: true,
                    title: 'Adressdaten',
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Strasse, Nr',
                        name: 'adr_street',
                        allowBlank: false
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'Ort',
                        name: 'adr_town',
                        allowBlank: false
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'PLZ',
                        name: 'adr_zip',
                        allowBlank: false
                    },{
                        xtype: 'combo',
                        id: 'country',
                        fieldLabel: 'Land',
                        name: 'adr_country',
                        mode: 'local',
                        store: new Ext.data.Store({
                            reader: new Ext.data.JsonReader({
                                fields: ['country_id','country_name'],
                                root: 'rows'
                            }),
                            proxy: new Ext.data.HttpProxy({
                                url: 'reader/simple-stores-reader.php'
                            }),
                            baseParams:{datasource: 'countries'}
                        }),
                        displayField: 'country_name',
                        width: 120,
                        allowBlank: false
                    }]    
                },{
                    xtype: 'fieldset',
                    collapsible: true,
                    collapsed: true,
                    title: 'Kontaktdaten',
                    id: 'contactdata',
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Telefon',
                        name: 'contact_fon',
                        allowBlank: false
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'Telefax',
                        name: 'contact_fax',
                        allowBlank: false
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'Mobiltelefon',
                        name: 'contact_mobil',
                        allowBlank: false
                    },{
                        xtype: 'textfield',
                        fieldLabel: 'email',
                        name: 'contact_email',
                        allowBlank: false
                    }]                
                },{
                    xtype: 'fieldset',
                    collapsible: true,
                    collapsed: true,
                    title: 'Benutzerdaten',
                    id: 'userdata',
                    items: [{
                        xtype: 'checkbox',
                        fieldLabel: 'aktiv',
                        name: 'usr_activ'
                    },{
                        xtype: 'datefield',
                        fieldLabel: 'gltig von',
                        id: 'from_date',
                        name: 'from_date',
                        vtype: 'daterange',
                        format: 'Y-m-d',
                        endDateField: 'to_date'
                    },{
                        xtype: 'datefield',
                        fieldLabel: 'gltig bis',
                        id: 'to_date',
                        name: 'to_date',
                        vtype: 'daterange',
                        format: 'Y-m-d',
                        startDateField: 'from_date'
                    },{
                        xtype: 'combo',
                        id: 'channel',
                        fieldLabel: 'Kanal',
                        name: 'channel',
                        store: new Ext.data.Store({
                                reader: new Ext.data.JsonReader({
                                fields: ['channel_id','channel_name'],
                                root: 'rows'
                            }),
                            proxy: new Ext.data.HttpProxy({
                                url: 'reader/simple-stores-reader.php',
                            }),
                            baseParams:{datasource: 'channels'}
                        }),
                        displayField: 'channel_name',
                        width: 120,
                        allowBlank: false
                        
                    }]
                }]
            }; // eo config object
            
            // apply config
            Ext.apply(this, Ext.apply(this.initialConfig, config));
         
            PhotographerForm.superclass.initComponent.apply(this, arguments);
        }, // eo function initComponent
        
        onRender:function() {
            this.items.get('userdata').items.get('channel').store.load();
            this.items.get('adressdata').items.get('country').store.load();
            
            this.items.get('persondata').addListener('expand', function() {        
                this.items.get('contactdata').collapse();
                this.items.get('adressdata').collapse();
                this.items.get('userdata').collapse();
            }, this)
            this.items.get('contactdata').addListener('expand', function() {        
                this.items.get('persondata').collapse();
                this.items.get('adressdata').collapse();
                this.items.get('userdata').collapse();
            }, this)
            this.items.get('adressdata').addListener('expand', function() {        
                this.items.get('persondata').collapse();
                this.items.get('contactdata').collapse();
                this.items.get('userdata').collapse();
            }, this)
            this.items.get('userdata').addListener('expand', function() {
                this.items.get('persondata').collapse();                                                      
                this.items.get('contactdata').collapse();
                this.items.get('adressdata').collapse();
            }, this)
            PhotographerForm.superclass.onRender.apply(this, arguments);
        } // eo function onRender
    });
    
    Ext.reg('photographerForm', PhotographerForm);
    At least im willing to learn

  2. #2

    Default

    am i that wrong that noone wants to help me?? i added a small screen to illustrate my problem thanks guys
    Attached Images Attached Images
    At least im willing to learn

  3. #3
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224

    Default

    Why are you extending a FormPanel? Completely unnecessary in my opinion unless you were adding some additional functionality which you are not.

    The button on the left of the combo box was an issue with an earlier RC of v3.0 I believe it in now fixed in the latest version. What version are you using?
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  4. #4

    Default

    im using ext 3.0 dont really know what subversion if there is any. the problem is that using the same code in the main application works perfectly fine, at least the way it is dsiplayed.

    yeah i think to that extending is not the proper way to do it, cause im just looking for a possibility the brake the application in logical parts for multiple reuse.

    is there another way to split an application? can i just copie parts of the code to other files an include them in the html header?

    thanks for your answer
    At least im willing to learn

  5. #5
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224

    Default

    try rc2 and see if the problem persists.

    although there's more than one way to do it you could create a file containing the following:

    Code:
    photographerForm=function(){
       var private1=......
       var private2=......
    
       var form=new Ext.FormPanel({
          url: 'form_insert.php',
          frame: true,
          border: false,
          width: 300,
          // etc....
          //......
       });
    
       return form;
    
    }
    then include that file in your html and whenever you need it just make a call to photographerForm()

    All the extend stuff creates a massive overhead and is unnecessary.
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  6. #6

    Default

    do i have to call it with new photographerForm or can i use photgrapherForm directly?
    At least im willing to learn

  7. #7
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224

    Default

    no its just a normal function - not a class. call it without the new keyword.

    you could for example include the function call in the items config object of it's container as follows:

    Code:
    abc=new Ext.xyz({
       config1: value1
       ,config2: value2
       ,// etc
       ,items: [{
          xtype: 'component1'
          ,config3: value3
       },
       photographerForm()
       ,{
          xtype: 'component2'
          ,config4: value4
       }]
    });
    If you need to pass parameters into it that's okay too.
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  8. #8

    Default

    thank you so much. lot to learn i think.
    At least im willing to learn

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •