examples/bootstrap/ComboBox.js
[roojs1] / examples / bootstrap / ComboBox.js
1
2
3 Roo.example = Roo.example || {};
4
5 Roo.example.combobox = new Roo.XComponent({
6     part     :  ["layout","viewpanel"],
7     order    : '001-viewpanel',
8     region   : '',
9     parent   : '#bootstrap',
10     name     : "unnamed module",
11     disabled : false, 
12     permname : '', 
13     _tree : function()
14     {
15         
16         this.parent = {
17             el : new Roo.bootstrap.Body()
18         }
19         this.parent.el.layout = false;
20         this.parent.el.render(document.body);
21         
22         var _this = this;
23         var MODULE = this;
24         var baseURL = '/web.eventmanager/demo.local.php';
25         
26         return {
27             xtype: 'Body',
28             xns: Roo.bootstrap,
29             items : [
30                  {
31                     xtype: 'ComboBox',
32                     xns: Roo.bootstrap,
33                     placeholder : 'Select a country',
34                     displayField : 'name',
35                     hiddenName : 'country_id',
36                     md : '12',
37                     size : 'sm',
38                     name : 'country_id_name',
39                     triggerAction : 'all',
40                     minChars : '1',
41                     tpl : '<li class="select2-result"><b>{name}</b></div>',
42                     listWidth : '400',
43                     multiple: true,
44                     listeners : {
45                         render : function (_self) {
46                             _this.countrySel = _self;
47                         }
48                     },
49                     forceSelection : true,
50                     valueField : 'id',
51                     queryParam : 'query[name]',
52                     editable : true,
53                     alwaysQuery : true,
54                     allowBlank : false,
55                     fieldLabel : 'Country',
56                     pageSize : '10',
57                     append: true,
58                     store : {
59                         xtype: 'Store',
60                         xns: Roo.data,
61                         listeners : {
62                             beforeload : function (_self, o) {
63                                 o.params = o.params || {};
64                             }
65                         },
66                         remoteSort : true,
67                         sortInfo : { direction : 'ASC', field: 'name' },
68                         proxy : {
69                             xtype: 'HttpProxy',
70                             xns: Roo.data,
71                             url : baseURL + '/Roo/Core_geoip_country',
72                             method : 'GET'
73                         },
74                         reader : {
75                             xtype: 'JsonReader',
76                             xns: Roo.data,
77                             fields : [
78                                 {
79                                     'name': 'id',
80                                     'type': 'int'
81                                 },
82                                 {
83                                     'name': 'code',
84                                     'type': 'string'
85                                 },
86                                 {
87                                     'name': 'name',
88                                     'type': 'string'
89                                 }
90                             ]
91                         }
92                     }
93                 }
94             ]
95         };
96     }
97 });