examples/bootstrap/ComboBox.js

[roojs1] / examples / bootstrap / ComboBox.js

diff --git a/examples/bootstrap/ComboBox.js b/examples/bootstrap/ComboBox.js
index 9350d0d..0c1a444 100644 (file)
--- a/examples/bootstrap/ComboBox.js
+++ b/examples/bootstrap/ComboBox.js
@@ -21,39 +21,83 @@ Roo.example.combobox = new Roo.XComponent({
         
         var _this = this;
         var MODULE = this;
-        var baseURL = '/web.eventmanager/admin.php';
+        var baseURL = '/web.eventmanager/demo.local.php';
         
         return {
             xtype: 'Body',
             xns: Roo.bootstrap,
             items : [
                  {
-                    xtype: 'Container',
+                    xtype: 'ComboBox',
                     xns: Roo.bootstrap,
-                    style :  'margin-top:50px', 
-                    "items": [
+                    placeholder : 'Select a country',
+                    displayField : 'title',
+                    hiddenName : 'country_id',
+                    md : '12',
+                    size : 'sm',
+                    name : 'title',
+                    triggerAction : 'all',
+                    minChars : '1',
+                    tpl : '<li class="roo-select2-result"><b>{title}</b></div>',
+                    listWidth : '400',
+                    multiple: true,
+                    listeners : {
+                        render : function (_self) {
+                            _this.countrySel = _self;
+                        }
+                    },
+                    forceSelection : true,
+                    valueField : 'id',
+                    queryParam : 'query[name]',
+                    editable : true,
+                    alwaysQuery : true,
+                    allowBlank : false,
+                    fieldLabel : 'Country',
+                    pageSize : '10',
+                    append: true,
+                    store : {
+                        xtype: 'Store',
+                        xns: Roo.data,
+                        listeners : {
+                            beforeload : function (_self, o) {
+                                o.params = o.params || {};
+                                
+                                var selected = _this.countrySel.getValue();
+                                
+                                if(selected.length){
+                                    o.params._skip = selected;
+                                }
+                                
+                            }
+                        },
+                        remoteSort : true,
+                        sortInfo : { direction : 'ASC', field: 'name' },
+                        proxy : {
+                            xtype: 'HttpProxy',
+                            xns: Roo.data,
+                            url : '../boostrap/data.country.js',
+                            method : 'GET'
+                        },
+                        reader : {
+                            xtype: 'JsonReader',
+                            xns: Roo.data,
+                            fields : [
+                                {
+                                    'name': 'id',
+                                    'type': 'int'
+                                },
+                                {
+                                    'name': 'code',
+                                    'type': 'string'
+                                },
                                 {
-                                    "xtype": "Column",
-                                    "|xns": "Roo.bootstrap",
-                                    "md": "9",
-                                    "listeners": {},
-                                    "items": [
-                                        {
-                                            "xtype": "Container",
-                                            "|xns": "Roo.bootstrap",
-                                            "cls": "col-md-12",
-                                            "items": [
-                                                {
-                                                    "xtype": "ComboBox",
-                                                    "|xns": "Roo.bootstrap",
-                                                    "cls": "roo-dynamic"
-                                                }
-                                            ]
-                                        }
-                                    ]
+                                    'name': 'title',
+                                    'type': 'string'
                                 }
-                 }
-                  
+                            ]
+                        }
+                    }
+                }
             ]
         };
     }