Я пишу простое приложение, использующее EXT-JS 4.0 для создания быстрых опросов. Вопросы и их варианты ответа содержатся и передаются через объект JSON, который затем отображается динамически. Каждый вопрос имеет текст, отображаемый с использованием экземпляра DisplayField (xtype: 'displayfield'), и вместе с параметрами ответа находится в экземпляре Ext.form.Panel. В зависимости от объекта JSON, ответ может быть через произвольный текст (с использованием TextAreaField), выбор 1-из-многих (с помощью переключателей) или многие-из-многих (с помощью флажков).
После декодирования объекта JSON я перебираю вопросы с помощью обычного цикла for для динамического создания необходимых виджетов (удерживающая панель, текст вопроса, текстовая область, флажки и переключатели, а также кнопка отправки для тестирования ). После цикла я добавляю эти панели в Контейнер с layout: 'vbox' и, наконец, добавляю контейнер в область просмотра с помощью layout: 'fit'.
Это формат объекта JSON для отображения вопросов:
{questions: [{
question:'Do you know it?',
comment: 'no',
multiple: [],
single: ['yes','no']
}, {
question:'In which seasons do you use it (add your comment with your selection)?',
comment: 'yes',
multiple: ['Winter','Spring','Summer','Fall'],
single: []
}
]}
И вот мой код:
Ext.onReady(function () {
// Decode the received JSON object..
var jsonObj = Ext.JSON.decode(jsonObjStr);
// Array to hold the to-be-created panels for rendering in global container..
var panels = new Array();
for (i = 1; i <= jsonObj.questions.length; i++) {
// Create a Panel to contain the question..
var formPanel = Ext.create('Ext.form.Panel', {
id: 'panel' + toString(i),
frame: false,
border: true,
title: 'Question ' + i,
width: '75%',
margin: '10 0 0 0',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
buttonAlign: 'center',
anchor: '100%'
}
});
// Add the question text first..
var questionText = {
xtype: 'displayfield',
name: 'questionTextTf' + i,
value: '<b>' + jsonObj.questions[i - 1].question + '</b>'
};
formPanel.add(questionText);
// Add the check boxes for many-of-many answers..
var checkBoxes = new Array();
for (imultiple = 0; imultiple < jsonObj.questions[i - 1].multiple.length; imultiple++) {
var itemChk = {
name: 'cb' + i,
id: 'cb' + toString(i) + '-' + toString(imultiple),
boxLabel: jsonObj.questions[i - 1].multiple[imultiple]
};
checkBoxes.push(itemChk);
}
if (jsonObj.questions[i - 1].multiple.length > 0) {
var multipleFieldContainer = {
xtype: 'checkboxgroup',
name: 'multipleContainer' + i,
id: 'multipleContainer' + toString(i),
fieldLabel: 'Select all that match',
items: checkBoxes
};
formPanel.add(multipleFieldContainer);
}
// Add the radio buttons for one-of-many answers..
var radioBoxes = new Array();
for (isingle = 0; isingle < jsonObj.questions[i - 1].single.length; isingle++) {
var itemRdb = {
name: 'rb' + i,
id: 'rb' + toString(i) + '-' + toString(isingle),
boxLabel: jsonObj.questions[i - 1].single[isingle]
};
radioBoxes.push(itemRdb);
}
if (jsonObj.questions[i - 1].single.length > 0) {
var singleFieldContainer = {
xtype: 'radiogroup',
name: 'singleContainer' + i,
id: 'singleContainer' + toString(i),
fieldLabel: 'Select one',
items: radioBoxes
};
formPanel.add(singleFieldContainer);
}
// Add the text area field for free text comments..
if (jsonObj.questions[i - 1].comment == 'yes') {
var commentArea = {
xtype: 'textareafield',
name: 'commentTa' + i,
id: 'commentsTa' + toString(i),
fieldLabel: 'Comment'
};
formPanel.add(commentArea);
}
// Add the submit button for each question (for testing)..
var sendButton = {
xtype: 'button',
name: 'submitBtn' + i,
id: 'submitBtn' + toString(i),
text: 'Submit',
handler: function () {
Ext.Msg.alert('Info', Ext.getCmp('commentsTa' + toString(i)).getId() + ': ' + Ext.getCmp('commentsTa' + toString(i)).getValue());
}
};
formPanel.add(sendButton);
// Add panel to array of panels for later rendering..
panels.push(formPanel);
}
// Create the global container to contain all the created panels..
var mainContainer = Ext.create('Ext.container.Container', {
html: 'First Set of Preliminary Questions: <br>',
//renderTo: 'form-ct1',
style: {
borderColor: '#000000',
borderStyle: 'solid',
borderWidth: '2px'
},
layout: {
type: 'vbox',
align: 'center'
},
items: panels
});
// Create a viewport to render the global container to fill the body region of the page..
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: mainContainer,
autoScroll: true
});
});
Теперь проблемы:
Если на странице слишком много панелей для отображения, автопрокрутка окна просмотра не охватывает все последующие панели. То есть я не вижу их всех!
Если я выполню приведенный выше код с идентификатором виджетов, установленным в соответствии со следующим шаблоном, например id: 'commentsTa'+toString(i), отображается только последний виджет каждого типа. Это потому, что все они, кажется, принимают одно и то же значение, поскольку выражение toString(i) оказывается интерпретированным как [object DOMWindow]. Если я не использую toString(), тогда id вообще не распознается и не может использовать метод Ext.getCmp().
Буду очень признателен за вашу помощь по этим вопросам!