Extjs grid combo box. - dslreports.com

Author

All Replies

johnnyboyct

join:2003-06-11
Newington, CT

Extjs grid combo box.

Wow this thing is making me SoOooOooo mad. I originally tried it on someone heres advice, anything to add? Just wondering if maybe you have run into this same deal

»extjs.com/forum/showthread.php?p=195024
--
Connecticut Web Design and Development

to forum · permalink ·

· 2008-07-15 13:00:31 ·

PToN

join:2001-10-04
Houston, TX

Are you trying to populate the combo box from a DB..?

Try to mimic the example »extjs.com/deploy/dev/examples/gr···-grid.js

What's not working..? Do you get the combo box..? Do you get it, but it shows no data..?

to forum · permalink ·

· 2008-07-15 13:27:15 ·

johnnyboyct

join:2003-06-11
Newington, CT

·Cox HSI

Ive done everything I can think of lol.

What Im trying to do is have it pull from the xml, which is working, i get the correct one selected, but when you change it, have the value go into the store and the text go into the box.

I can post the sample xml Im using too if that helps :)

I know its possible, I just cant get it to work for the life of me :(

Heres what I settled on, i gave up for a while (line 155)lol:

<div id="binding"></div>    
<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();
 
    // shorthand alias
    var fm = Ext.form;
    
 
 
    
 
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel([{
           id:'id',
           header: "ID",
           dataIndex: 'id',
           width: 50,
           hidden: true,
           editor: new fm.TextField({
               allowBlank: true
           })
        },
        {
           
           header: "Description",
           dataIndex: 'description',
           width: 220,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
header: 'Priority',
width:100,
sortable:true,
dataIndex: 'unit_name',
 
editor: new Ext.grid.GridEditor(
new Ext.form.ComboBox(
{
typeAhead:true,
triggerAction:'all',
lazyRender:true,
transform:'light'
}
)
)
},
        {header: "spec_description_id", width: 0, sortable: true, hidden: true},
        {header: "Actions", width:100, sortable:false, hidden:false, dataIndex: 'id',
        renderer: function() {
    return '<div class="controlBtn"><img src="http://localhost/js/ext/icons/fam/delete.gif" width="16" height="16" class="control_delete"></div>';
}
 
                
                
                
                
                
},{
           header: "Value",
           dataIndex: 'spec_value',
           width: 200,
           editor: new fm.TextField({
               allowBlank: true
           })
        }
        
    ]);
 
    
    
    // by default columns are sortable
    cm.defaultSortable = true;
 
    // this could be inline, but we want to define the Plant record
    // type so we can add records dynamically
    var Plant = Ext.data.Record.create([
           {name: 'id'},
           {name: 'description'},
           {name: 'unit_name'},
           
           {name: 'spec_value'},
           {name: 'spec_description_id'}
           
      ]);
 
    // create the Data Store
    var store = new Ext.data.Store({
        
        proxy: new Ext.data.HttpProxy({
method: 'GET',
disableCaching:true,
url: "http://localhost/index.php?c=ajax_grid&m=get_specs&pid=4&wid=100"
}),
 
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "plant" tag
               record: 'plant'
           }, Plant),
 
        remoteSort:true
    });
 
    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'binding',
        width:800,
        height:500,
        title:'Specs',
        frame:true,
        clicksToEdit:1,
 
        tbar: [{
            text: 'Add',
            handler : function(){
                var p = new Plant({
       id:-1,
       description:'',
       unit_name:'',
       spec_value:''
 
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        },{
            text:'Submit',
            handler : function() { 
  var json = '';
  store.each(function(store){
      json += Ext.util.JSON.encode(store.data) + ',';
  });
  json = json.substring(0, json.length - 1);
  Ext.getDom('GridData').value = json
    document.gridform.submit();
}
}
        
        
        ]
    });
    store.load();
    
    
    
    
    grid.on('afterEdit', function(e){//listening for the grid's 'validateedit' event
//Left here becuse this grid makes me want to kill myself    
console.log(e.field + ' ' + e.value + ' ' + e.record.data['unit_name'] + ' ' + e.value);
 
//e.record.set(e.field, 123)
  
});
    
    
    
    grid.on('click', function(e) {
 
        var btn = e.getTarget('.controlBtn');        
 
        if (btn) {
 
            var t = e.getTarget();
 
            var v = this.view;
 
            var rowIdx = v.findRowIndex(t);
 
            var record = this.getStore().getAt(rowIdx);            
 
            var control = t.className.split('_')[1];
 
            switch (control) {
 
                case 'delete':
                store = grid.getStore();
store.remove(record)
                    console.log('edit this record - ' + record.id);
 
                    break;
 
            }            
 
        }
 
    }, grid); 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
 
    
    
    
    
});
 
