IconCombo帶下拉圖標(biāo)的下拉列表

WindySky 2009-10-14

展開全文

JS和CSS已經(jīng)打包，還有圖片

調(diào)用如下：

<html>
<head>
<title>歡迎使用移動工單管理系統(tǒng)</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../scripts/ext/IconCombo.css">
<script type="text/javascript" src="../scripts/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="../scripts/ext/IconCombo.js"></script>

</head>
<body>
<script>
var icnCombo=null;
var adminLoginForm=null;
var adminLoginWin=null;
function openLoginWindow(){adminLoginForm=new Ext.FormPanel({id:'operationInf', name:'OperationInf', frame:true, labelWidth:70, labelAlign:'right', bodyStyle:'padding:5px 5px 0', width:350,
items:[
{
xtype:'iconcombo',
store: new Ext.data.SimpleStore({
     fields: ['levelGrade','levelName','levelIcon'],
     data:[
        ['0','0分','x-level-1'],
            ['10','10分','x-level-2'],
            ['20','20分','x-level-3'],
            ['30','3分','x-level-4'],
            ['40','40分','x-level-5'],
            ['50','50分','x-level-6'],
            ['60','60分','x-level-7'],
            ['70','70分','x-level-8'],
            ['80','80分','x-level-9'],
            ['90','90分','x-level-10'],
            ['100','100分','x-level-11']
         ]
}),
id: 'myiconCombo',
    fieldLabel:'打分',
valueField:'levelGrade',
    displayField:'levelName',
    iconClsField:'levelIcon',
    triggerAction:'all',
    mode:'local',
    loadingText:'正在加載...',
    emptyText:'請選擇緊急程度...',
    editable:false,
    anchor:'95%'
}
]});
adminLoginWin=new Ext.Window({id:'adminLoginWin', name:'adminLoginWin', title:'<h2><div style="width:100%"><marquee behavior="scroll" scrollamount="2"><font color="black">歡迎使用移動工單管理系統(tǒng)</font></marquee></div></h2>', iconCls:'icon-lock-s', width:adminLoginForm.width, height:adminLoginForm.height, closable:false, collapsible:false, draggable:false, resizable:false, maximizable:false, modal:false, border:true, items:[adminLoginForm] });
adminLoginWin.show();
}
Ext.BLANK_IMAGE_URL= '../scripts/ext/resources/images/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
    openLoginWindow();
}
);