Как выбрать строку gridpanel как HTMLELEMENT в extjs 4

Я хочу выбрать строку сетки (HtmlElement) и попытаться применить к ней класс css. , но не удалось выбрать строку в сетке в extjs 4.Как выбрать строку gridpanel как HTMLELEMENT в extjs 4

Я выбираю строку на checkboxSelectionModel pattern и хочу добавить/удалить cls. В 1.X extjs код выглядит так;

function UncheckCheckHeader(control) 
{ 
var grid=<%=grdForms.ClientID%>; 
var hd =Ext.get(grid.getView().getHeaderCell(0).childNodes[0]); 

var store = grid.store; 

if(store.getCount()== control.getCount()) 
{ 
if(!hd.hasCls('x-grid3-hd-checker-on')) 
{ 
hd.addCls('x-grid3-hd-checker-on'); 
} 
} 
else 
{ 
if(hd.hasCls('x-grid3-hd-checker-on')) 
{ 
hd.removeCls('x-grid3-hd-checker-on'); 
} 
} 
}

и Header Нажмите является:

<HeaderClick Fn="function(ct, column, e, t, eOpts) 
              { debugger;     
               if(column.getIndex() == 0) 
               { 
                var hd = Ext.fly(e.target.parentNode); 

                var isChecked = hd.hasCls('x-grid3-hd-checker-on'); 
                var showSelectedOn=false; 
                if(!showSelectedOn) 
                { 
                if(isChecked) 
                { 
                 selectionHeaderChecked=true; 
                 #{checkSelectionModel}.setLocked(false); 
                 #{checkSelectionModel}.selectAll(); 
                 #{checkSelectionModel}.setLocked(true); 
                } 
                else 
                { 
                 selectionHeaderChecked=false; 
                 #{checkSelectionModel}.setLocked(false); 
                 #{checkSelectionModel}.deselectAll(); 
                 #{checkSelectionModel}.setLocked(true); 
                } 
               } 
               else 
               { 
                if(!selectionHeaderChecked) 
                { 
                 hd.addCls('x-grid3-hd-checker-on'); 
                } 
                else 
                { 
                 hd.removeCls('x-grid3-hd-checker-on'); 
                } 
                }   
               }                      
               }" />

У меня есть ExtJS сетки с CheckBoxSelectionModel. Выбор флажка заголовка проверяет все записи и отменяет выбор флажка, деактивирует все записи, конечно, это поведение. В моей сетке есть кнопка удаления, чтобы удалить выбранные/все записи и работает нормально.

Теперь моя проблема в том, что, когда я устанавливаю флажок в заголовке (чтобы все записи были выбраны) и удаляет мою кнопку удаления, все записи в сетке удаляются. Но выбор флажка в заголовке столбца по-прежнему остается таким, как отмечено.

Я использовал код: grid.getSelectionModel(). DeSelectAll(); очистить выбор, после удаления. Я думаю, этот код применим только к записям в сетке и не имеет ничего общего с частью заголовка столбца. Есть ли способ, я могу отменить выбор chekbox в заголовке?

В подробном исследовании я с удивлением узнал, что флажок, отображаемый в CheckBoxSelectionModel, не является html-флажками, но они являются изображениями. Поэтому моя идея отменить выбор флажка с использованием концепции DOM здесь не применима. Вместо этого нужно сделать какой-то трюк CSS.

С кем-либо сталкивался такой вопрос раньше? Есть ли решение для этого? Любая помощь будет оценена. Благодаря!

источник

2013-06-19 user2110717

Я ищу ячейку заголовка здесь ... – user2110717

Мы можем сделать много способов, пожалуйста, обратитесь ниже

var summaryRow = grid.getView().getFeature(0); 
styleObj = { 
    'background-color': '#c5c5c5' 
}; 
summaryRow.view.el.setStyle(styleObj);

Или

var summaryRow = grid.getView(); 
styleObj = { 
     'background-color': '#c5c5c5' 
}; 
summaryRow.addRowCls(<index>, styleObj);

Спасибо.

источник

2013-06-19 10:47:50 Hariharan

спасибо, что вы правы, но мне нужно получить доступ к этому классу «x-grid-hd-checker-on» для выбора/отмены всех строк сетки. – user2110717

Хорошо, чтобы решить вашу PLM, мне нужно пройти через структуру кода. Лучше обратитесь к примеру ссылки http://docs.sencha.com/extjs/4.2.1/#!/example/grid/grid-plugins.html Я надеюсь, что u получит этот код в вашем пакете sdk extjs, для вашей справки см. путь в /examples/grid/grid-plugins.html – Hariharan

Мое понимание: Вы хотите добавить и удалить CSS, основанный на selection.You могли бы сделать это с помощью:

grid.getView().addRowCls(rowindex, "yourCssClass");

и удалить CSS с помощью:

grid.getView().removeRowCls("rowindex","yourCssClass");

Вы можете использовать выше in selectiononchange и deselect прослушиватели событий сетки. Это до вас, как играть с ними. Спасибо.

источник

2013-06-19 11:32:04 Dev

Как выбрать строку gridpanel как HTMLELEMENT в extjs 4

ответ

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