extjs_Ext.draw.Container

 

[html,css]

var lineA= document.getElementById('lineA');

lineA.setAttribute('fill','red');

 

 

[extjs]

api 문서

https://docs.sencha.com/extjs/5.1.3/api/Ext.draw.Container.html

extjs view 단
items : [{
    xtype	: 'container',
    layout	: 'absolute',        // absolute 레이아웃을 사용하면 각 컴포넌트를 위치 시킬 때 x,y 좌표 속성 이용 or (left,right,top,botoom을 style에 줘서 사용)
    width	: '100%',
    height	: '100%',
    style	: {
        overflow : 'scroll',       // 그림 넣어주는 container가 짤릴 걸 대비해서 scroll 속성을 준다.
        background : '#ffffff',
    },
    items:[{
        xtype: 'draw',
        reference:'drawMha',
        renderTo: Ext.getBody(),   // 이걸 해줘야 함
        layout:'absolute',         // absolute 레이아웃을 사용하면 각 컴포넌트를 위치 시킬 때 x,y 좌표 속성 이용 or (left,right,top,botoom을 style에 줘서 사용)
        width: 1528,
        height: 430,
        border : false,
/* 배경을 넣어줄 수도 있음*/				
//				bodyStyle: {
//					//backgroundImage: 'url(resources/css/images/배경.png)',
//					//backgroundSize: '100% 100%',
//			        //backgroundRepeat: 'no-repeat',
//				},
//  draw에 sprites에 여러 도형들을 type 형태로 넣어줌 ( ctrl에서 색을 제어하기 위해 다시 그리므로 view단에서 sprites에 넣어줄 필요 없다)
//				sprites: [{}]
    },{
        xtype		: 'image',
        reference	: 'imgIconA',
        src			: 'resources/css/images/iconA.png',
        width		: 60,
        height		: 60,
        x			: 270,
        y			: 125
    },{
        xtype		: 'label',
        reference	: 'labelA',
        html		: '값없음',
        width		: 120,
        margin		: '8 0 0 0',
        style : {
            'text-align' : 'center',
            'font-weight' : 'bold'
        },
        x    : 270+60/2-120/2,
        y    : 185
}
            
            


extjs ctrl 단
fnImageLoad : function(oResult) {
    var sColor = '';
    var sText = '';
        
    if ( oResult.isTrue ){
        sColor = 'black';
        sText = oResult.vipIp ;
    } else {
        sColor = 'gray';
        sText = sUunknown;
    }
    var colorText = Ext.String.format('<span style="color:black"> '+sText+' </span>');
    me.lookupReference('labelA').setHtml( colorText );
	
    var colorA = '#81c147';
    var colorB = '#81c147';
    var colorC = '#81c147';
    var colorD = '#81c147';
       
    // 비정상 데이터 red로 변경
    for ( var i=0; i<aAList.length; i++) {
        var oData = aAList[i];
        if ( '실패' === oData.a
            || '실패' === oData.b ) {
            me.lookupReference('labelB').setStyle({color: 'red'});
            colorA = 'red';
            colorB = 'red';

        } else if ( '실패' === oData.c
            || '실패' === oData.d ) {
            me.lookupReference('labelC').setStyle({color: 'red'});
            colorC = 'red';
            colorD = 'red';
        }
    }
    
    // 선, 삼각형 모양 만들기 위한 길이 값
    var lineH = 2;	// 라인 높이
    var triB = 8;	// 삼격형 밑변의 반
    var triH = 14;	// 삼각형 높이

    // path는 각 점의 좌표를 이어주는 type
    // react는 네모 type
    me.lookupReference('drawA').getSurface().add({
        type: 'path',
        fillStyle: colorDbConnection,
        path: 'M ' + (270+60) + ' ' 			+ (125+30-lineH)
           + ' L ' + (270+60)+ ' ' 				+ (125+30+lineH)
             + ' ' + (270+60+196) + ' ' 		+ (125+30+lineH)
             + ' ' + (270+60+196) + ' ' 		+ (125+30+lineH+triB)
             + ' ' + (270+60+196+triH) + ' ' 	+ (125+30) // 삼격형 끝점
             + ' ' + (270+60+196) + ' ' 		+ (125+30-lineH-triB)
             + ' ' + (270+60+196) + ' ' 		+ (125+30-lineH)+ ' z'
    },{
        type: 'path',
        fillStyle: colorDbConnection,
        path: 'M ' + (540+60) + ' ' 			+ (125+30-lineH)
           + ' L ' + (540+60)+ ' ' 				+ (125+30+lineH)
             + ' ' + (540+60+196) + ' ' 		+ (125+30+lineH)
             + ' ' + (540+60+196) + ' ' 		+ (125+30+lineH+triB)
             + ' ' + (540+60+196+triH) + ' ' 	+ (125+30) // 삼격형 끝점
             + ' ' + (540+60+196) + ' ' 		+ (125+30-lineH-triB)
             + ' ' + (540+60+196) + ' ' 		+ (125+30-lineH)+ ' z'
    },{
        type: 'path',
        fillStyle: colorDataSynchronization,
        path: 'M ' + (840+60) + ' ' 			+ (160+30-lineH)
           + ' L ' + (840+60)+ ' ' 				+ (160+30+lineH)
             + ' ' + (840+60+226) + ' '			+ (160+30+lineH)
             + ' ' + (840+60+226) + ' ' 		+ (160+30+lineH+triB)
             + ' ' + (840+60+226+triH) + ' '	+ (160+30) // 삼격형 끝점
             + ' ' + (840+60+226) + ' '			+ (160+30-lineH-triB)
             + ' ' + (840+60+226) + ' '			+ (160+30-lineH)+ ' z'
    },{
        type: 'path',
        fillStyle: colorMasterDetection,
        path: 'M ' + 1140 + ' ' 				+ (305+30-lineH)
           + ' L ' + 1140 + ' ' 				+ (305+30+lineH)
             + ' ' + (840+60/2-lineH) + ' ' 	+ (305+30+lineH)
             + ' ' + (840+60/2-lineH) + ' ' 	+ (16+270+triH)
             + ' ' + (840+60/2-lineH-triB) + ' '+ (16+270+triH)
             + ' ' + (840+60/2) + ' ' 			+ (16+270) // 삼격형 끝점
             + ' ' + (840+60/2+lineH+triB) + ' '+ (16+270+triH)
             + ' ' + (840+60/2+lineH) + ' ' 	+ (16+270+triH)
             + ' ' + (840+60/2+lineH) + ' ' 	+ (305+30-lineH) + ' z'
    },{
        type: 'rect',
        width: 120,
        height: 270,
        strokeStyle : 'gray',
        radius : 30,
        x: 840+60/2-120/2,
        y: 16
    },{
        type: 'rect',
        width: 120,
        height: 397,
        strokeStyle : 'gray',
        radius : 30,
        x: 1140+60/2-120/2,
        y: 16
    });

    // 랜더링 새로 해줘야 함.
    me.lookupReference('drawMha').renderFrame();
}