Загрузка ExtJs 4 комбинированных списков - PullRequest
0 голосов
/ 14 февраля 2012

Я должен комбинировать.Один из них содержит регионы, а другой содержит города.Я хочу добиться того, чтобы поведение выглядело так: когда в первом комбинированном поле выбран какой-либо регион, изменяются доступные города во втором комбинированном списке.

Например, если я выберу регион1 в первом комбинированном списке, второй комбинированный список будет содержать CityA и CityB.Если я выберу Регион 2, второй комбинированный список будет содержать CityD, CityE и CityF.

Надеюсь, это было довольно ясно:)

Я попытался решить его самостоятельно, используя стиль закрытия, но мой код имеетпроблема: выпадающий список остается в маске, даже когда все города загружены.Кто-нибудь знает, как решить эту проблему?

Код комбинированного списка городов:

var setFilterRegion;
function getCityField() {

var citiesPerPage = 10;

var citiesProxy = Ext.create('Ext.data.proxy.Ajax', {
    url: 'service/cities-data.php',
    reader: Ext.create('Ext.data.reader.Json', {
        root: 'cities',
        totalProperty: 'totalCount'
    })
});

setFilterRegion = function(regionId) {
  citiesProxy.extraParams['region_id'] = regionId;
};

var cities = Ext.create('Ext.data.Store', {
    pageSize: citiesPerPage,
    model: 'City',
    proxy: citiesProxy,
    sorters: [{
        property: 'name',
        direction: 'ASC'
    }]
});

var citiesComboBox = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Город',
    store: cities,
    displayField: 'name',
    valueField: 'id',
    listConfig: {
        loadingText: 'Загрузка...',
        emptyText: 'Нет городов с похожим названием'
    },
    pageSize: citiesPerPage,
    labelWidth: contactInfo.labelWidth,
    width: contactInfo.width
});

cities.loadPage(1);

return citiesComboBox;

}

Код комбинированного списка регионов:

function getRegionField() {

var regionsPerPage = 10;

var regions = Ext.create('Ext.data.Store', {
    pageSize: regionsPerPage,
    model: 'Region',
    proxy: Ext.create('Ext.data.proxy.Ajax', {
        url: 'service/regions-data.php',
        reader: Ext.create('Ext.data.reader.Json', {
            root: 'regions',
            totalProperty: 'totalCount'
        })
    }),
    sorters: [{
        property: 'name',
        direction: 'ASC'
    }]
});

var regionsComboBox = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Регион',
    store: regions,
    displayField: 'name',
    valueField: 'id',
    listConfig: {
        loadingText: 'Загрузка...',
        emptyText: 'Нет регионов с похожим названием'
    },
    pageSize: regionsPerPage,
    labelWidth: contactInfo.labelWidth,
    width: contactInfo.width
});

regions.loadPage(1);

return regionsComboBox;

}

Код взаимодействия:

var regionField = getRegionField();
var cityField = getCityField();
var phoneField = getPhoneField();

regionField.on('change', function(t, newVal){
    setFilterRegion(newVal);
    cityField.getStore().loadPage(1);
});

Ответы [ 2 ]

1 голос
/ 14 февраля 2012

Артём, взгляни на его пример, думаю, это именно то, что тебе нужно:

http://extjs.wima.co.uk/example/1

0 голосов
/ 14 февраля 2012

В этой статье было найдено элегантное решение:

http://www.learnsomethings.com/2011/05/17/where-did-setextraparam-aka-setbaseparam-go-in-extjs-4-%E2%80%93-one-workaround/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...