Ext multiselect 다중 선택 상자
7996 단어 select
제가 여기 제시한 것은 Ext 3.1.1의 예입니다.안에 주의해야 할 부분이 있습니다. 아래에서 설명하겠습니다.
다음은 HTML입니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MultiSelect & ItemSelector</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ux/css/MultiSelect.css"/>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="../../ext-all.js"> </script>
<script type="text/javascript" src="../ux/MultiSelect.js"></script>
<script type="text/javascript" src="../ux/ItemSelector.js"></script>
<script type="text/javascript" src="multiselect-demo.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
</head>
<body>
<h1>MultiSelect & ItemSelector</h1>
<p>The js is not minified so it is readable. See <a href="multiselect-demo.js">multiselect-demo.js</a>.</p>
<b>MultiSelect</b><br />
<p>Press Save with no items selected to see an example of validation applied.</p>
<div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>
<b>ItemSelector</b><br />
<p>Supports drag and drop, double-click, button move/reorder, etc.
<div id="itemselector" class="demo-ct"></div>
</body>
</html>다음은 JS.
/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = new Ext.form.FormPanel({
title: 'MultiSelect Test',
width: 700,
bodyStyle: 'padding:10px;',
renderTo: 'multiselect',
items:[{
xtype: 'multiselect',
fieldLabel: 'Multiselect<br />(Required)',
name: 'multiselect',
width: 250,
height: 200,
allowBlank:false,
store: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
tbar:[{
text: 'clear',
handler: function(){
msForm.getForm().findField('multiselect').reset();
}
}],
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();
}
}
}]
}],
buttons: [{
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));
}
}
}]
});
var ds = new 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 = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'itemselector',
items:[{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']],
tbar:[{
text: 'clear',
handler:function(){
isForm.getForm().findField('itemselector').reset();
}
}]
}]
}],
buttons: [{
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));
}
}
}]
});
});
[주의:] 여기서 설명하고자 하는 것은 어떻게 다중 선택 상자의 수치를 얻는가의 문제입니다.
Ext가 제시한 예에서 msForm.getForm().getValues(true) 값을 가져온 후
인쇄: multiselect = 12%2C2%, 2C3%, 2C4
이 결과는 decode에 의해 순조롭게 URL에 넣고 백그라운드에 전달될 수 있습니다.
그러나: 만약에 우리가 프론트에서 우리의 옵션을 처리해야 하거나, 위에서 제시한 decode 이후의 결과를 백그라운드에 전달하고 싶지 않다면, 어떻게 처리해야 합니까?
사실 간단합니다. 두 군데를 주의해야 합니다.
1. xtype:'multiselect', 아래에 표가 있는name의 설정:name:'multiselect',
여기의name, 바로 당신이 데이터를 얻는 관건입니다.
2. 예에서 데이터를 추출한 것은 이 문장입니다.
msForm.getForm().getValues(true)
우리도 그것에 대한 개조가 필요하다.다음과 같습니다.
var selectItems = msForm.getForm().getValues().multiselect;
이 select Items가 바로 우리가 원하는 수치다.alert(selectItems.constructor)를 통해;우리는 selectItems가 문자열이라는 것을 알 수 있다. 그 안의 수치는 쉼표로 직렬로 연결되어 있다.우리가 이 쉼표를 처리하면 분할된 문자열은 하나의 그룹을 얻을 수 있다.저희가 원하는 수치입니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
🕗[프로그래머스] 입양 시각 구하기(2)문제 설명 ANIMAL_OUTS 테이블은 동물 보호소에서 입양 보낸 동물의 정보를 담은 테이블입니다. ANIMAL_OUTS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATETIME, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
