examples/bootstrap/TabPanel-ComboBox.js

[roojs1] / examples / bootstrap / TabPanel-ComboBox.js

diff --git a/examples/bootstrap/TabPanel-ComboBox.js b/examples/bootstrap/TabPanel-ComboBox.js
index 364e5e5..23047fa 100644 (file)
--- a/examples/bootstrap/TabPanel-ComboBox.js
+++ b/examples/bootstrap/TabPanel-ComboBox.js
@@ -64,31 +64,46 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                             },
                                                             items : [
                                                                {
-                                                                    tabId : '#one',
+                                                                    tabId : '#normal',
                                                                     xtype : 'NavItem',
                                                                     preventDefault : true,
-                                                                    html : 1,
+                                                                    html : 'Normal',
                                                                     xns : Roo.bootstrap,
                                                                     active : true,
                                                                     listeners : {
                                                                        render : function (_self)
                                                                           {
-                                                                             _this.one = this;
+                                                                             _this.normal = this;
                                                                              
                                                                           }
                                                                     }
                                                                 },
                                                                {
-                                                                    tabId : '#two',
+                                                                    tabId : '#multiple',
                                                                     xtype : 'NavItem',
                                                                     preventDefault : true,
-                                                                    html : 2,
+                                                                    html : 'Multiple',
                                                                     xns : Roo.bootstrap,
                                                                     active : false,
                                                                     listeners : {
                                                                        render : function (_self)
                                                                           {
-                                                                             _this.two = this;
+                                                                             _this.multiple = this;
+                                                                             
+                                                                          }
+                                                                    }
+                                                                },
+                                                                {
+                                                                    tabId : '#tickable',
+                                                                    xtype : 'NavItem',
+                                                                    preventDefault : true,
+                                                                    html : 'Tickable',
+                                                                    xns : Roo.bootstrap,
+                                                                    active : false,
+                                                                    listeners : {
+                                                                       render : function (_self)
+                                                                          {
+                                                                             _this.tickable = this;
                                                                              
                                                                           }
                                                                     }
@@ -107,7 +122,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                     carousel : true,
                                                     items : [
                                                         {
-                                                            tabId : '#one',
+                                                            tabId : '#normal',
                                                             xtype : 'TabPanel',
                                                             xns : Roo.bootstrap,
                                                             navId : '#top',
@@ -137,20 +152,18 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                             xtype: 'ComboBox',
                                                                                             xns: Roo.bootstrap,
                                                                                             placeholder : 'Select a country',
-                                                                                            displayField : 'name',
+                                                                                            displayField : 'title',
                                                                                             hiddenName : 'country_id',
                                                                                             md : '12',
                                                                                             size : 'sm',
                                                                                             name : 'country_id_name',
                                                                                             triggerAction : 'all',
                                                                                             minChars : '1',
-                                                                        //                    tpl : '<li class="select2-result"><b>{name}</b></div>',
+                                                                                            tpl : '<li class="roo-select2-result"><b>{title}</b></div>',
                                                                                             style : 'margin-top:20px;',
-                                                                                            multiple: true,
-                                                                                            tickable: true,
                                                                                             listeners : {
                                                                                                 render : function (_self) {
-                                                                                                    _this.tickableSel = _self;
+                                                                                                    _this.normalSel = _self;
                                                                                                 }
                                                                                             },
                                                                                             forceSelection : true,
@@ -159,9 +172,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                             editable : true,
                                                                                             alwaysQuery : true,
                                                                                             allowBlank : false,
-                                                                                            fieldLabel : 'Country With Tickable',
-                                                                        //                    pageSize : '10',
-                                                                        //                    append: true,
+                                                                                            fieldLabel : 'Country Normal',
                                                                                             store : {
                                                                                                 xtype: 'Store',
                                                                                                 xns: Roo.data,
@@ -172,11 +183,121 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                                     }
                                                                                                 },
                                                                                                 remoteSort : true,
-                                                                                                sortInfo : { direction : 'ASC', field: 'name' },
+                                                                                                sortInfo : { direction : 'ASC', field: 'title' },
+                                                                                                proxy : {
+                                                                                                    xtype: 'HttpProxy',
+                                                                                                    xns: Roo.data,
+                                                                                                    url : './data.country.js',
+                                                                                                    method : 'GET'
+                                                                                                },
+                                                                                                reader : {
+                                                                                                    xtype: 'JsonReader',
+                                                                                                    xns: Roo.data,
+                                                                                                    fields : [
+                                                                                                        {
+                                                                                                            'name': 'id',
+                                                                                                            'type': 'int'
+                                                                                                        },
+                                                                                                        {
+                                                                                                            'name': 'code',
+                                                                                                            'type': 'string'
+                                                                                                        },
+                                                                                                        {
+                                                                                                            'name': 'title',
+                                                                                                            'type': 'string'
+                                                                                                        }
+                                                                                                    ]
+                                                                                                }
+                                                                                            }
+                                                                                        }
+                                                                                    ]
+
+                                                                                }
+                                                                            ]
+
+                                                                        }
+                                                                    ]
+
+                                                                }
+                                                            ]
+
+                                                        },
+                                                        {
+                                                            tabId : '#multiple',
+                                                            xtype : 'TabPanel',
+                                                            xns : Roo.bootstrap,
+                                                            navId : '#top',
+                                                            active : false,
+                                                            listeners : {
+                                                                   changed : function (_self, state)
+                                                                   {
+                                                                       if(state){
+                                                                            _this.multipleSel.list.setWidth(Math.max(_this.multipleSel.inputEl().getWidth(), _this.multipleSel.minListWidth));
+                                                                        }
+                                                                   }
+                                                            },
+                                                            items : [
+                                                                {
+                                                                    level : 4,
+                                                                    xtype : 'Header',
+                                                                    html : 'First TabPanel With ComboBox',
+                                                                    xns : Roo.bootstrap
+                                                                },
+                                                                {
+                                                                    xtype : 'Container',
+                                                                    well : 'md',
+                                                                    xns : Roo.bootstrap,
+                                                                    items : [
+                                                                        {
+                                                                            xtype : 'Row',
+                                                                            xns : Roo.bootstrap,
+                                                                            items : [
+                                                                                {
+                                                                                    md : 12,
+                                                                                    xtype : 'Column',
+                                                                                    xns : Roo.bootstrap,
+                                                                                    items : [
+                                                                                        {
+                                                                                            xtype: 'ComboBox',
+                                                                                            xns: Roo.bootstrap,
+                                                                                            placeholder : 'Select a country',
+                                                                                            displayField : 'title',
+                                                                                            hiddenName : 'country_id',
+                                                                                            md : '12',
+                                                                                            size : 'sm',
+                                                                                            name : 'country_id_name',
+                                                                                            triggerAction : 'all',
+                                                                                            minChars : '1',
+                                                                                            tpl : '<li class="roo-select2-result"><b>{title}</b></div>',
+                                                                                            style : 'margin-top:20px;',
+                                                                                            multiple: true,
+                                                                                            listeners : {
+                                                                                                render : function (_self) {
+                                                                                                    _this.multipleSel = _self;
+                                                                                                }
+                                                                                            },
+                                                                                            forceSelection : true,
+                                                                                            valueField : 'id',
+                                                                                            queryParam : 'query[name]',
+                                                                                            editable : true,
+                                                                                            alwaysQuery : true,
+                                                                                            allowBlank : false,
+                                                                                            fieldLabel : 'Country Multiple',
+                                                                                            store : {
+                                                                                                xtype: 'Store',
+                                                                                                xns: Roo.data,
+                                                                                                listeners : {
+                                                                                                    beforeload : function (_self, o) {
+                                                                                                        o.params = o.params || {};
+
+                                                                                                    }
+                                                                                                },
+                                                                                                remoteSort : false,
+                                                                                                sortInfo : { direction : 'ASC', field: 'title' },
                                                                                                 proxy : {
                                                                                                     xtype: 'HttpProxy',
                                                                                                     xns: Roo.data,
-                                                                                                    url : baseURL + '/Geoip/Core_geoip_country',
+                                                                                                    url : './data.country.js',
                                                                                                     method : 'GET'
                                                                                                 },
                                                                                                 reader : {
@@ -192,7 +313,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                                             'type': 'string'
                                                                                                         },
                                                                                                         {
-                                                                                                            'name': 'name',
+                                                                                                            'name': 'title',
                                                                                                             'type': 'string'
                                                                                                         }
                                                                                                     ]
@@ -212,11 +333,19 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
 
                                                         },
                                                         {
-                                                            tabId : '#two',
+                                                            tabId : '#tickable',
                                                             xtype : 'TabPanel',
                                                             xns : Roo.bootstrap,
                                                             navId : '#top',
                                                             active : false,
+                                                            listeners : {
+                                                                   changed : function (_self, state)
+                                                                   {
+                                                                       if(state){
+                                                                            _this.tickableSel.list.setWidth(Math.max(_this.tickableSel.inputEl().getWidth(), _this.tickableSel.minListWidth));
+                                                                        }
+                                                                   }
+                                                            },
                                                             items : [
                                                                 {
                                                                     level : 4,
@@ -244,7 +373,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                     name : 'country_id_name',
                                                                                     triggerAction : 'all',
                                                                                     minChars : '1',
-                                                                //                    tpl : '<li class="select2-result"><b>{name}</b></div>',
+                                                                //                    tpl : '<li class="roo-select2-result"><b>{name}</b></div>',
                                                                                     style : 'margin-top:20px;',
                                                                                     multiple: true,
                                                                                     tickable: true,
@@ -260,8 +389,6 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                     alwaysQuery : true,
                                                                                     allowBlank : false,
                                                                                     fieldLabel : 'Country With Tickable',
-                                                                //                    pageSize : '10',
-                                                                //                    append: true,
                                                                                     store : {
                                                                                         xtype: 'Store',
                                                                                         xns: Roo.data,