Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Получение значения ячейки в Grid

Есть вот такой вот грид:
infoView = new Ext.grid.PropertyGrid({
    title: 'Информация об отчете',
    layout: 'fit',
    tools:[
        {
            id: 'save',
            qtip: 'Сохранить отчет',
            handler: function(event, toolEl, panel){
            }
        },
        {
            id: 'plus',
            qtip: 'Создать отчет',
            handler: function(event, toolEl, panel){
            }
        }
    ]
    });


Через store все хорошо подгружается и работает.
Единственная проблема, не могу получить значение выделенной ячейки.

Подскажите пожалуйста, как это можно сделать.

Спасибо!
Ответ: получаем selection model:
http://docs.sencha.com/extjs/5.1/5.1...SelectionModel
из нее можно получить выделение:
http://docs.sencha.com/extjs/5.1/5.1...d-getSelection

или прямо на гриде есть getSelection ..в extjs5.1 во всяком случае ..не знаю вашу версию экста
Вопрос: Обнулить select в Grid

Вопрос у меня банальнейший: хочу сбросить выделение активной строки в гриде (грид без мультиселекта).
Выбирать любой произвольный элемент получается, через setSelection, однако решить получилось очень плохим способом Grid.setSelection(null);
Который ругается на некорректные данные, но выделение сбрасывает.

Как эту же операцию выполнить без костылей?
Ответ: решение оказалось очень простым Grid.getSelectionModel().deselectAll();
Вопрос: CSS GRID Нужна помощь

Здравствуйте уважаемые пользователи.
Недавно начал знакомиться с GRID и что- пошло не так.

Когда пытаюсь добавить два блока сверху, то начинают крушиться остальные.
Два блока сверху нужно чтоб выглядели так

блок1|блок1 |блок1|блок 2

  <div class="wrapper">


<div class="statone holder"><p> test</p>
<div class="block"><p>Тест тест</p></div>
</div>
<div class="stattwo holder"><p title="Этот текст будет показан при наведении">Просто текст</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthree holder">3<p> test</p>
<div class="block"><p>Тест тест</p></div></div>



<div class="statoneb holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="stattwob holder">2<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreeb holder">3<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreeb holder">3<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<!-- третья колонка -->
<div class="statonec holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreec holder"><br><h1>Заголовк</h1></p>
<div class="block"><p>Тест тест</p></div>
</div>
<!-- 4я колонка из 4 -->
<div class="statone holder"><p> test</p>
<div class="block"><p>Тест тест</p></div>
</div>
<div class="stattwo holder"><p>Просто текст</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statone4row holder"><p> test</p>
<div class="block"><p>Тест тест</p></div>
</div>
<div class="stattwo4row holder"><p>Просто текст</p>
<div class="block"><p>Тест тест</p></div></div>
<!-- dva bloka -->
<div class="statonec holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="statthreec holder"><br><h1>Заголовк</h1></p>
<div class="block"><p>Тест тест</p></div>
</div>
<!-- dva bannera-->
<div class="banner holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>
<div class="banner2 holder"><br><h1>Заголовк</h1></p>
<div class="block"><p>Тест тест</p></div>
</div>
<!-- botto -->
<div class="bottom holder">1<p> test</p>
<div class="block"><p>Тест тест</p></div></div>

</div>






p{
text-align: center;
margin: auto;
padding-top: 12%;
color: white;
text-shadow: grey;
}

h1{
vertical-align: bottom;
text-align: center;
padding-right: 20px;
color: white;
}

.statone {
background: green;
}
.stattwo {
background: yellow;
}
.statthree {
background: grey;
}

.statoneb {
background: red;
}
.stattwob {
background: yellow;
}
.statthreeb {
background: grey;
}


.statonec {
background: red;
height: 200px;
}
.stattwoc {
background: yellow;
height: 200px;
}
.statthreec {
background: grey;
height: 200px;
}




.wrapper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 200px 200px 200px;
grid-column-gap: 10px;
grid-row-gap: 10px;
max-width: 1370px;
width: 90%;
margin: auto;
}


.bannerr {
grid-column-start: 1;
grid-column-end: 4;
height: 120px;
background: blue;
}


.bannerr2 {
grid-column-start: 4;
grid-column-end: 5;
height: 120px;
background: green;
}



.statone {
grid-column-start: 1;
grid-column-end: 2;
}

.stattwo {
grid-column-start: 2;
grid-column-end: 3;
}

.statthree {
grid-column-start: 3;
grid-column-end: 5;
}

.statoneb {
grid-row-start: 2;
grid-row-end: 4;
}

.stattwob {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
}

.statthreeb {
grid-column-start: 4;
grid-column-end: 5;
}
.statonec {
grid-column-start: 1;
grid-column-end: 3;
}


.statthreec {
grid-column-start: 3;
grid-column-end: 5;
}

.statone4row{
grid-column-start: 3;
grid-column-end: 4;
height: 200px;
background: palegreen;

}
.stattwo4row{
grid-column-start: 4;
grid-column-end: 5;
height: 200px;
background: rebeccapurple;
}

.banner {
grid-column-start: 1;
grid-column-end: 3;
height: 120px;
background: blue;
}


.banner2 {
grid-column-start: 3;
grid-column-end: 5;
height: 120px;
background: green;
}
.bottom {
grid-column-start:1;
grid-column-end: 5;
height: 400px;
background: green;
}





для блоков сверху пытался встроить так:
   <div class="bannerr holder" id="ads"><a href="#"><h3>&nbsp;Реклама&nbsp;</h3></a>
<div class="block"><p>Тест тест</p></div></div>

<div class="bannerr2"><a href="#"><h3>&nbsp;Реклама&nbsp;</h3></a>
<div class="block"><p>Тест тест</p></div>
</div>
Ответ:
Я хочу добавить два блока сверху, вроде не должно было быть проблем, но когда добавляю сам блок начинается разваливаться. Весь код представлен.

Вопрос: Не получается анимировать через grid. Keyframes, Grid

Знаю, что Grid'ы не включены в стандартную анимацию, поэтому и получается такая ерунда. Но! Т.к. обе эти технологии достаточно просты, думаю местные умельцы со всем этим давно разобрались и смогут мне помочь. Хочу сделать чтоб 4 квадрата с матрицы 2 на 2 складывались один за другим в матрицу 1 на 1. То есть чтоб все 4 сместились в одну точку, и первый квадрат был бы поверх всех них (тот, что синий). Но получается какая-то чушь. В чём ошибка? Как это исправить?
HTML5
1
2
3
4
5
6
<div id="Cont">
      <div class="square" id="perv"></div>
      <div class="square" id="vtor"></div>
      <div class="square" id="tret"></div>
      <div class="square" id="cetv"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
body,html {
    margin:0px;
    padding: 0px;
}
#Cont {
    width: 215px;
    height: 215px;
    border: 2px solid black;
    padding: 5px;
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
    animation-name: logo_1;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite ;
}
.square {
  display: inline-block;
  border-radius: 20%;
  border: 1px solid black;
}
#perv {
  background: #3D5AFE;
}
#vtor {
  background: #FBC02D;
}
#tret {
  background: #FF3D00;
}
#cetv {
  background: black;
}
@keyframes logo_1 {
    0%{
          grid-template-columns: 100px 100px;
          grid-template-rows: 100px 100px;
          grid-gap: 10px;
    }
    90%{
          grid-template-columns: 100px;
          grid-template-rows: 100px;
          grid-gap: 0px;
    }
    100%{
          grid-template-columns: 100px;
          grid-template-rows: 100px;
          grid-gap: 0px;
    }
}
Ответ:
Сообщение от triatri3
grid есть удобная штука - fr
А Вы точно знаете для чего используется эта единица измерения? -

Сообщение от triatri3
Я имею ввиду задав 20 процентов, например, от высоты - получится одно значение, а от ширины - совсем другое.
используйте одно значение, но не процент -
HTML5
1
2
3
<div class="parent">
  <div class="square"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
html,
body {
  height: 100%;
  width: 100%;
}
.parent {
  display: flex;
  height: 55%;
  width: 100%;
  border: 2px solid #000;
}
.square {
  margin: auto;
  height: 20vw;
  width: 20vw;
  background: lightgray;
}
Вопрос: Проблемы с pageSize и grid

Пишу в ExtJs 2.1.0 проект, ищу помощи у вас.

имею вот такой store

var wmsStore = new GeoExt.data.WMSCapabilitiesStore({
        id: 'external_wms_store',
        url: OpenLayers.ProxyHost +            'http://demo.lizardtech.com/lizardtech/iserv/ows?SERVICE=WMS&REQUEST=GetCapabilities',
        autoLoad: true
        
    });


такой grid
var grid = new Ext.grid.GridPanel({
    title: "WMS Capabilities",
    store: wmsStore,
    cm: new Ext.grid.ColumnModel([
        {header: "Name", dataIndex: "name", sortable: true},
        {id: "title", header: "Title", dataIndex: "title", sortable: true}
    ]),
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
     width:774,
    height:429,
       bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: wmsStore,
        displayInfo: true


    })


Но в грид выводятся все данные из store, а не только 10, как по идее должно быть.(Пытался передавать параметры load и auroLoad - не помогло)

Подскажите, пожалуйста!
Ответ: К сожалению, помочь не смогу при всём желании. Моё знакомство с Ext JS началось с версии 4.0.2, а лучше всего я знаю 5 и 6.
Вопрос: kendo ui grid

Всем привет. Передо мной встала задача слегка расширить kendo grid. Хочу скачать версию kendo grid для разработчика(не ужатую и не вытянутую в одну строку). На офф сайте не нашел и вообще нигде не могу найти, может кто то линкой поделиться?)
Ответ: код PRO не открыт. сравнение версий: http://www.telerik.com/kendo-ui/comparison

а исходники бесплатной (core) на гитхабчике: https://github.com/telerik/kendo-ui-core
Вопрос: Баг удаления в Grid с группировкой

Сегодня на продакшене обнаружил очередную проблему с группированным Grid. Я просто обалдел, увидев что происходит

В общем, Fiddle тот же, что и в другой теме:


В этот раз баг с удалением записи:
  1. Открываем инструменты разработчика и смотрим в консоль. Запоминаем id, который собираемся удалить.
  2. Жмем на крестик для любой записи, подтверждаем удаление.
  3. Итог — удаляется совершенно другая запись, что видно в консоли.
Берется позиция до группировки Grid и по ней уже происходит удаление.

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

Данную проблему обнаружил при попытке удалить дублирующую запись, а вместо нее удалялись то одна то другая.
Ответ: VitalikSanich, спасибо, помогло!
Причем мой код удаления взят из официального примера Сенчи.
Вопрос: Grid panel с checkbox

Как реализовать в extJS вот такой grid без использования ASP, как здесь: ??? Заранее спасибо
Ответ: Это называется . Вот пример:
Вопрос: grid: Программное изменение ширины колонки

Подглядев код

я узнал, чтобы изменить ширину колонки недостаточно вызова метода

Ext.grid.column.Column.setWidth()


нужно отменить свойство flex этой колонки.
А делается это при помощи следующего хака:

delete column.flex;


В документации об этом ни слова. Там вообще такого свойства как flex нет.

Вопрос:

Как обойтись без хака?


П.С. Изменение ширины мне потребовалось чтобы сделать синхронизацию внешнего вида двух таблиц (размеры колонок, расположение колонок, видимость колонок и прочее).
Ответ:
Цитата:
... не вижу в нашем коде поддержку для таких случаев, когда колонки сперва определяют ширину динамически через flex, а потом внезапно становятся фиксированной ширины
Так то оно так, конечно, но если создать грид с flex-колонками, а потом мышкой менять размеры колонок, то flex удаляется, а колонки становятся фиксированной ширины.

Это не удобно, ибо хотелось бы чтобы значение flex корректировалось (мышкой). Потом при изменения ширины таблицы появляется либо горизонтальная прокрутка либо пустое место справа - и все это из-за того, что ширины колонок фиксированные.

В итоге в коде сенчи собственно хак и используется. Которым придется воспользоваться.

Спасибо за ответы!
Вопрос: Где лучше хранить рендереры для данных в Grid?

Где лучше хранить рендереры для данных, отображаемых в Grid, чтобы структура приложения была оптимальной.
Ответ: А где вам удобнее, там и храните. У меня, например, так: мелкий однострочник - в самом гриде, если побольше и посложнее - в контроллере. Если один рендерер юзается в нескольких гридах - в общей библиотеке.