ExtJs ComboBox FormPanel

   1. combobox extjs的combobox应该是用一个input + div拼出来的,我没有详细看代码,这个combobox如果把editable设成false,那么他就是一个很好的select标签,但是比 select标签有很多优点。 2.1它可以有效解决select div遮挡问题(<select>标签永远在其它标签上面)。 2.2combobox可以指定getValue得到是TextField的值,还是ValueField的值。 2.3最重要的是combobox可以自己输入信息(设置editable=true). 
   2. 发现不给body定义font   ComboBox 会有点变形定义了就不会
   3. ComboBox
      var store = new Ext.data.SimpleStore({
              fields: ['abbr', 'state', 'nick'],
              data : [
              ['AL', 'Alabama', 'The Heart of Dixie'],
              ['AK', 'Alaska', 'The Land of the Midnight Sun'],
              ['IN', 'Indiana', 'The Hospitality State']
              ]
      }); // 用于填充combobox的下拉数据,可以用 Store实现ajax动态取得下拉框的数据.
      var combo = new Ext.form.ComboBox({
              id: 'pageCombo'
              store: store, // 下拉数据
              tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
              // 提示信息
              displayField:'state', //显示上面的fields中的state列的内容,相当于option的text值
              valueField: 'abbr', // 选项的值, 相当于option的value值
              name: 'content',
              mode: 'local', // 必须要,如果为 remote, 则会用ajax获取数据
              triggerAction: 'all', // 点击下拉的时候, all 为展出所有Store中data的数据
              readOnly: true, // 如果设为true,则好像一般的下拉框一样,默认是false,可输入并自动匹配
              emptyText:'Select a state...',
              selectOnFocus:true,
              hiddenName: 'comBoValue', // 如果有form提交,这个值一定要设置,不然记下选了那个值
              // 生成一个hidden的input,用于存放选中的值, 因为ComboBox是用div和input模拟的,form.submit后取得的是input的值.
      });
      Ext.getCmp('pageCombo').addListener('change', function(box, newv, oldv) {
             alert(newv);
          });
      // 给ComboBox添加监听事件,change事件相当于select的onchange事件


      FormPanel
      <div id='dp' style='width: 120px; height: 30px;'></div>
      Ext.onReady(function(){
              Ext.form.Field.prototype.msgTarget = 'side';
              // 这个设置会使field在allowBlank==false时提示field的emptyText
              var myForm = new Ext.form.FormPanel({
                      // 可用属性包括了 BasicForm 的属性
                      width: 500,
                      method: 'post',
                      title: '',
                      header: false, // 不创建标题栏
                      headerAsText: false, // 如果有标题栏, 隐藏标题栏
                      onSubmit: Ext.emptyFn,
                      submit: function() {
                          this.getForm().getEl().dom.submit(); // 提交form
                      }
              });
              myForm.add(combo);
              myForm.render('dp'); // 在div中添加这个form
      }

你可能感兴趣的:(Ajax,ext,prototype,sun)