С Новым годом! Форум программистов, компьютерный форум, киберфорум
ExtJS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
rmxbot

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

20.06.2012, 11:51. Показов 2764. Ответов 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
Ответ Создать тему
Новые блоги и статьи
сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru