Results 1 to 4 of 4

Thread: selectield with php/mysql

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    6

    Default selectield with php/mysql

    All,

    It is probably a newbie question. I have been stuck on getting selectfield to work within a form. the field needs to be populated from php/mysql back end. I defined model and store. however, when i run the app, i get the following error in developer console in ext-debug.js which i included in my html code


    5057TypeError: 'undefined' is not an object (evaluating 'name.substring')



    here is the js code

    Ext.require([
    'Ext.form.*',
    'Ext.data.*',
    'Ext.layout.container.Anchor',
    'Ext.tip.QuickTipManager'
    ]);


    Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.define('modelCountry', {
    extend: 'Ext.data.Model',
    idProperty: 'idCountry',
    fields: [
    { name: 'idCountry', type: 'int' },
    { name: 'country' }

    ],
    proxy: {
    type: 'ajax',
    actionMethods: 'POST',
    api: {
    read: 'country.php',
    create: 'save_product.php',
    update: 'save_product.php',
    destroy: 'delete_product.php' // not in use
    },
    reader: {
    type: 'json',
    totalProperty: 'total',
    successProperty: 'success',
    messageProperty: 'message',
    root: 'data'
    },


    writer: {
    type: 'json',
    writeAllFields: true,
    allowSingle: false,
    root: 'data'
    },
    listeners: {
    /*
    exception: function(proxy, response, operation){
    Ext.MessageBox.show({
    title: 'REMOTE EXCEPTION',
    msg: operation.getError(),
    icon: Ext.MessageBox.ERROR,
    buttons: Ext.Msg.OK
    });
    }
    */
    }
    }
    });


    storeCountry = new Ext.data.Store({
    autoLoad: true,
    type: 'json',
    model: 'modelCountry',
    // pageSize: 25,
    sorters: {
    property: 'idCountry',
    direction: 'ASC'
    }
    });



    var bd = Ext.getBody();


    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';


    var simple = new Ext.form.Panel({
    layout: 'anchor',
    collapsible: true,

    url: 'save-form.php',
    frame: true,
    title: 'Registration',
    bodyPadding: '5 5 0',
    width: 350,
    fieldDefaults: {
    msgTarget: 'side',
    labelWidth: 75
    },
    defaultType: 'textfield',
    items: [{
    fieldLabel: 'First Name',
    afterLabelTextTpl: required,
    name: 'first',
    allowBlank: false,
    tooltip: 'Enter your first name'
    },{
    fieldLabel: 'Last Name',
    afterLabelTextTpl: required,
    name: 'last',
    allowBlank: false,
    tooltip: 'Enter your last name'
    }, {
    fieldLabel: 'Address',
    afterLabelTextTpl: required,
    name: 'address',
    allowBlank: false,
    tooltip: 'Enter your street address'
    },
    {


    label: 'Country',
    xtype: 'selectfield',
    id:'country',
    store: storeCountry,
    displayField: 'country',
    valueField: 'country',

    tooltip: 'Country of Residence'

    },
    {
    fieldLabel: 'Email',
    afterLabelTextTpl: required,
    name: 'email',
    allowBlank: false,
    vtype:'email',
    tooltip: 'Enter your email address'
    }, {

    fieldLabel: 'Confirm Email',
    afterLabelTextTpl: required,
    name: 'email1',
    allowBlank: false,
    vtype:'email',
    tooltip: 'Enter your email address',
    /**
    * Custom validator implementation - checks that the value matches what was entered into
    * the password1 field.
    */
    validator: function(value) {
    var password1 = this.previousSibling('[name=password]');
    return (value === password1.getValue()) ? true : 'Email do not match.'
    }
    }, {
    fieldLabel: 'Username',
    afterLabelTextTpl: required,
    name: 'username',
    allowBlank: false,
    tooltip: 'Enter your username'
    }, {
    fieldLabel: 'Password',
    afterLabelTextTpl: required,
    name: 'password',
    allowBlank: false,
    vtype: 'password',
    tooltip: 'Enter your password'
    }, {
    fieldLabel: 'Confirm Password',
    afterLabelTextTpl: required,
    name: 'password1',
    allowBlank: false,
    vtype: 'password',
    tooltip: 'Confirm Password',
    /**
    * Custom validator implementation - checks that the value matches what was entered into
    * the password1 field.
    */
    validator: function(value) {
    var password1 = this.previousSibling('[name=password]');
    return (value === password1.getValue()) ? true : 'Passwords do not match.'
    }
    }

    ],


    buttons: [{
    text: 'Save',
    handler: function() {
    this.up('form').getForm().isValid();
    }
    },{
    text: 'Cancel',
    handler: function() {
    this.up('form').getForm().reset();
    }
    }]
    });


    Ext.create('Ext.container.Viewport', {


    layout:'border',
    closable: false,
    resizable: false,
    border: false,
    defaults: {
    collapsible: true,
    split: true,
    bodyPadding: 15
    },
    items: [{
    title: 'Footer',
    region: 'south',
    height: 100,
    minHeight: 50,
    maxHeight: 100

    },{
    title: 'header',
    region: 'north',
    id: 'header',
    height: 300,
    minHeight: 75,
    maxHeight: 300,
    bodyStyle: "background:#ffffff url('img/lock.jpg') no-repeat center top;"
    },{
    title: 'Navigation',
    region:'west',
    floatable: false,
    margins: '5 0 0 0',
    width: 175,
    minWidth: 100,
    maxWidth: 250
    },{
    title: 'Main Content',
    collapsible: false,
    region: 'center',
    id: 'center',
    margins: '5 0 0 0'
    }]
    }).show();
    var wp = Ext.getCmp("center");
    wp.add(simple);
    wp.doLayout();
    });



  2. #2
    Sencha - Support Team keckeroo's Avatar
    Join Date
    Mar 2008
    Location
    Winnipeg, Canada
    Posts
    389
    Answers
    13

    Default

    Your dropdown field has an unknown xtype. What I think you probably want to use is 'combobox', not 'selectfield'.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    6

    Default

    Yes, thanks that did resolve the issue and i am pulling data from mysql into the list. However, I checked the docs and googled quite a bite before selecting xtype: selectfield. Where did you find that this will not work. I am trying to figure out if I am looking in the wrong place so it will not happen again. thx

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Where do you see a 'selectfield'?

    Do you perhaps mean:
    http://docs.sencha.com/extjs/4.2.1/e...lect-demo.html

    If this is not the case, then please provide more info about what you are referring to.

    Scott.

Tags for this Thread

Posting Permissions

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