1. #1
    Sencha User genius551v's Avatar
    Join Date
    Mar 2007
    Posts
    287
    Vote Rating
    0
    genius551v is on a distinguished road

      0  

    Default Exploring Client-Side Cross Browser XML Data-Binding

    Exploring Client-Side Cross Browser XML Data-Binding


    Hi,

    I have this:

    Code:
    // Grid
                var yg = YAHOO.ext.grid;
                var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
                var cols = [{
                       header: "Id",
                       width: 30,
                       sortType: sort.asInt,
                       hidden: true
                       //editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, allowDecimals: false})
                    },{
                       header: "Nombre",
                       width: 200,
                       sortType: sort.asUCString,
                       editor: new yg.TextEditor({allowBlank: false})
                    },{
                       header: "Fecha Inicio",
                       width: 100,
                       sortType: sort.asDate,
                       renderer: formatDate,
                       editor: new yg.DateEditor({format: 'd/m/Y', allowBlank: false})
                    },{
                       header: "Fecha Fin",
                       width: 100,
                       sortType: sort.asDate,
                       renderer: formatDate,
                       editor: new yg.DateEditor({format: 'd/m/Y', allowBlank: false})
                    },{
                       header: "Estado",
                       width: 100,
                       sortType: sort.asUCString,
                       renderer: SelectEstado,
                       editor: new yg.SelectEditor('sel_estado')
                    },{
                       header: "Observaciones",
                       width: 200,
                       sortType: sort.asUCString,
                       renderer: italic,
                       editor: new yg.TextEditor({allowBlank: true})
                    }];
                    
                cm = new YAHOO.ext.grid.DefaultColumnModel(cols);
        		cm.defaultSortable = true;
        		
        		var schema = {
                    tagName: 'prod_coleccion',
                    id: 'use-index',
                    fields: ['col0', 'col1', 'col2', 'col3', 'col5', 'col4']
                };
    
                dm = new YAHOO.ext.grid.XMLDataModel(schema);
                //dm.setDefaultSort(cm, 0, "DESC");
    
                dm.addPreprocessor(2, parseDate);
                dm.addPreprocessor(3, parseDate);
                dm.addPostprocessor(2, parseDatePost);
                dm.addPostprocessor(3, parseDatePost);
                dm.addPreprocessor(5, parseText);
                
                // edits are synced with the DM, the method defines how to  <--THIS!
                // create new node
                dm.createNode = function(doc, id, colData){
                    var root = doc.getElementsByTagName('catalog')[0];
                    var newNode = doc.createElement('prod_coleccion');
                    newNode.appendChild(doc.createElement('col0'));
                    newNode.appendChild(doc.createElement('col1'));
                    newNode.appendChild(doc.createElement('col2'));
                    newNode.appendChild(doc.createElement('col3'));
                    newNode.appendChild(doc.createElement('col4'));
                    newNode.appendChild(doc.createElement('col5'));
                    this.setNamedValue(newNode, 'col0', colData[0]);
                    this.setNamedValue(newNode, 'col1', colData[1]);
                    this.setNamedValue(newNode, 'col2', colData[2]);
                    this.setNamedValue(newNode, 'col3', colData[3]);
                    this.setNamedValue(newNode, 'col4', colData[4]);
                    this.setNamedValue(newNode, 'col5', colData[5]);
                    root.appendChild(newNode);
                    return newNode;
                };
    
                var idsession = document.getElementById('idsesion').value;
                dm.load('web/xml/getAllProd_coleccionToXML_'+idsession+'.xml');
                                		
                sm = new YAHOO.ext.grid.EditorAndSelectionModel();
                //sm = new YAHOO.ext.grid.NavEditorSelectionModel();
    
                // Manejar la seleccion
                //sm.addListener('selectionchange', handleSelection);
    
                grid = new YAHOO.ext.grid.Grid('grid-editor', dm, cm, sm);
                var start = new Date().getTime();
                grid.render();
    THIS is the method to "Exploring Client-Side Cross Browser XML Data-Binding" "...when the user has the ability to delete records, you could end up with nothing to clone. To avoid this problem, you can override the createNode() method of XMLDataModel...."

    so, when i add a row in the gird, thats work ok, but the xml do not save in my server side...:-(

    my addrow funtion:
    Code:
    var addrow = function(){
            var fecha = new Date();
            var id = 'rowid_' + (++newIndex);
            dm.addRow(id,['?', '', fecha, fecha, '1','']);
            var row = grid.getRowsById(id);
            sm.selectRow(row);
            sm.focusRow(row);
        };
    xml server side:
    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?> 
    <catalog> 
    <TotalCount>3</TotalCount> 
    <prod_coleccion> 
    <col0>1</col0> 
    <col1>AAAAAA</col1> 
    <col2>2006-12-05</col2> 
    <col3>2006-12-05</col3> 
    <col4>aaaaaaaa</col4> 
    <col5>1</col5> 
    </prod_coleccion> 
    <prod_coleccion> 
    <col0>2</col0> 
    <col1>BBBBBBB</col1> 
    <col2>2006-12-05</col2> 
    <col3>2006-12-05</col3> 
    <col4>bbbbbbbb</col4> 
    <col5>1</col5> 
    </prod_coleccion> 
    <prod_coleccion> 
    <col0>3</col0> 
    <col1>CCCCCCC</col1> 
    <col2>2006-12-05</col2> 
    <col3>2006-12-05</col3> 
    <col4>cccccccccc</col4> 
    <col5>1</col5> 
    </prod_coleccion> 
    
    <prod_coleccion><col0/><col1/><col2/><col3/><col4/><col5/></prod_coleccion>  <--WRONG!
    
    </catalog>
    any help tnks!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    I think this has been discussed - not sure if someone offered code to handle.

    In an XMLDataModel, the changes get reflected in the DM.data object which is an array that reflects what was in the XML. It doesn't get automatically get updated back into the XML dom. You can see this if you set a BP in the something that listens to the cellupdated event.

    Someplace you have to write code that replicates the changes from the data array back to your XML object.

    EDIT: Well, I take that back, it does look like the DM.xml property is getting updated. Is this what you're passing back to the server?

  3. #3
    Sencha User genius551v's Avatar
    Join Date
    Mar 2007
    Posts
    287
    Vote Rating
    0
    genius551v is on a distinguished road

      0  

    Default ????

    ????


    thanks for your quick answer.

    this it is to which you talk about?

    my savedata funtion is (JS):

    Code:
    function savetable(e){
        var xml = dm.getDocument();
        .......
        YAHOO.util.Connect.asyncRequest('POST','domain/XmlSave_Prod_coleccion.php',cb,xml);
    my server side savedata is (PHP):

    Code:
    ....
    $xml = $HTTP_RAW_POST_DATA;
    echo $xml;

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Yes that will give you the updated xml.

    You may need to change the header (via initHeader, I think) that asynRequest uses for the post - it's not xml by default. This may impact how the data looks when you get it on the server.

  5. #5
    Sencha User genius551v's Avatar
    Join Date
    Mar 2007
    Posts
    287
    Vote Rating
    0
    genius551v is on a distinguished road

      0  

    Default POST

    POST


    Hi,

    I use POST and the aplication works fine, but i add this:
    Code:
                // edits are synced with the DM, the method defines how to
                // create new node
                dm.createNode = function(doc, id, colData){
                    var root = doc.getElementsByTagName('catalog')[0];
                    var newNode = doc.createElement('prod_coleccion');
                    newNode.appendChild(doc.createElement('col0'));
                    newNode.appendChild(doc.createElement('col1'));
                    newNode.appendChild(doc.createElement('col2'));
                    newNode.appendChild(doc.createElement('col3'));
                    newNode.appendChild(doc.createElement('col4'));
                    newNode.appendChild(doc.createElement('col5'));
                    this.setNamedValue(newNode, 'col0', colData[0]);
                    this.setNamedValue(newNode, 'col1', colData[1]);
                    this.setNamedValue(newNode, 'col2', colData[2]);
                    this.setNamedValue(newNode, 'col3', colData[3]);
                    this.setNamedValue(newNode, 'col4', colData[4]);
                    this.setNamedValue(newNode, 'col5', colData[5]);
                    root.appendChild(newNode);
                    return newNode;
                };
    and now dont works Sad

    I mean: without this works and xml saves, with this xml well no longer saves the new data

    you even think that I must change the method POST anyway???

    TNKS

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Hmm..this response seems to have been lost 1st time around.

    Why are you modifying createNode? The DM will keep the xml in sync with your grid changes. What you're doing may possibly cause a invalid XML document and isn't going to reflect what it's in the grid.

    EDIT - I replied on the dup thread, which I'm now going to whack to avoid further confusion. Please continue with this thread

  7. #7
    Sencha User genius551v's Avatar
    Join Date
    Mar 2007
    Posts
    287
    Vote Rating
    0
    genius551v is on a distinguished road

      0  

    Default ????

    ????


    and so? :cry: :?:

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    You still have not answered the question I asked - why are you modifying createNode?

  9. #9
    Sencha User genius551v's Avatar
    Join Date
    Mar 2007
    Posts
    287
    Vote Rating
    0
    genius551v is on a distinguished road

      0  

    Default


    when my xml file not have data (my php -> sql = 0 DATA) the dm.load is empty or something like that, anyway, I need that my grid paints a row in target at least.

    http://www.yui-ext.com/forum/viewtop...hlight=loading

    tnks

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    1
    Vote Rating
    0
    rleblic is on a distinguished road

      0  

    Default


    genius551v,

    This is an excerpt from XMLDataModel:etNamedValue():

    Code:
            var childNode = node.getElementsByTagName(name);
            if(childNode && childNode.item(0) && childNode.item(0).firstChild) {
                childNode.item(0).firstChild.nodeValue = value;
            }else{
            ...
    The code that overrides the model's createNode() function in your example, is using IDOMElement.appendChild, which adds the specified node to the dom tree, but just as a leaf node.
    So childNode.item(0).firstChild will be pointing to null, and the code which assigns the node's value will be never executed.

    Hope this helps,

    regards.

Similar Threads

  1. Client-side grid filtering (Newbie)
    By protech in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 25 Apr 2007, 8:36 AM
  2. Cross-Browser testing
    By Webnet in forum Community Discussion
    Replies: 6
    Last Post: 28 Feb 2007, 2:23 PM
  3. Server-side vs. Client-side...
    By zquirm in forum Community Discussion
    Replies: 2
    Last Post: 22 Dec 2006, 8:15 PM
  4. strange problem in data binding after upgrade
    By qiuyl in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 20 Dec 2006, 6:00 PM
  5. Yui, Client-Side SQL Query and AjaxPro for .NET
    By Choleriker in forum Community Discussion
    Replies: 9
    Last Post: 12 Dec 2006, 7:27 AM

Thread Participants: 2