Ралли: Холст в клетке стола - PullRequest
Новая
       4

Ралли: Холст в клетке стола

1 голос
/ 27 марта 2012

Я пытался нарисовать столбик в ячейке моего стола.

Все работает нормально, но каждый раз, когда я менял размер окна браузера, мои элементы отсутствовали. То же самое происходит, когда я вручную изменяю размер ячейки.

Кто-нибудь может помочь?

Мой холст построен так

В HTML: 

<canvas id='0' width='260' height='10'> </canvas>

В Javascript: 

var canvas = document.getElementById(0);


            if (canvas && canvas.getContext) {
                 ctx = canvas.getContext('2d');

           if (ctx) {

                          ctx.strokeStyle = 'red';
                          ctx.stroke();
                          ctx.fillStyle = '#8b0000';
                          ctx.fill();


                         ctx.font = "Bold 11px Arial";

                         ctx.fillText("Test", canvas.width - 248, canvas.height);




                            }
                        }

1 Ответ

3 голосов
/ 27 марта 2012

К сожалению, компонент rally.sdk.ui.Table перерисовывает ячейку, когда происходит событие изменения размера.Элемент холста, на котором вы рисуете, заменяется новым элементом холста при изменении размера.

Вместо того, чтобы рисовать с помощью холста, вы можете создать панель в ячейке, используя только HTML и CSS.

enter image description here

Добавьте этот HTML-код в свойство, которое вы хотите отобразить в виде столбца вместо элемента canvas: 

<div class="bar"> 
    <div class="percentDone" style="width: 50%">50%</div> 
</div>

И добавьте также следующие стили: 

<style type="text/css">

    .bar .percentDone {
        text-align: center;
        background-color: #EDB5B1;
    }

</style>

Надеюсь, это даст вам то, что вы ищете.Вот полный код приложения с пустыми данными: 

<html>
<head>
   <title>Percent Done with CSS example</title>
   <meta name="Name" content="Percent Done with CSS example" />

    <style type="text/css">

        .bar .percentDone {
            text-align: center;
            background-color: #EDB5B1;
        }

    </style>

   <script type="text/javascript" src="/apps/1.31/sdk.js"></script>
   <script type="text/javascript">

    rally.addOnLoad(function(){

        var table = new rally.sdk.ui.Table({ 
            columns: [
                {key: 'name', header: 'Name', width: 100}, 
                {key: 'percentDone', header: 'Percent Done', width: 100}
            ]
        });

        table.addRows([
            {
                name: 'Test 1',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 50%">50%</div></div>'
            },
            {
                name: 'Test 2',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 70%">70%</div></div>'
            }
        ]);

        table.display('container');

    });

   </script>
</head>
<body>
   <div id="container"></div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...