rmxbot

[ExtJS 4] Rowexpander и Grid. Раскрыть заданный пункт

20.06.2012, 11:51. Показов 2776. Ответов 0
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток!

Нужна помощь ExtJS 4.
Есть ComboBox. Есть Grid. К Grid'y подключен плагин rowexpander.
ComboBox и Grid берут данные из одного массива.

Цель скрипта: после выбора элемента в ComboBox'e открыть соответствующий rowexpander в табличке.
Т.е. Пользователь в ComboBox'e выбирает «Alcoa Inc» и поле этого в Grid'e в строке с именем компании «Alcoa Inc» rowexplander становится раскрытым.

Проблема: Не могу обратится к записи в таблице и вызвать событие expandbody/collapsebody

После выбора в ComboBox'e я получаю id выбранного пункта, который соответствует id записи в Grid'e, но как его использовать, что б обратится – не могу понять.

JavaScript
1
grid.getView().getNode(0)
— получилось обратится так, но это не то, что мне поможет.

PS Пока что переменные объявлены window.grid и window.simpleCombo для упрощения отладки

Сам скрипт:

JavaScript
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../examples/ux');
 
Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.ux.RowExpander',
    'Ext.selection.CheckboxModel',
    'Ext.tip.QuickTipManager',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.toolbar.Paging',
    'Ext.ux.SlidingPager',
    'Ext.form.field.ComboBox',
    'Ext.form.FieldSet'
]);
 
Ext.onReady(function(){
    
    Ext.tip.QuickTipManager.init();
 
    var myData = [
        ['0','3m Co',71.72,'9/1 12:00am'],
        ['1','Alcoa Inc',29.01,'9/1 12:00am'],
        ['2','Altria Group Inc',83.81,'9/1 12:00am'],
        ['3','American Express Company',52.55,'9/1 12:00am'],
        ['4','American International Group, Inc.',64.13,'9/1 12:00am'],
        ['5','AT&T Inc.',31.61,'9/1 12:00am'],
        ['6','Boeing Co.',75.43,'9/1 12:00am'],
        ['7','Caterpillar Inc.',67.27,'9/1 12:00am'],
        ['8','Citigroup, Inc.',49.37,'9/1 12:00am']
    ];
 
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        idProperty: 'company',
        fields: [
           {name: 'id', type: 'int'},
           {name: 'company', type: 'string'},
           {name: 'price', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]        
    });
 
    Ext.define('State', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'int', name: 'id'},
        {type: 'string', name: 'name'}
    ]
});
    
    var store = Ext.create('Ext.data.Store', {
        model: 'Company',
        remoteSort: true,
        pageSize: 3,
        proxy: {
            type: 'pagingmemory',
            data: myData,
            reader: {
                type: 'array'
            }
        }
    });
    
    // create the data store for combobox
    function createStore() {
    return Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'State',
        data: myData
    });
}
 
    // create the Grid
    window.grid = Ext.createWidget('gridpanel', {
        title:'Sliding Pager',
        store: store,
        columns: [ {
                id:'company',
                text: 'Company',
                sortable: true,
                dataIndex: 'company',
                flex: 1
            },{
                text: 'Price',
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price',
                width: 75
            },{
                text: 'Last Updated',
                sortable: true,
                dataIndex: 'lastChange',
                width: 75
            }],
        stripeRows: true,
        height:320,
        minHeight: 160,
        width:700,
        frame:true, //+ 
        plugins: [{
            ptype: 'rowexpander',
        id: 'atata',
            rowBodyTpl : [
                '<p>Company: <b>{company}</b></p>',
                '<p><b>$ {price}</b></p>'
            ]
        }],
        collapsible: true,
        animCollapse: false, // end +
        resizable: {
            handles: 's'  
        },
        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 3,
            store: store,
            displayInfo: true,
            plugins: Ext.create('Ext.ux.SlidingPager', {})
        })
    });
 
    grid.render('grid-example');
 
    function open_some_plus(val) {
    
    alert(grid.getView().getNode(val));
 
    }
 
    // Simple ComboBox using the data store
   window.simpleCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        renderTo: 'simpleCombo',
        displayField: 'name',
        width: 700,
        labelWidth: 400,
        store: createStore(),
        queryMode: 'local',
        typeAhead: true
    });
 
simpleCombo.on('select', function() {
    var v = simpleCombo.getValue();
    var record = simpleCombo.findRecord(simpleCombo.valueField || simpleCombo.displayField, v);
    var index = simpleCombo.store.indexOf(record);
    open_some_plus(index);
});
    store.load();
 
});
и html (на всякий случай):

HTML5
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sliding Pager Extension Example</title>
 
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="shared/example.css" />
 
    <style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(../shared/icons/fam/grid.png) !important;
        }
        .add {
            background-image:url(../shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(../shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(../shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(../shared/icons/save.gif) !important;
        }
    </style>
 
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="app2.js"></script>
</head>
<body>
 <div id="simpleCombo"></div>
 <div id="mydiv_id"></div>
<br/>
<div id="grid-example"></div>
</body>
</html>
Подскажите решение, второй день «об стену бьюсь».
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
20.06.2012, 11:51
Ответы с готовыми решениями:

Extjs grid фильтрация
Здравствуйте уважаемые программисты, у меня возник вопрос при стандартной фильтрации компонента grid при вводе данных невозможно ввести...

ExtJs Grid Позиция колонок
Еще раз здравствуйте, я нахожусь на завершающем этапе разработки сайта, мной было сделано сохранение ширины столбцов для каждого...

ExtJs Grid Column Всплывающая подсказка
Здравствуйте, не могли бы вы мне подсказать существует ли в Grid'е всплывающие подсказки для полей таблицы??? Просто кроме подсказки...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
20.06.2012, 11:51
Помогаю со студенческими работами здесь

Как программно раскрыть пункт меню ?
можно? Грубо говоря нужна минидемостраха пунктов меню ... как программно открыть и выделить пункты меню последовательно или хоть...

Ведомость наличия билетов на заданный пункт назначения
Исходная информация содержится в таблицах : «Маршруты» (номер рейса, выезда, пункт назначения, количество мест в автобусе, стоимость...

Создать запрос ближайшего рейса в заданный пункт прибытия
который будет показывать время отправления ближайшего рейса в заданный пункт прибытия.

Распечатать информацию о поездах, движущихся в заданный конечный пункт
В файле хранится информация о движении поездов : номер поезда, маршрут движения, время прибытия, время отправления. Необходимо распечатать...

Структура TRAIN: вывод информации о поездах направляющихся в заданный пункт
Описать структуру с именем TRAIN,содержащую следующие поля: -название пункта назначения -номер поезда -время отправления Написать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

Новые блоги и статьи
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определенном условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru