ext tab

/*
* Ext JS Library 3.0 Pre-alpha
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/


/**
* @class Ext.ux.SliderTip
* @extends Ext.Tip
* Simple plugin for using an Ext.Tip with a slider to show the slider value
*/
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});
var showWin;
var my_sliderGroups ;
var my_tabGroups;
var allSliderArr = new Array();
Ext.onReady(function(){

//    var tip = new Ext.ux.SliderTip({
//        getText: function(slider){
//            return String.format('<b>{0}% complete</b>', slider.getValue());
//        }
//    });
   
//    var slider = new Ext.Slider({
//        renderTo: 'custom-tip-slider',
//        width: 214,
//        increment: 10,
//        minValue: 0,
//        maxValue: 100,
//        plugins: tip
//    });
   
    my_tabGroups = function(id){
   
    var baseTab = Ext.get(id).dom;
   
    }
   
   
    my_sliderGroups = function(groupclassname,itemclassname){
    clearSliders();
    var sliders = Ext.query("*[class="+groupclassname+"] *[class="+itemclassname+"]");
   
    for(var i=0;i<sliders.length;i++){
//    alert("slider_"+sliders[i].id +  "  "+ sliders[i].def);
    var item = new Ext.Slider({
//    id: sliders[i].id,
    id: "slider_"+sliders[i].id,
        renderTo: sliders[i].id,
        width: sliders[i].width,
        minValue: sliders[i].min,
        value:sliders[i].def,
        maxValue: sliders[i].max,
        plugins: new Ext.ux.SliderTip()
    })
    item.on({
   
    'dragend':function(){
//     alert( this.getValue() );
    }
    ,'change':function(slider, newValue, oldValue){
//     alert(this.getValue());
//     alert(this.maxValue+"=="+this.value +"---"+this.minValue+"===" + this.getId() + " newValue:" + newValue + " oldValue:" + oldValue);  
    var params = new Array();
//     params.push(this.minValue);
//     params.push();
//     params.push(this.maxValue);
   
    var ls_p = new _param();
    ls_p.setMin(this.minValue);
    ls_p.setMax(this.maxValue);
    ls_p.setValue(this.value);
   
    params.push(ls_p);
   
    paramValues.putOverride(this.getId(),params);
//     alert(paramValues.get(this.getId())[0].value);
    }
    });
//     item.destroy() ;
    allSliderArr.push(item);
    }
//    var grup = Ext.get(groupid).dom;
//    for(var i=0;i<grup.children.length;i++){
//    var itemslider = new Ext.Slider({
//         renderTo: grup.children[i].id,
//         width: 214,
//         minValue: 0,
//         maxValue: 100,
//         plugins: new Ext.ux.SliderTip()
//     });
//    }
    }
    var my_slideAllByClass = function(classname){
    var sliders = Ext.query("*[class="+classname+"]");
    for(var i=0;i<sliders.length;i++){
    var itemslider = new Ext.Slider({
        renderTo: sliders[i].id,
        width: sliders[i].width,
        minValue: sliders[i].min,
        maxValue: sliders[i].max,
        value:sliders[i].def,
        plugins: new Ext.ux.SliderTip()
    });
    }
    }
   
my_sliderGroups('my_slidergroup1','my_slider');
// my_slideAllByClass('my_slider');
    ////////////////////////base window//////////////////////////
   
var win;
    var button = Ext.get('show-param-btn');
// Panel for the west
    var panel = new Ext.Panel({
        el: 'param-tabs',
        region: 'west',
        split: true,
        width: 500,
        height:280,
        collapsible: true,
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    });
   
   
    var my_tabs = function( id_groupclass , itemclassname){
   
    var vmTabs = new Ext.TabPanel({
//                     el: id_groupclass,
                    renderTo: id_groupclass,
                    autoTabs:true,
                    activeTab:0,
                    autoScroll:true,
                    deferredRender:false,
enableTabScroll:true,
width:'100%',
defaults:{autoScroll: true}, //当页面不够显示的时候显示滚动条
                    border:false
        });
       
    var index = 0;
    while(index < 7){
        addTab();
    }
    function addTab(){
        vmTabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>',
            closable:true
        }).show();
    }
    var tabs = Ext.query("*[class="+id_groupclass+"] *[class="+itemclassname+"]");
   
    for(var i=0;i<tabs.length;i++){
//    alert(""+tabs[i].id );
    addTab();
    }
   
    }
    function fk(fker){
   
    alert(fker);
    }
    my_tabs('vm-tabs','vm-tab');
    var tabs = new Ext.TabPanel({
                    el: 'param-tabs',
                    autoTabs:true,
                    activeTab:0,
                    autoScroll:true,
                    deferredRender:false,
enableTabScroll:true,    
defaults:{autoScroll: true}, //当页面不够显示的时候显示滚动条
                    border:false
//                    ,
//                    handler:function(){
//                    alert();
//                    },
//     tbar: new Ext.Toolbar({ //工具栏
//         items:[
//                 {
//                     id:'buttonA'
//                     ,text:"Button A"
//                     ,handler: function(){testAdd(); }
//                 }
//                  ,
//                 '-'
////                 ,
////                 new Ext.Toolbar.SplitButton({
////                 })
//                 ,{
//                     id:'buttonB'
//                     ,text:"Button B"
//                     ,handler: function(){testAdd();}
//                 }
//                 ,
//                 '-'
//                 ,{
//                     id:'buttonc'
//                     ,text:"Button c"
//                 }
//             ]
//         })
//         ,
//                    items:[{
//                 title: 'Ajax Tab 1',
//                 autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
//             },{
//                 title: 'Event Tab',
//                 listeners: {activate: function(){alert(55898);}},
//                 html: "I am tab 4's content. I also have an event listener attached."
//             }
//         ]
                });
    button.on('click', function(){
    showWin();
    });
    var test = function(){
    alert(3343);
    }
showWin = function(){

        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                el:'param-set-win',
                layout:'fit',
                width:500,
                height:385,
                closeAction:'hide',
                plain: true,
               
                items: [tabs]
               
             /*   buttons: [
                {
                    text:getTextByInput('button_add'),
                    handler: function(){
alert(getSlider('green') .value );
                        //alert(my_GetGridValue(grid,2,2,'id'));
                    }
                },
                {
                    text:'Refresh',
                    handler: function(){
testAdd();
                        //alert(my_GetGridValue(grid,2,2,'id'));
                    }
                },
                {
                    text:getTextByInput('button_delete'),
                    handler: function(){
                    my_deleteMatrix(grid);
                        //alert(my_GetGridValue(grid,2,2,'id'));
                    }
                },{
                    text: getTextByInput('button_close'),
                    handler: function(){
                        win.hide();
                    }
                }]*/
            });
        }
        win.show();
    tabs.addListener("activate",function(){refreshParam});
}

//setTimeout('showWin()',3000);
var isshow = Ext.get('isShowWin').dom.value;

if(isshow == 'true'){
showWin();
}

tabs.addListener('click', function(){alert(9909);});//右键菜单代码关键部分

tabs.addListener('contextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont',  //在HTML文件中必须有个rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
            handler: rMenu1Fn,//点击后触发的事件
            text: 'test'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: 'test2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}

});


function setDisabled(id,type){
var obj = document.getElementById(id);
if(type == 'auto'){
if(obj.disabled == true){
obj.disabled = false;
}else{
obj.disabled = true;
}
}else{
obj.disabled = type;
}
}

function getTextByInput(id){
return Ext.get(id).dom.value;
}


function addSelectItem(obj,value,text){
var opt = new Option(text,value);
obj.add(opt);
}

function hideWin(w){
if( w){
w.hide();
}

}

var paramValues = new Map();

var _param = function(){
var value;
var min;
var max;

this.setValue = function(v){
this.value = v;
}
this.setMin = function(m){
this.min = m;
}
this.setMax = function(m){
this.max = m;
}
}
var getSlider = function(id){
return paramValues.get("slider_" + id)[0];
}
var clearSliders = function(){
for(var i=0;i<allSliderArr.length;i++){
allSliderArr[i].destroy()  ;
}
allSliderArr = new Array();
}

var testAdd = function(){
// showWin();

// var atabs = document.getElementById('param-tabs');
// var test = document.getElementById('testadd');
// var test1 = document.getElementById('testadd1');
// var test2 = document.getElementById('testadd2');
//
// test.innerHTML = '<div id="abc"  class="my_slider" max="100" def="40"  min="0" width="255" onclick="alert(getSlider(\'abc\').value);" ></div>';
// test1.innerHTML = '<div id="abcd"  class="my_slider" max="100" def="40"  min="0" width="255" onclick="alert(getSlider(\'abcd\').value);" ></div>';
// test2.innerHTML = '<div id="abcde"  class="my_slider" max="100" def="40"  min="0" width="255" onclick="alert(getSlider(\'abcde\').value);" ></div>';
//
//    subMenu=document.createElement('<div class="x-tab" title="Parame4">');
//    atabs.appendChild(subMenu);
//    showWin();
//    my_tabGroups('param-tabs');
my_sliderGroups('my_slidergroup1','my_slider');
}

var refreshParam = function(){
// alert(2256);
// my_sliderGroups('my_slidergroup1','my_slider');
}















<div id="param-set-win" class="x-hidden">
    <div class="x-window-header"></div>
   <div id="param-tabs" class='param-tabs'>
   <div class="x-tab" title="test" onclick="refreshParam()">
   <div id="vm-tabs" class='vm-tabs'>
   <div id="vm-tab" class="vm-tab" title="test" >
<div id="slid_group1test" name = "slid_group1test" class="my_slidergroup1">
<table>
<tr>
<td>black:</td>
<td class="font4">0</td>
<td><div id="test1" class="my_slider" max="100" def="40" min="0" width="345" onclick="alert(getSlider('test1').value);" onmouseup="alert(getSlider('test1').value);"></div></td>
<td class="font4">100</td>
</tr>
<tr>
<td>width:</td>
<td class="font4">200</td>
<td><div id="test2" class="my_slider" max="2000" def="1280" min="200" width="345" onclick="alert(getSlider('test2').value);" onmouseup="alert(getSlider('test2').value);"></div></td>
<td class="font4">2000</td>
</tr>
<tr>
<td>select</td>
<td class="font4"></td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="font4"></td>
</tr>
</table>
</div>
</div>
<div id="vm-tab2" class="vm-tab" title="test" >
<div id="slid_group1test" name = "slid_group1test" class="my_slidergroup1">
<table>
<tr>
<td>black:</td>
<td class="font4">0</td>
<td><div id="test1" class="my_slider" max="100" def="40" min="0" width="345" onclick="alert(getSlider('test1').value);" onmouseup="alert(getSlider('test1').value);"></div></td>
<td class="font4">100</td>
</tr>
<tr>
<td>width:</td>
<td class="font4">200</td>
<td><div id="test2" class="my_slider" max="2000" def="1280" min="200" width="345" onclick="alert(getSlider('test2').value);" onmouseup="alert(getSlider('test2').value);"></div></td>
<td class="font4">2000</td>
</tr>
<tr>
<td>select</td>
<td class="font4"></td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="font4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
   
    <logic:iterate id="item" name="misVMList">
   
        <div class="x-tab" title="${item.vm_name }" onclick="refreshParam()">
<div id="slid_group1" name = "slid_group1" class="my_slidergroup1">
<table>
<logic:iterate id="pitem" name="misparamList" indexId="indexId">
<c:if test="${item.vm_id == pitem.vm_id}">
<tr>
<td>${pitem.param_name }:</td>
<td class="font4">${pitem.min_value }</td>
<td><div id="${pitem.vm_id }${pitem.param_name }" class="my_slider" max="${pitem.max_value }" def="${pitem.default_value }" min="${pitem.min_value }" width="345" onclick="alert(getSlider('${pitem.vm_id }${pitem.param_name }').value);" onmouseup="alert(getSlider('${pitem.vm_id }${pitem.param_name }').value);"></div></td>
<td class="font4">${pitem.max_value }</td>
</tr>
</c:if>
</logic:iterate>
</table>
</div>
</div>
    </logic:iterate>
   </div>
   
</div>