Ext JS 4: изменить ширину и высоту виджета редактирования элемента сетки Ext-JS

Я пытаюсь выяснить, как изменить ширину и высоту сетки Ext JS (или любой виджет Ext JS, если на то пошло). Кажется, что они всегда остаются на фиксированной высоте и ширине. Кто-нибудь делал это раньше? Я просто пытаюсь получить доказательство концепции, построенной для оценки этой структуры, против других фреймворков пользовательского интерфейса JavaScript.Ext JS 4: изменить ширину и высоту виджета редактирования элемента сетки Ext-JS

Вот пример я играю с ныне:

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.html

Существуют различные ДИВ HTML-теги, которые составляют сетку, но, к сожалению, столбцы и данные строятся динамически через JavaScript и вы не вижу разметки, просмотрев исходный код HTML. Ниже перечислены теги div HTML, это 4 компонента, обтекающие столбцы и данные сетки. Я могу изменить стили в инструментах разработчика Firebug и Google Chrome, но не в фактическом CSS.

DIV HTML-теги, которые составляют Ext JS сетки:

gridpanel-1010_header 
toolbar-1018 
headercontainer-1011 
gridpanel-1010-body

Вот стили, используемые в примере "клетка-editing.html". Я предполагаю, что он должен быть где-то здесь.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Cell Editing Grid Example</title> 
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
    <link rel="stylesheet" type="text/css" href="../shared/example.css" /> 
    <link rel="stylesheet" type="text/css" href="../ux/css/CheckHeader.css" /> 
    <script type="text/javascript" src="../../bootstrap.js"></script> 

    <script type="text/javascript" src="cell-editing-keith.js"></script> 
</head> 
<body> 
    <div id="editor-grid"></div> 
</body> 
</html>

источник

2012-04-27 MacGyver

Что именно вы пытаетесь достичь? Ваше приложение ExtJs занимает целую страницу или нет? – sha

Да. Я хочу, чтобы сетка занимала всю ширину (и, если возможно, высоту) устройства, на котором оно отображается. Будь то браузер, планшет или телефон. В сетке будет отображаться много столбцов, поэтому чем шире, тем лучше. – MacGyver

Виджеты Ext JS по умолчанию имеют ширину около 600 пикселей. – MacGyver

Если у вас есть сетка сама по себе, вы можете изменить ширину и высоту с помощью свойств JavaScript. Вы не должны контролировать эти атрибуты в CSS, как вы привыкли.

Вы можете просто определить свойства «ширина» и «высота» при создании объекта. Обратите внимание, что код Ext JS будет сбой, если вы используете проценты. Если вы используете номер, он предполагает, что он находится в пикселях. Если вы хотите сделать это с использованием процентов, обязательно поместите одинарные кавычки в процентах.

var grid = Ext.create('Ext.grid.Panel', { 
    ... 
    width: '100%', 
    height: 300, 
    ... 
});

Использование Ext JS раскладок, вероятно, более полезным, если вы понятия не имеете, что устройство (монитор компьютера, планшета, смартфона, и т.д ..) конечный пользователь просматривает виджет на, и виджет/контейнер встроен в другой контейнер. В макете определяется, как размер контейнера для дочерних контейнеров. Я заметил, что это очень похоже на архитектуру Java Swing UI. Разработчики инфраструктуры Ext JS сделали очень хороший способ суммирования макетов, которые вы найдете на веб-страницах, подобно архитектурам, которые используют дизайнеры пользовательского интерфейса.

Контейнер Layout (так называемый макет): организует HTML-элементы в их родителю Container и управляет размером своих детей предметов ("предметы только имя свойства рамки Ext JS использует для списка объектов, добавить в контейнер)

- Auto (default layout) 
- Anchor 
- Absolute 
- Table 
- Column 
- Card 
- Hbox 
- Vbox 
- Accordian 
- Border 
- Box 
- Fit

расположение компонентов: организует HTML-элементы для компонента

- Dock Layout 
- Toolbar Layout 
- Field Layout (formerly known as Form Layout in Ext JS 3) 
- TriggerField Layout

источник

2012-04-29 05:19:36 MacGyver

Вы можете использовать CSS для установки ширины и высоты, компонент id или cls config, который вы можете использовать в своем селекторе, используйте инспектор, чтобы опробовать его –

Ext JS 4: изменить ширину и высоту виджета редактирования элемента сетки Ext-JS

ответ

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