Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: need help with form loading xml

  1. #1

    Exclamation need help with form loading xml

    i've been working on this for a really long time now and cant seem to get this to work. what im trying to do is create a form with different fields such as combo boxes, textareas, and itemselector which loads all of its info from an xml file.

    first issue i have is that the itemselector doesn't drag and drop properly since when something is dropped in the next box it appears blank.

    second issue is that when i load the xml in the combo boxes only the first instance of a tag is being displayed.

    hopefully i can get some help because this is just getting really frustrating.

    Code:
    /*!
     * Ext JS Library 3.0.0
     * Copyright(c) 2006-2009 Ext JS, LLC
     * [email protected]
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';
    
    // simple array store
        var store = new Ext.data.ArrayStore({
            fields: ['abbr', 'state', 'nick'],
            data : Ext.exampledata.states // from states.js
        });
        var ds = new Ext.data.ArrayStore({
            data: [[123,'One Hundred Twenty Three'],
                ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
            fields: ['value','text'],
            sortInfo: {
                field: 'value',
                direction: 'ASC'
            }
        });
        var repStore = new Ext.data.XmlStore({
            // store configs
            autoDestroy: true,
            autoLoad: true,
            storeId: 'repStore',
            url: 'report.xml', // automatically configures a HttpProxy
            // reader configs
            record: 'r', 
            fields: [
                // set up the fields mapping into the xml doc
                // The first needs mapping, the others are very basic
                {name: 'name', mapping: 'name'},'desc'
            ]
        });
        
        var allowedStore = new Ext.data.XmlStore({
            // store configs
            autoDestroy: true,
            autoLoad: true,
            storeId: 'allowedStore',
            url: 'report.xml', // automatically configures a HttpProxy
            // reader configs
            record: 'allowedcolumns',
            fields: [
                {name: 'ac', mapping: 'ac'}
            ]
        });
        var timeStore = new Ext.data.XmlStore({
            // store configs
            autoDestroy: true,
            autoLoad: true,
            storeId: 'timeStore',
            url: 'report.xml', // automatically configures a HttpProxy
            // reader configs
            record: 'storage',
            fields: [
                {name: 'period', mapping: 'qmw > period'},
                {name: 'q', mapping: 'quarter > q'},
                {name: 'm', mapping: 'month > m'},
                {name: 'd', mapping: 'day > d'},
                {name: 'h', mapping: 'hour > h'},
                {name: 'min', mapping: 'minute > min'}
            ]
        });
    
    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        title: 'Report Form',
        width: 700,
        bodyStyle: 'padding:10px;',
        
        // configure how to read the XML Data
           /* reader : new Ext.data.XmlReader({
                record : 'r',
                success: '@success'
            }, [
                {name: 'desc', mapping: 'desc'}
            ]),*/
    
        items: [
            new Ext.form.ComboBox({
                store: repStore,
                displayField:'name',
                mode: 'local',
                width: 250,
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Choose a Report To Work With',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: store,
                displayField:'state',
                width: 250,
                typeAhead: true,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'All Staff / My Staff',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'period',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Quarterly / Monthly / Weekly',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'q',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Quarter',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'m',
                typeAhead: true,
                width: 250,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Month',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'d',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Day of Week',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'h',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Hour',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'min',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Minute',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'period',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Quarterly / Monthly / Weekly',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'q',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Quarter',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'m',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Month',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                width: 250,
                mode: 'local',
                displayField:'d',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Day of Week',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'h',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Hour',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: timeStore,
                displayField:'min',
                width: 250,
                mode: 'local',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Minute',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: store,
                displayField:'',
                typeAhead: true,
                width: 250,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Group / Sort by First Column',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: store,
                width: 250,
                mode: 'local',
                displayField:'state',
                typeAhead: true,
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Portrait / Landscape',
                selectOnFocus:true,
            }),
            new Ext.form.ComboBox({
                store: store,
                width: 250,
                displayField:'state',
                typeAhead: true,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                emptyText:'Page Size 8.5x11 or 11x17',
                selectOnFocus:true,
            }),
            new Ext.form.Checkbox({
                boxLabel: 'Enabled',
                checked: 'true',
            }),
            new Ext.form.Checkbox({
                boxLabel: 'Enabled',
                checked: 'true',
            }),
            new Ext.form.TextArea({
                name: 'desc',
                width: 400,
                height: 75,
                readOnly: true,
            }),
            new Ext.form.TextField({
                value: 'CC',
            }),
            new Ext.form.TextField({
                value: 'BCC',
            }),{
                xtype: 'itemselector',
                name: 'itemselector',
                hideLabel:true,
                drawUpIcon:false,
                drawDownIcon:false,
                drawTopIcon:false,
                drawBotIcon:false,
                imagePath: '../examples/ux/images/',
                multiselects: [{
                    legend: 'Allowed Columns',
                    width: 250,
                    height: 200,
                    store: allowedStore,
                    displayField: 'ac',
                    valueField: 'ac',
                },{
                    legend: 'Choosen Columns',
                    width: 250,
                    height: 200,
                    store: allowedStore,
                    displayField: 'ac',
                    valueField: 'ac',
                    tbar:[{
                        text: 'clear',
                        handler:function(){
                            simple.getForm().findField('itemselector').reset();
                        }
                    }]
                }]
            }],
    
            buttons: [{
                text: 'Save',
                handler: function(){
                    if(simple.getForm().isValid()){
                        Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                            simple.getForm().getValues(true));
                    }
                }
            }]
        });
         // simple button add
        simple.addButton('Load', function(){
            simple.getForm().load({url:'report.xml', waitMsg:'Loading'});
        });
        simple.render(document.body);
    });
    and the xml looks like,
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <message success="true">
    <report>
        <r>
            <name>report 1</name>
            <desc>this report does 1</desc>
        </r>
        <r>
            <name>report 2</name>
            <desc>this report does 2</desc>
        </r>
    
        <staff>
            <s>All Staff</s>
            <s>My Staff</s>
        </staff>
        
        <storage>
        
            <qmw>
                <period>Quarterly</period>
                <period>Monthly</period>
                <period>Weekly</period>
            </qmw>
            <quarter>
                <q>1</q>
                <q>2</q>
                <q>3</q>
                <q>4</q>
            </quarter>
            <month>
                <m>1</m>
                <m>2</m>
                <m>3</m>
                <m>4</m>
                <m>5</m>
                <m>6</m>
                <m>7</m>
                <m>8</m>
                <m>9</m>
                <m>10</m>
                <m>11</m>
                <m>12</m>
            </month>
            <day>
                <d>1</d>
                <d>2</d>
                <d>3</d>
                <d>4</d>
                <d>5</d>
                <d>6</d>
                <d>7</d>
            </day>
            <hour>
                <h>1</h>
                <h>2</h>
                <h>3</h>
                <h>4</h>
                <h>5</h>
                <h>6</h>
            </hour>
            <minute>
                <min>1</min>
                <min>2</min>
                <min>3</min>
                <min>4</min>
                <min>5</min>
            </minute>
        </storage>
        
        <cc>CC</cc>
        <bcc>BCC</bcc>
        
        <allowedcolumns>
            <ac>Firstname</ac>
            <ac>Lastname</ac>
            <ac>Score</ac>
            <ac>Email</ac>
            <ac>Manager</ac>
        </allowedcolumns>
        
        <layout>
            <l>Portrait</l>
            <l>Landscape</l>
        </layout>
        
        <psize>
            <size>8.5x11</size>
            <size>11x17</size>
        </psize>
    
    </report>
    </message>

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Are you really wedded to XML?

    Because JSON is SO much simpler.

  3. #3

    Default

    if switching to json is what it takes to get this to work im willing to switch.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Start simpler.

    First load a one input form (A text field) from a JSON file.

    Then load a JsonStore (which the combos will be backed by)

    Then load a form containing multi inputs.

  5. #5

    Default

    thanks Animal, ive done what you said but im getting stuck making a jsonstore work.

    my json file looks like:
    Code:
    {
                r:[
                    {
                        name:'report 1',
                        desc:'this report does 1'
                    },
                    {
                        name:'report 2',
                        desc:'this report does 2'
                    }
                ],
                staff:{
                    s:[
                        'All Staff',
                        'My Staff'
                    ]
                },
                storage:{
                    qmw:{
                        period:[
                            'Quarterly',
                            'Monthly',
                            'Weekly'
                        ]
                    },
                    quarter:{
                        q:[
                            1,
                            2,
                            3,
                            4
                        ]
                    },
                    month:{
                        m:[
                            1,
                            2,
                            3,
                            4,
                            5,
                            6,
                            7,
                            8,
                            9,
                            10,
                            11,
                            12
                        ]
                    },
                    day:{
                        d:[
                            1,
                            2,
                            3,
                            4,
                            5,
                            6,
                            7
                        ]
                    },
                    hour:{
                        h:[
                            1,
                            2,
                            3,
                            4,
                            5,
                            6
                        ]
                    },
                    minute:{
                        min:[
                            1,
                            2,
                            3,
                            4,
                            5
                        ]
                    }
                },
                cc:'CC',
                bcc:'BCC',
                allowedcolumns:{
                    ac:[
                        'Firstname',
                        'Lastname',
                        'Score',
                        'Email',
                        'Manager'
                    ]
                },
                layout:{
                    l:[
                        'Portrait',
                        'Landscape'
                    ]
                },
                psize:{
                    size:[
                        '8.5x11',
                        '11x17'
                    ]
                }
    }
    and im trying to create a jsonstore that will load several combo boxes with the data in the storage section (period,q,m,d, etc). each one should be loaded in a separate combo box.

    wat i have so far is:
    Code:
    var timeStore = new Ext.data.JsonStore({
            // store configs
            autoDestroy: true,
            autoLoad: true,
            storeId: 'timeStore',
            url: 'report.json', // automatically configures a HttpProxy
            // reader configs
            record: 'storage',
            fields: [
                {name: 'period', mapping: 'qmw > period'},
                {name: 'q', mapping: 'quarter > q'},
                {name: 'm', mapping: 'month > m'},
                {name: 'd', mapping: 'day > d'},
                {name: 'h', mapping: 'hour > h'},
                {name: 'min', mapping: 'minute > min'}
            ]
        });

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    A JsonStore needs a root. See the API docs for the example to follow.

  7. #7

    Default

    sorry that was a mistake due to copy and paste, but even replacing the record: to root: i cannot get the data to display in the combo boxes. i was having a similar problem with the xml but with xml i would atleast get the first entry of each section.

    also wondering if u can help me with events. how would i go about setting the value of a textarea depending on the selection of a combo box.

    thanks in advance.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    First things first. Get the Store loading.

    So what does the code look like now?

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Your storage property is sideways.

    READ the API docs more carefully. They are very carefully crafted to truthfully describe EXACTLY what is going on.

    And READ THE EXAMPLE!

  10. #10

    Default

    sorry if im being a bit annoying but ive been struggling with this for almost a month now. i've read the jsonStore example and thats what i used as a starting point. i have one combo box which works fine and loads both names from the r property. later depending on the name i will have to load the description into a textarea.

    now im trying to get the other combo boxes to load with the data within the storage property which has other embeded properties(qmw,quarter,day,...). not sure if its a problem with the jsonStore or if its with the json file itsself but all i seem to get is blank combo boxes.

    the json file is the same as above, and my new jsonstore looks like:
    Code:
    var timeStore = new Ext.data.JsonStore({
            // store configs
            autoDestroy: true,
            autoLoad: true,
            storeId: 'timeStore',
            url: 'report.json', // automatically configures a HttpProxy
            // reader configs
            root: 'storage',
            fields: [
                {name: 'period', mapping: 'qmw > period'},
                {name: 'q', mapping: 'quarter > q'},
                {name: 'm', mapping: 'month > m'},
                {name: 'd', mapping: 'day > d'},
                {name: 'h', mapping: 'hour > h'},
                {name: 'min', mapping: 'minute > min'}
            ]
        });
    thanks

Page 1 of 2 12 LastLast

Posting Permissions

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