</script>
 
    <form action="http://localhost/index.php/Ajax_grid/gridpost" method="post" class="form" id="gridform" name="gridform"><input type="hidden" name="GridData" id="GridData" value=""  style="display: none;"  /><input type="hidden" name="pid" value="4" /><input type="hidden" name="wid" value="100" /><select name="light" id="light" style="display:none"><option value="3">Feet</option><option value="4">Foot Pounds</option><option value="2">LBS per Square Inch</option><option value="5">NONE</option><option value="1">Pounds</option></select></form>

--
Connecticut Web Design and Development

to forum · permalink ·

· 2008-07-15 13:32:50 ·

johnnyboyct

join:2003-06-11
Newington, CT

·Cox HSI

reply to PToN

--
Connecticut Web Design and Development

to forum · permalink ·

· 2008-07-15 13:34:08 ·

PToN

join:2001-10-04
Houston, TX

Let me see if i get this right:
So you want to have a combo-box with: val1, val2, val3 and you have an empty text-box.

When you select val2 from the combo box, you want to store val2 into the datastore and display it in the text-box...

Did i get it right...?

to forum · permalink ·

· 2008-07-16 11:44:58 ·

johnnyboyct

join:2003-06-11
Newington, CT

·Cox HSI

I have the grid with a select box in the column. Its like this:

value=2 text=pounds
value=3 text=feet

So they would be selecting the text pounds, but it should post the value 2.

(priority was unit, but Ive beens crewing around with it lol)
--
Connecticut Web Design and Development

to forum · permalink ·

· 2008-07-16 11:51:20 ·

PToN

join:2001-10-04
Houston, TX

i believe i have the answer for you...

=D

let me look at my code, be back in a few

to forum · permalink ·

· 2008-07-16 11:53:03 ·

PToN

join:2001-10-04
Houston, TX

reply to johnnyboyct
Ok the way i did it was to get the ID within the datastore and then use the hidden value property to post a different value than the one displayed..

Here is that i did:

My data record has: partn and partnID, which for you it would be value=partnID and text=partn.

Then look at my combo box: i used the Display property to show the "text" and the valueField and the hiddenName properties to post the "value" or in my specific case the partnID.

You must use the valueField and hiddenName together. For some reason i could not get it to work.... This should work for you. NOTE: that my combo-box is in a formPanel and not a Editable Grid, but i dont think it should make a difference..

Let me know..

to forum · permalink ·

· 2008-07-16 12:01:52 ·

PToN

join:2001-10-04
Houston, TX

reply to johnnyboyct
So did it work....? You are killing me man... I need to know...!

to forum · permalink ·

· 2008-07-17 14:36:27 ·

johnnyboyct

join:2003-06-11
Newington, CT

·Cox HSI

Haha, I got so frustrated I really cant look at that god damn thing lol.

I SOOOOOO appreciate the post, it looks like its going to work. Sounds like basically the same thing. For a work around I made it post the actual text and did a lookup on that

Ill let you know when my eyes stop bleeding lol.

John
--
Connecticut Web Design and Development

to forum · permalink ·

· 2008-07-17 14:51:22 ·


Friday, 05-Dec 01:30:35	Terms of Use \| Privacy Policy \| Hosting by www.nac.net - DSL,Hosting & Co-lo \| feedback \| contact over 9 years online! © 1999-2008 dslreports.com. page compression OFF