2
ExtJS 4.1에서 ItemSelector를 만들고 싶었지만 두 목록에 대해 "제목"속성이 작동하지 않는 것 같습니다.Ext JS 4 ItemSelector 예
여기가 4.1 버전에 적용 "같은 예"입니다 :
:http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html
("가능"및 "선택"두 타이틀을 준수하십시오) 여기에 내가 원하는 것을 정확히 내가 ExtJS에 4.1 다운로드 및 이전 버전 (4.0.7)에서 ItemSelector 및 다중 선택 파일을 추가 한 이유
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html
. 그럼 첫 번째 예제에서 거의 모든 것을 복사했지만 아무것도 수행되지 않으며 오류 메시지가 표시되지 않습니다.
(예 : ext JS 4.1을 사용하는 것이 가장 최신 버전이므로 deprecated 버전부터 시작하는 것이 좋지만이 시점에서 모든 작업 솔루션이 수행 할 것입니다. 나는 아이디어가 다 떨어졌다.) 여기
<!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" />
,691 : 여기 내 HTML 파일입니다
과 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