Populate Ext JS ComboBox using data from MySql

January 6th, 2009
  • I have some issues with the ComboBox while populating its value from database. I didn't get any values in combox.
    Here is my code

    var friendsData = new Ext.data.Store({
    proxy : new Ext.data.HttpProxy({url : $baseUrl+'feed_actions.php'}),
    reader : new Ext.data.JsonReader(['friendid','friend_name']),
    remoteSort : false
    });

    this.cbo_type = new Ext.form.ComboBox({
    id: 'cbo_type',
    fieldLabel: 'Select Share Type',
    width: 240,
    readOnly:true,
    valueField:'friendid',
    displayField:'friend_name',
    validationEvent: false,
    validateOnBlur: false,
    msgTarget: 'under',
    triggerAction: 'all',
    displayField: 'url',
    mode: 'local',
    listeners:{
    valid: this.syncShadow,
    invalid: this.syncShadow,
    scope: this
    },
    tpl: new Ext.XTemplate(
    '',
    '{url}{text}',
    '


  • Uncomment triggerAction:'all' line. BTW, if you have local store it should be enough to add config option value:0 to the combo, you don't need to setValue.


  • Json has to contain success:true member and data is delivered in a "root" member. See config options of JsonReader, root is mandatory. http://extjs.com/deploy/dev/docs/?class=Ext.data.JsonReader


  • Just call node.reload() where node is the node you added a child to.


  • The only things that pop up are id:'friendid' and triggerAction:'all' otherwise it looks good. What is the error?


  • I have taken http://extjs.com/deploy/dev/examples/feed-viewer/view.html example and I tried to add new feed. The attempt was successful, feed was added and loaded. So I don't know what is the problem.

    Generally, we can help you with questions specific to Ext and/or examples, however, it is out of the scope of this forum to develop or design user's applications. The best advice would be: design your application (its purpose, identify components needed, layout, UI), start coding, study example and API docs and when you run into an Ext specific problem we're ready and willing to help.


  • Hi Thanks for your help


  • Hi Saki,
    While am using combo.setValue(id) to sets the default value, it will showing the value as selected on combo box during the loading time of form, but the issue is the remaining items of the list are not listed when i use the setValue(id).


    this.cbo_type = new Ext.form.ComboBox({
    id: 'cbo_type',

    width: 240,
    readOnly:true,
    validationEvent: false,
    validateOnBlur: false,
    msgTarget: 'under',
    //triggerAction: 'all',
    valueField:'url',
    displayField:'text',
    fieldLabel: 'Select Share Type',
    mode: 'local',
    listeners:{
    valid: this.syncShadow,
    invalid: this.syncShadow,
    scope: this
    }
    /*,tpl: new Ext.XTemplate(
    '',
    '{url}{text}',
    '


  • Hi Saki,
    The version whixch i am working with is ExtJs 2.0.
    While i am trying with previous version, am getting the values on the dropdown and which is working correctly. So please give an idea for the same to works with the ExtJs 2.0
    Regards
    Shameer


  • Super, I'm glad you found your solution.


  • Dear Saki,
    Can u explain me in some details...
    The issue which i am facing is am not getting value in the drop-down, instead an error (this.store has no properties) is getting on the firebug.
    Can you please update me why it is happening? Take your time and Please help me.
    Regards
    Shameer


  • Thanks for u r replay, It is right the simple store should be array of arrays. But, how i can bring data from mysql while loading the window to the combobox field. I try with Ajax call but was not working the Ajax request


  • If you use the code from a couple of posts back then the problem is that you define store after the combo so at the time you create the combo the store is undefined.


  • Let's do it like this: You can find both backend (sqlite) and store (part of grid) here: http://gridsearch.extjs.eu You can examine with Firebug what is sent to server, what comes back and there are source codes of both backend and store configuration available.

    Take a look please and should you have more questions just keep asking.


  • Hmm, this doesn't look like it could work. You assign function as data for simple store but it should be array of arrays.


  • node.reload() shows the "not function" error if the node variable is not reference to a valid AsyncTreeNode. http://extjs.com/deploy/dev/docs/?class=Ext.tree.AsyncTreeNode&member=reload


  • Hi aka Saki,
    Thanks for your last postings, which are helped me.
    While am trying to populate the combobox with data from mysql table.
    It is showing an error : 'this.store has no properties'
    The Response which is getting to me on firbug is :

    {"friendid":"1","friend_name":"news"},{"friendid":"8","friend_name":"zane"},{"friendid":"19","friend_name"
    :"company"},{"friendid":"100","friend_name":"joban123"}
    the code which i am using to get data from server is(php code) :
    ($friends is an array of fields.)

    if(is_array($friends)){
    foreach ($friends as $friend){
    $friends_data = array('friendid'=>$friend->friendid,'friend_name'=>$friend->friend_name);
    }
    }
    echo json_encode($friends_data);
    return;

    The JS code which am using is:


    ShareWindow = function() {

    this.cbo_friends = new Ext.form.ComboBox({
    id: 'cbo_friends',
    fieldLabel: 'Share Item to Friends',
    width: 240,
    readOnly:true,
    validationEvent: false,
    validateOnBlur: false,
    msgTarget: 'under',
    triggerAction: 'all',
    valueField:'friendid',
    displayField:'friend_name',
    mode: 'remote',
    listeners:{
    valid: this.syncShadow,
    invalid: this.syncShadow,
    scope: this
    },
    tpl: new Ext.XTemplate(
    '',
    '{url}{text}',
    '


  • Hi,
    I have to pre-populate dropdown with values from database. How can be it possible?
    My code for combobox is

    this.cbo_type = new Ext.form.ComboBox({
    id: 'cbo_type',
    fieldLabel: 'Select Share Type',
    width: 240,
    readOnly:true,
    validationEvent: false,
    validateOnBlur: false,
    msgTarget: 'under',
    triggerAction: 'all',
    displayField: 'url',
    mode: 'local',
    listeners:{
    valid: this.syncShadow,
    invalid: this.syncShadow,
    scope: this
    },
    tpl: new Ext.XTemplate(
    '',
    '{url}{text}',
    '


  • Hi Saki,
    If i have more than one node for a tree panel,
    is there any option to reload only one node?
    node.reload() showing error : node.reload is not a function
    where as name of my node is 'node' then also it shows error
    In the docs i didn't get any notes for reload().There list no event/methods with reload() for tree panel, Can u help me please

    thanks in advance
    regards
    Shameer


  • Hi
    I have to get refreshed the feed panel, where i have a code which is similar to ExtJs exampls feed-viewer. If i have number of nodes and i added a new item to a particular node and my requirement is to reload the content of the selected node with the newly added item.
    How can i possible this to do ? Please help me


  • Hi
    I am getting the values from database to drop down with the ext_all.js with earlier version. But am not getting th e values to combo-box while i am trying with the ExtJs 2.0.
    While using ExtJs2.0 getting error @ firebug : The error is:this.store has no properties
    What is the wrong with this code ?
    Regards,


  • Hello Zaki,
    Thank you very much for all of your great help.
    I could go a bit further, and can send and receive data json_encoded data from the server. But we get an error while we click on the drop down control. The JS code is as follows,

    ShareWindow = function() {


    var cbo_friends = new Ext.form.ComboBox({
    fieldLabel: 'Share Item to Friends',
    store:loadFriends,
    valueField:'friendid',
    displayField:'friend_name',
    mode: 'remote',
    minChars : 0
    });

    var friends_data = new Ext.data.JsonReader({
    totalProperty: "totalCount",
    root: "rows",
    id: "id"
    }, [ 'friendid', 'friend_name']);

    var loadFriends = new Ext.data.Store({

    proxy: new Ext.data.HttpProxy({
    url: $baseUrl+"feed_actions.php?action=load_todrop"
    }),
    reader: friends_data,
    remoteSort: false
    });

    var fp = new Ext.FormPanel({
    labelAlign:'top',
    items:[cbo_friends],
    border: false,
    bodyStyle:'background:transparent;padding:10px;'
    });

    loadFriends.load();



    ShareWindow.superclass.constructor.call(this, {
    title: 'Share Item',
    iconCls: 'feed-icon',
    id: 'add-feed-win',
    autoHeight: true,
    width: 280,
    resizable: false,
    plain:true,
    modal: true,
    y: 100,
    autoScroll: true,
    items: fp
    });

    this.addEvents({add:true});
    }

    Ext.extend(ShareWindow, Ext.Window, {

    show : function(feed_data){
    ShareWindow.superclass.show.apply(this, arguments);
    }
    });
    and the json encoded reply is
    {"success":true,"totalCount":4,"rows":[{"friendid":"1","friend_name":"news"},{"friendid":"8","friend_name"

    :"zane"},{"friendid":"19","friend_name":"company"},{"friendid":"100","friend_name":"joban123"}]}
    .

    Can you please help to get the returned data loaded into the ComboBox.
    Thank you in advance,
    Lovegin


  • Hi Saki,
    Thanks .You guided me to the exact track in Combo-box populating issue.
    Regards, Shameer


  • Hi thanks,
    The issue which i have with the feed-viewer is as follows.
    The JS and PHP,CSS are all same as that on which given on feed-viewer example. Here what am i required is to reload/refresh the left side feed panel (Where all feeds which are listed on a tree under "My Feeds"). when ever i add a new Feed. On this case in which file i have to code for reloading the tree ?
    How is it possible?
    can u help me please ?
    In my code am using mysql data to list feeds on panel .
    I think in the feed-viewer example the following code placing the feed on the panel temporarily.


    return this.fireEvent('validfeed', {
    url: url,
    text: text,
    description: description
    });

    So how can i refresh the left side feed panel while adding a new feed ?
    Because my current requirement will satisfy only with refreshing the left-side feed panel

    Thanks in advance
    Shameer







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Populate Ext JS ComboBox using data from MySql , Please add it free.

    Posted in freedeadaim.com | edit