似乎无法在 Extjs 中远程填充组合框

Posted

技术标签:

【中文标题】似乎无法在 Extjs 中远程填充组合框【英文标题】:Cannot seem to populate combo box remotely in Extjs 【发布时间】:2013-02-06 18:47:41 【问题描述】:

我已经尝试了所有方法来让它填充组合下拉框。 键入时,说“Apple”,它似乎正在加载数据,但下拉框中没有任何内容。 Firebug 显示数据已加载。那么,我哪里错了?谢谢。

Ext.create('Ext.form.field.ComboBox',  
    fieldLabel: 'Basket',
    emptyText : 'Type a fruit name',
        queryMode : 'remote',
        minChars  : 3, 
        fields    : ['id', 'name'], 
        store     :  
                    proxy: 
                type: 'jsonp',
                callbackKey: 'method',
                url: 'http://www.comparetrainfares.co.uk/train_scripts/data.php',
                reader: 
                root: 'items'
            ,
                
             ,
        needleKey     : 'query',
        labelKey      : 'id',
        label         : 'name',
        displayField  : 'name',
        width         : 260, 
        forceSelection: true,
        renderTo      : query1,
);



<?php
header('Access-Control-Allow-Origin: *');
//header('Content-Type: application/json; charset=utf8');
//header('Content-Type: application/x-json');


// http://www.comparetrainfares.co.uk/train_scripts/data.php

$output = array();

$output[] = array('id' => '1', 'name' => 'Apple');
$output[] = array('id' => '2', 'name' => 'Banana');
$output[] = array('id' => '3', 'name' => 'Orange');
$output[] = array('id' => '4', 'name' => 'Lemon');

$objects = array('items' => $output);

echo json_encode($objects);
?>  

【问题讨论】:

尝试将type: 'json', 添加到您的reader 配置中。 不,那没有用 - 我确定我以前尝试过 - 谢谢。 向我们展示一个由 php 脚本生成的输出示例。 在浏览器中弹出这个可以查看php脚本的输出comparetrainfares.co.uk/train_scripts/data.php 【参考方案1】:

您正在使用 jsonp 代理。这不是加载商店的默认 ajax 方式。 php 脚本应该从发送到 php 脚本的 'callback' 参数接收函数名,然后返回的数据应该是这样的格式:

callback("items":["id":"1","name":"Apple","id":"2","name":"Banana","id":"3","name":"Orange","id":"4","name":"Lemon"])

记得用回调参数中发送的任何字符串的名称替换“回调”。

【讨论】:

感谢您的反馈。你能不能给我一个例子,因为我仍然没有快速到达任何地方。 刚刚意识到我的回答有点错误。我已经更新了。 我添加了“items”对象,因为它是由 jsonp 配置定义为根的。 我仍然没有在下拉列表中得到任何东西。正如我在 FireBug 中看到的那样,数据肯定会回来! 请为我准确粘贴您在 firebug 中看到的内容。【参考方案2】:

这是我在组合框中键入单词“Appl”时从 FireBug 得到的。我知道返回的数据与我输入的数据不同,但是即使我输入了应该匹配的内容,我仍然什么也得不到。

在“参数”标签下我看到:

_dc 1361011625341
callback    Ext.data.JsonP.callback1
limit   10
page    1
query   appl
start   0

“响应”标签显示:

rows:["id":"1","genre_name":"Comedy","id":"2","genre_name":"Drama","id":"3","genre_name":"Action","id":"4","genre_name":"Mystery"]

“JSON”标签显示:

按键排序

rows    
[Object  id=    
"1"    
,  genre_name=    
"Comedy"    
, Object  id=    
"2"    
,  genre_name=    
"Drama"    
, Object  id=    
"3"    
,  genre_name=    
"Action"    
, Object  id=    
"4"    
,  genre_name=    
"Mystery"    
]    

0
    Object  id=    
"1"    
, genre_name=    
"Comedy"    
       
1
    Object  id=    
"2"    
, genre_name=    
"Drama"    
       
2
    Object  id=    
"3"    
, genre_name=    
"Action"    
       
3
    Object  id=    
"4"    
, genre_name=    
"Mystery"    

【讨论】:

以上是关于似乎无法在 Extjs 中远程填充组合框的主要内容,如果未能解决你的问题,请参考以下文章

基于 extjs 网格中的另一个组合框填充字段

Extjs - 如何填充组合框形成一个单一的商店?

在 ExtJs 中本地过滤组合框远程存储

来自本地数组的 ExtJs 组合框

ExtJS 5 组合框 - 提交值和文本

使用本地 JSON 数据填充 ExtJS 3.4 组合框