2016-07-25 5 views
1

Я не могу найти правильный ответ на два вопроса относительно сетки (много разных ответов, ни один хороших):ExtJS 4 и вопросы сетки

  • как можно отцентрировать текст в ячейках сетки по вертикали;
  • Как я могу отображать вертикальные линии, а также горизонтальные.

Будьте любезны, пожалуйста, сообщите мне, пожалуйста.

example

ответ

0

Применить пользовательские CSS к сетке. Что-то вроде этого:

#GridId div.x-grid-cell-inner { text-align: center; } 
+1

Хотя это может быть ценным намеком, чтобы решить эту проблему, ответ действительно должен продемонстрировать решение. Пожалуйста, [править], чтобы предоставить пример кода, чтобы показать, что вы имеете в виду. В качестве альтернативы подумайте о том, чтобы вместо этого писать это как комментарий. –

+0

@TobySpeight У меня должно быть 50 репутации, чтобы добавить комментарий к другим сообщениям. – Vel

+0

Попробуйте применить CSS к этой сетке. #GridId div.x-grid-cell-inner { text-align: center; } – Vel

0

Чтобы центрировать текст в центре колонны используют align свойство, таким образом align: 'center'. Обратите внимание, что столбец электронной почты централизован.

В случае вертикальных линий это сложнее. ExtJS имеет параметр для отображения строк столбца columnLines: true, но не имеет свойства для отображения строк строк. Таким образом, мы должны использовать класс CSS и установить нижнюю границу, таким образом border-bottom-color: red !important;

Для тестирования в других версиях доступа ExtJS this fiddle.

var Grid1Store = new Ext.data.JsonStore({ 
 
    fields: ['id', 'name', 'email'], 
 
    autoLoad: true, 
 
    data: [{ 
 
     "id": 1, 
 
     "name": "John Smith", 
 
     "email": "[email protected]" 
 
    }, { 
 
     "id": 2, 
 
     "name": "Anna Smith", 
 
     "email": "[email protected]" 
 
    }, { 
 
     "id": 3, 
 
     "name": "Peter Smith", 
 
     "email": "[email protected]" 
 
    }, { 
 
     "id": 4, 
 
     "name": "Tom Smith", 
 
     "email": "[email protected]" 
 
    }, { 
 
     "id": 5, 
 
     "name": "Andy Smith", 
 
     "email": "[email protected]" 
 
    }, { 
 
     "id": 6, 
 
     "name": "Nick Smith", 
 
     "email": "[email protected]" 
 
    }] 
 
}); 
 

 
var onReadyFunction = function() { 
 

 
    var grid = new Ext.grid.GridPanel({ 
 
     renderTo: Ext.getBody(), 
 
     frame: true, 
 
     title: 'Example', 
 
     width: 450, 
 
     height: 200, 
 
     store: Grid1Store, 
 
     columns: [{ 
 
      header: "Id", 
 
      dataIndex: 'id', 
 
      width: '50px' 
 
     }, { 
 
      header: "Name", 
 
      dataIndex: 'name', 
 
      width: '150px' 
 
     }, { 
 
      header: "Email", 
 
      dataIndex: 'email', 
 
      width: '200px', 
 
      align: 'center' 
 
     }] 
 
    }); 
 
} 
 
Ext.onReady(onReadyFunction);
.x-grid-cell { 
 
    border-bottom-color: red !important; 
 
}
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script> 
 
<link type="text/css" rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css")/>

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