Как вставить таблицу стилей в новое окно документа в приложении Rally

Я пытаюсь создать приложение Rally, которое отображает карты пользовательской истории, а затем при нажатии кнопки появляется окно печати. Все работает хорошо, за исключением того, что вы вставляете html в пользовательское HTML-приложение на сайте Rally. Когда я пытаюсь это сделать, всплывающее окно не отформатировано правильно. CSS не применяется к окну печати, что означает, что он будет печатать неформатированный текст.Как вставить таблицу стилей в новое окно документа в приложении Rally

Приложение имеет этот код, чтобы сделать окно печати:

title = this.iterationCombobox.rawValue + ' Stories'; 

    options = "toolbar=1,menubar=1,scrollbars=yes,scrolling=yes,resizable=yes,width=1000,height=500"; 

    printWindow = window.open('', title, options); 
    doc = printWindow.document; 

    cardMarkup = this.down('#card'); 

    doc.write('<html><head><link type="text/css" rel="stylesheet" href="app.css"/><title>' + title + '</title>'); 
    doc.write('</head><body class="landscape">'); 
    doc.write(cardMarkup.getEl().dom.innerHTML); 
    doc.write('</body></html>'); 
    doc.close(); 

    printWindow.print();

Большая часть этого кода работает, но эта линия не работает должным образом:

doc.write('<html><head><link type="text/css" rel="stylesheet" href="app.css"/><title>' + title + '</title>');

Ссылка часть HTML связывает его с файлом css (app.css), и эта ссылка работает внешне. Однако, создавая приложение, а затем вставляя его в пользовательский HTML, он помещает все css в строку и, следовательно, забирает файл app.css. Поскольку я хочу, чтобы этот файл форматировал приложение и окно печати, он не работает с встроенным css. Я попытался скопировать узел стиль для приложения, используя различные методы:

var ourStyle = document.styleSheets[2];

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

doc.styleSheets[2] = ourStyle;

Я также попытался:

doc.styleSheets.push(ourStyle);

, но это не работает, потому что StyleSheets является объектом и не имеет методы нажимной.

Я не уверен, как скопировать стили css, чтобы они могли использоваться для окна печати, или как найти другой способ решения этой проблемы. Любая помощь была бы потрясающей! Благодаря!

Также я знаю, что можно было бы просто набрать все теги в html-файле, но я бы предпочел более простое решение, чем это (потому что есть много кода css).

источник

2013-05-29 Isabella Funke

Для того, чтобы получить как ралли CSS, так и CSS, которые я вложил в приложение, мне пришлось сделать две отдельные вещи. Перед открытием нового окна добавьте строку:

var css = document.getElementsByTagName('style')[0].innerHTML;

Затем, при написании HTML в новый документ, положить, что в CSS между тегами стиля:

doc.write('<html><head><style>' + css + </style></head>');

ОТКАЗ! Эта строка не будет работать извне! Он работает только тогда, когда вы находитесь на сайте Rally.

Чтобы убедиться, что ралли CSS включен в приложении, я добавил эти 2 функции в коду:

_injectContent: function(html, elementType, attributes, container, printWindow){ 
    elementType = elementType || 'div'; 
    container = container || printWindow.document.getElementsByTagName('body')[0]; 

    var element = printWindow.document.createElement(elementType); 

    Ext.Object.each(attributes, function(key, value){ 
     if (key === 'class') { 
      element.className = value; 
     } else { 
      element.setAttribute(key, value); 
     } 
    }); 

    if(html){ 
     element.innerHTML = html; 
    } 

    return container.appendChild(element); 
}, 

_injectCSS: function(printWindow){ 
    //find all the stylesheets on the current page and inject them into the new page 
    Ext.each(Ext.query('link'), function(stylesheet){ 
      this._injectContent('', 'link', { 
      rel: 'stylesheet', 
      href: stylesheet.href, 
      type: 'text/css' 
     }, printWindow.document.getElementsByTagName('head')[0], printWindow); 
    }, this); 
}

Наконец, добавьте эту строку в функцию, где вы строите свое новое окно:

this._injectCSS(printWindow);

Это введет Rally CSS в новое окно.

источник

2013-06-28 17:36:44

вы можете проверить это

 'http://jsfiddle.net/ni3net/zPhP3/'

это работает прекрасно ..

может быть переменная заголовок, имеющий некоторую строку терминатора характер, как (»,",> <)

источник

2013-06-10 18:31:04

Как вставить таблицу стилей в новое окно документа в приложении Rally

ответ

Смежные вопросы