2
Я хотел создать ItemSelector в ExtJS 4.1, но у них нет рабочего свойства title для двух списков. Вот именно то, что я хочу:Ext JS 4 ItemSelector example
http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html
(соблюдать два названия: «доступен» и «выбрано»)
и здесь является «тот же пример» применяется для версии 4.1:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html
Вот почему я скачал ExtJS 4.1 и добавлены файлы ItemSelector и MULTISELECT от более ранней версии (4.0.7). Затем я скопировал почти все из первого примера, но ничего не сделано, и я не сообщаю об ошибке.
Пожалуйста, расскажите мне, как я должен сделать такую работу ItemSelector (желательно используя ext JS 4.1, так как это последняя версия, и, похоже, неправильно начинать с устаревшей версии, но на данный момент любое рабочее решение будет делать, поскольку У меня кончились идеи).
Вот мой HTML-файл:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Вставить название здесь
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<script type="text/javascript" src="bootstrap.js"></script>
<!-- Shared -->
<!-- <link rel="stylesheet" type="text/css" href="../shared/example.css" /> -->
<!-- Example -->
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/css/ItemSelector.css" />
и app.js файл:
Ext.Loader.setConfig({enabled: true});
//Ext.Loader.setPath('Ext.ux', './ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);
Ext.onReady(function(){
console.log("ready");
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = Ext.widget('form', {
title: 'MultiSelect Test',
width: 400,
bodyPadding: 10,
renderTo: 'multiselect',
items:[{
anchor: '100%',
xtype: 'multiselect',
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect',
allowBlank: false,
// minSelections: 2,
// maxSelections: 3,
store: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
value: ['3', '4', '6'],
ddReorder: true
}],
tbar:[{
text: 'Options',
menu: [{
text: 'Set value (2,3)',
handler: function(){
msForm.getForm().findField('multiselect').setValue(['2', '3']);
}
},{
text: 'Toggle enabled',
handler: function(){
var m = msForm.getForm().findField('multiselect');
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
},{
text: 'Toggle delimiter',
handler: function() {
var m = msForm.getForm().findField('multiselect');
if (m.delimiter) {
m.delimiter = null;
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
'see that values are now submitted as separate parameters.');
} else {
m.delimiter = ',';
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
'see that values are now submitted as a single parameter separated by the delimiter.');
}
}
}]
}],
buttons: [{
text: 'Clear',
handler: function(){
var field = msForm.getForm().findField('multiselect');
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reset',
handler: function() {
msForm.getForm().reset();
}
}, {
text: 'Save',
handler: function(){
if(msForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
msForm.getForm().getValues(true));
}
}
}]
});
console.log(msForm);
var ds = Ext.create('Ext.data.ArrayStore', {
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = Ext.widget('form', {
title: 'ItemSelector Test',
width: 700,
bodyPadding: 10,
renderTo: 'itemselector',
tbar:[{
text: 'Options',
menu: [{
text: 'Set value (2,3)',
handler: function(){
isForm.getForm().findField('itemselector').setValue(['2', '3']);
}
},{
text: 'Toggle enabled',
handler: function(){
var m = isForm.getForm().findField('itemselector');
if (!m.disabled) {
m.disable();
} else {
m.enable();
}
}
},{
text: 'Toggle delimiter',
handler: function() {
var m = isForm.getForm().findField('itemselector');
if (m.delimiter) {
m.delimiter = null;
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
'see that values are now submitted as separate parameters.');
} else {
m.delimiter = ',';
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
'see that values are now submitted as a single parameter separated by the delimiter.');
}
}
}]
}],
items:[{
xtype: 'itemselector',
name: 'itemselector',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
store: ds,
displayField: 'text',
valueField: 'value',
value: ['3', '4', '6'],
allowBlank: false,
// minSelections: 2,
// maxSelections: 3,
msgTarget: 'side'
}],
buttons: [{
text: 'Clear',
handler: function(){
var field = isForm.getForm().findField('itemselector');
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reset',
handler: function() {
isForm.getForm().reset();
}
}, {
text: 'Save',
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
isForm.getForm().getValues(true));
}
}
}]
});
});
и, наконец, это моя структура папок:
-app.js
-bootstrap.js
-ext-all-debug.js
-NewFile.html
-ux
-form
-ItemSelector.js
-MultiSelector.js
-layout
-ItemSelector.js
-MultiSelect.js
-resources
-css
-ext-all.css
-ItemSelector.css
Чтобы исправить это, на какой-то уже сомнительный код потребуются довольно неприятные переоценки. Это для учебных целей или для исправления, необходимого для производства? – pllee
@pllee Мне нужен такой виджет для производства. Этот код копируется из демонстраций и обучающих программ Sencha. Я думал, что это правильно. Я действительно новичок в Ext JS и все кодирование, которое я сделал, было с документацией передо мной. Вот почему я не могу ни о чем уверен. Любые советы помогут. – Dragos