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 fef3fe0..e9cf790 100644 (file)
--- a/examples/bootstrap/TabPanel-ComboBox.js
+++ b/examples/bootstrap/TabPanel-ComboBox.js
@@ -67,7 +67,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                     tabId : '#normal',
                                                                     xtype : 'NavItem',
                                                                     preventDefault : true,
-                                                                    html : 1,
+                                                                    html : 'Normal',
                                                                     xns : Roo.bootstrap,
                                                                     active : true,
                                                                     listeners : {
@@ -82,7 +82,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                     tabId : '#multiple',
                                                                     xtype : 'NavItem',
                                                                     preventDefault : true,
-                                                                    html : 2,
+                                                                    html : 'Multiple',
                                                                     xns : Roo.bootstrap,
                                                                     active : false,
                                                                     listeners : {
@@ -97,7 +97,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                     tabId : '#tickable',
                                                                     xtype : 'NavItem',
                                                                     preventDefault : true,
-                                                                    html : 2,
+                                                                    html : 'Tickable',
                                                                     xns : Roo.bootstrap,
                                                                     active : false,
                                                                     listeners : {
@@ -152,14 +152,14 @@ 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;',
                                                                                             listeners : {
                                                                                                 render : function (_self) {
@@ -183,11 +183,11 @@ 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 : baseURL + '/Geoip/Core_geoip_country',
+                                                                                                    url : './data.country.js',
                                                                                                     method : 'GET'
                                                                                                 },
                                                                                                 reader : {
@@ -203,7 +203,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                                             'type': 'string'
                                                                                                         },
                                                                                                         {
-                                                                                                            'name': 'name',
+                                                                                                            'name': 'title',
                                                                                                             'type': 'string'
                                                                                                         }
                                                                                                     ]
@@ -227,7 +227,15 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                             xtype : 'TabPanel',
                                                             xns : Roo.bootstrap,
                                                             navId : '#top',
-                                                            active : true,
+                                                            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,
@@ -253,14 +261,14 @@ 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,
                                                                                             listeners : {
@@ -284,12 +292,12 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
 
                                                                                                     }
                                                                                                 },
-                                                                                                remoteSort : true,
-                                                                                                sortInfo : { direction : 'ASC', field: 'name' },
+                                                                                                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 : {
@@ -305,7 +313,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                                             'type': 'string'
                                                                                                         },
                                                                                                         {
-                                                                                                            'name': 'name',
+                                                                                                            'name': 'title',
                                                                                                             'type': 'string'
                                                                                                         }
                                                                                                     ]
@@ -325,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,
@@ -350,14 +366,14 @@ 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>{name}</b></div>',
                                                                                     style : 'margin-top:20px;',
                                                                                     multiple: true,
                                                                                     tickable: true,
@@ -373,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,
@@ -384,12 +398,12 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
 
                                                                                             }
                                                                                         },
-                                                                                        remoteSort : true,
-                                                                                        sortInfo : { direction : 'ASC', field: 'name' },
+                                                                                        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 : {
@@ -405,7 +419,7 @@ Roo.example.TabPanelCombobox = new Roo.XComponent({
                                                                                                     'type': 'string'
                                                                                                 },
                                                                                                 {
-                                                                                                    'name': 'name',
+                                                                                                    'name': 'title',
                                                                                                     'type': 'string'
                                                                                                 }
                                                                                             ]