ExtJs Combobox từ mảng địa phương

Tôi đang cố gắng điền một hộp kết hợp Ext Js bằng danh sách mảng cục bộ. Trong các ví dụ Ext Js, combo được điền từ một tệp states.js khác.ExtJs Combobox từ mảng địa phương

Trong ví dụ của tôi, dữ liệu phải đến từ biến cục bộ. Nó không hoạt động.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Combo Boxes</title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../../ext-all.js"> 
</head> 

<body> 
<script type="text/javascript"> 
var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']]; 
Ext.onReady(function(){ 
Ext.QuickTips.init(); 

// simple array store 
var store = new Ext.data.ArrayStore({ 
    fields: ['abbr', 'state'], 
    data : exampleData2 
}); 
    var combo = new Ext.form.ComboBox({ 
    store: store, 
    displayField:'state', 
    typeAhead: true, 
    mode: 'local', 
    forceSelection: true, 
    triggerAction: 'all', 
    emptyText:'Select a state...', 
    selectOnFocus:true, 
    applyTo: 'local-states' 
    }); 
    </script> 

<div> 
<input type="text" id="local-states" size="20"/> 
</div> 
<div id="local-states" style="margin-top:10px"> 

</body> 
</html>

Nguồn

2011-02-03 Precise-One

Nó sẽ làm việc mặc dù, bạn có chắc tài liệu tham khảo của bạn để các file Ext js được có đúng không? Bạn đã xóa bộ nhớ cache của trình duyệt để kiểm tra xem đó có phải là sự cố bộ nhớ đệm không? – wimvds

@wimvds: đã sửa nó. Có '});' thiếu ở cuối javascript. –

phạm vi, quy mô, phạm vi

 
Ext.onReady(function(){ 
    Ext.QuickTips.init(); // simple array store 
    var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']]; 
    var store = new Ext.data.ArrayStore({ 
    fields: ['abbr', 'state'], 
    data : exampleData2 
    // or even better data : [['1', 'hello'],['2', 'hi'],['3', 'bye']] 
    // next to change: combo.getStore().loadData(new_table); 
    }); 
    var combo = new Ext.form.ComboBox({ 
    store: store, 
    displayField:'state', 
    typeAhead: true, 
    mode: 'local', 
    forceSelection: true, 
    triggerAction: 'all', 
    emptyText:'Select a state...', 
    selectOnFocus:true, 
    applyTo: 'local-states' 
    }); 
});

để có được giải pháp phức tạp hơn

 
Ext.ux.states = Ext.Extend (Ex.form.ComboBox, { ....

Nguồn

2011-02-04 04:20:33 bensiu

Dưới đây, tôi đã tạo ra một cửa hàng, gọi Ext.data.FlatStore, mà mở rộng mặc định ArrayStore. Trong quá trình xây dựng, dữ liệu được định cấu hình được xử lý.

{ 
    xtype: 'combo', 
    queryMode: 'local', 
    store: Ext.create('Ext.data.FlatStore', { 
     data: [ 'yes', 'no', 'maybe' ] 
    }) 
}

Demo @ JSFiddle

Ext.require(['*']); 

String.capitalize = function (str) { 
    return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase(); 
}; 

Ext.define('Ext.data.FlatStore', { 
    extend: 'Ext.data.ArrayStore', 
    config: { 
     data: [] 
    }, 
    fields: [{ 
     name: 'id', 
     type: 'int' 
    }, { 
     name : 'value' 
    }, { 
     name: 'display', 
     type: 'string', 
     convert: function (newValue, model) { 
      return String.capitalize(model.get('value')); 
     } 
    }], 
    constructor: function (config) { 
     var me = this; 
     config.data = config.data.map(function (value, index, values) { 
      return [index, value]; 
     }); 
     me.callParent(arguments); 
     me.loaded = true; 
    } 
}), 

Ext.define('App.view.MainView', { 
    extend: 'Ext.panel.Panel', 
    xtype: 'mainView', 
    alias: 'widget.mainview', 
    controller: 'mainView', 
    title: 'Outer Panel', 
    referenceHolder: true, 
    layout: { 
     type: 'border' 
    }, 
    initComponent: function() { 
     var me = this; 
     me.items = [{ 
      region: 'center', 
      xtype: 'panel', 
      title: 'Inner Panel', 
      margin: 20, 
      bodyStyle: 'padding: 8px;', 
      layout: 'vbox', 
      items: [{ 
       xtype: 'combo', 
       store: Ext.create('Ext.data.FlatStore', { 
        data: [ 'yes', 'no', 'maybe' ] 
       }), 
       displayField: 'display', 
       valueField: 'value', 
       fieldLabel: 'Response', 
       typeAhead: true, 
       queryMode: 'local', 
       forceSelection: true, 
       triggerAction: 'all', 
       emptyText: 'Choose...', 
       selectOnFocus: true, 
       applyTo: 'local-states' 
      }] 
     }], 
     me.callParent(); 
    } 
}); 

Ext.define('App.controller.MainViewController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.mainView', 
    init: function() { 
     var me = this; 
    } 
}); 

Ext.define('App.app.App', { 
    extend: 'Ext.app.Application', 
    name: 'App', 
    launch: function() { 
     Ext.create('Ext.Viewport', { 
      layout: 'fit', 
      flex: 1, 
      items: [{ 
       xtype: 'mainview' 
      }] 
     }); 
    } 
}); 

Ext.onReady(function() { 
    Ext.application('App.app.App'); 
});

Nguồn

2015-02-03 18:29:44

ExtJs Combobox từ mảng địa phương

Trả lời

Các vấn đề liên quan