Как программно открыть/выбрать панель при layout = accordion

[x11]

Так как компонента типа "SlideShow" в UniGUI отсутствует, пришлось соорудить своего "франкенштейна" на базе основной панели, где layout = accordion, а внутри лежат несколько дочерних панелей с uniImage.

По некоторым причинам нужно программным способом, т.е. отдельными кнопками (командами) листать дочерние панели с картинками.

Как это можно сделать? Даже не знаю, в какую сторону копать.

Спасибо.

[Sherzod]

На форуме были решения. 

[x11]

О, вроде нашел, попробую

http://forums.unigui.com/index.php?/topic/10779-how-expandcollapse-accordion-panels-by-pressing-a-button/&do=findComment&comment=81982

спасибо

 

[x11]

1 hour ago, Sherzod said:

На форуме были решения. 

вопрос по теме

http://forums.unigui.com/index.php?/topic/9429-panels-in-a-accordion-layout/&do=findComment&comment=48877

 

а как вместо uname отправить jsname?

function afterrender(sender, eOpts)
{
    var me=sender;
    me.items.items.forEach(function(item){

        item.addListener('expand', function(){
            ajaxRequest(me, '_expandorcollapse', ['uname='+me.layout.getExpanded()[0].uname]);
        })
    });
}

 

т.к. для кода

  UniSession.AddJS('Ext.onReady(function () {' + YourPanelJSName + '.expand()});'); 

требуется JSName

 

Спасибо.

 

[Sherzod]

Попробуйте nm вместо uname.

[x11]

Все получилось. Спасибо.

 

А еще вопрос, хотя и не совсем по теме: а layout типа accordion можно заставить разворачиваться по горизонтали, а не по вертикали? Т.е. с лева на право.

[x11]

И еще вопрос. можно ли как-то заменить иконки + и - на другие?

А то + и - это добавить/удалить, а не свернуть/развернуть.

Спасибо.

 

[Sherzod]

3 hours ago, x11 said:

И еще вопрос. можно ли как-то заменить иконки + и - на другие?

 Я проверю.

[x11]

Мне кажется, можно как-то через шрифты fontawesome, там есть шевроны

[x11]

On 4/14/2021 at 11:42 AM, Sherzod said:

На форуме были решения. 

Вопрос по коду

function afterrender(sender, eOpts)
{
    var me=sender;
    me.items.items.forEach(function(item){

        item.addListener('expand', function(){
            ajaxRequest(me, '_expandorcollapse', ['uname='+me.layout.getExpanded()[0].uname]);
        })
    });
}

 

а как быть, если панели добавляются в runtime?

Пользователь нажимает "Добавить картинки", выбирает несколько и картинки грузятся на сервер и по количеству картинок программно создается такое же количество дочерних панелей с картинками.

т.е. как ко вновь добавленным дочерним панелям прикрутить что-то вроде:

 

addListener('expand', function(){
            ajaxRequest(me, '_expandorcollapse', ['uname='+me.layout.getExpanded()[0].uname]);

Спасибо.

[x11]

Правильно ли я делаю?

procedure TfrdParentEditObj.AddImage(const AStream: TStream; const  FileName: string);
...
begin
...
...

pnlImage        := TUniPanelPhotos.Create(pnlPhotos);

pnlImage.JSInterface.JSAddListener('expand',

        'function afterCreate(sender) { ' +
        'var me = sender; ' +
        'me.addListener(''expand'', ' +
        '	function(){ajaxRequest(me, ''_expandorcollapse'', [''uname=''+me.layout.getExpanded()[0].uname])});' +
        '}'

  );
...
...

что-то не так, т.к. не отправляется ajaxRequest

[Sherzod]

7 hours ago, x11 said:

pnlImage.JSInterface.JSAddListener('expand', 'function afterCreate(sender) { ' + 'var me = sender; ' + 'me.addListener(''expand'', ' + ' function(){ajaxRequest(me, ''_expandorcollapse'', [''uname=''+me.layout.getExpanded()[0].uname])});' + '}' );

Попробуйте так:

  pnlImage.JSInterface.JSAddListener('expand',
        'function (me) { ' +
        '    ajaxRequest(me, ''_expandorcollapse'', [''uname=''+me.layout.getExpanded()[0].uname]);' +
        '}'
  );

 

[x11]

я ж правильно понимаю, что Listener нужно добавлять к дочерним панелям с картинками?

Или нужно добавлять к родительской панели?

 

потому что пока не хочет работать, и ошибок в консоли нет

[x11]

я добавил colsole.log(''123'');

  pnlImage.JSInterface.JSAddListener('expand',
        'function (me) { ' +
        ' colsole.log(''123'');    ajaxRequest(me, ''_expandorcollapse'', [''uname=''+me.layout.getExpanded()[0].uname]);' +
        '}'
  );

и в консоли ничего нет

вот полный код добавления панелей с картинками:

type
    TUniPanelPhotos = class(TUniPanel)
    public
      img: TuniImage;
  end;


...
...
...
procedure TfrdParentEditObj.FileUploadMultiCompleted(Sender: TObject; Files: TUniFileInfoArray);
begin
  // process files after all files are uploaded
  for var I := Low(Files) to High(Files) do
    if Assigned(Files[I].Stream) then
      AddImage(Files[I].Stream, Files[I].FileName);
end;


procedure TfrdParentEditObj.AddImage(const AStream: TStream; const  FileName: string);
Var
 ImgData: TImageData;
 sLocalPath, ADest, sURL: string;
 img: TUniImage;
 pnlImage: TUniPanelPhotos;
begin
// добавить фото к объекту

  sLocalPath := GetPhotoDirOfObject(fID.ToString, fCurrSuperType);
  if not DirectoryExists(sLocalPath) then
    ForceDirectories(sLocalPath);

  ADest := IncludeTrailingPathDelimiter(sLocalPath) + filename;
  Imaging.InitImage(ImgData);
  Imaging.LoadImageFromStream(AStream, ImgData);
  Imaging.SaveImageToFile(ADest, ImgData);


  //панель, на которой будет лежать картинка
  pnlImage        := TUniPanelPhotos.Create(pnlPhotos);
  pnlImage.Name   := constPnlPhotoImageName + (pnlPhotos.ControlCount + 1).ToString;
  pnlImage.Title  := FileName;
  pnlImage.Parent := pnlPhotos;
  pnlImage.JSInterface.JSAddListener('expand',
        'function (me) { ' +
        ' colsole.log(''123'');    ajaxRequest(me, ''_expandorcollapse'', [''uname=''+me.layout.getExpanded()[0].uname]);' +
        '}'
  );

  //картинка, которая будет лежать на панели
  img             := TUniImage.Create(pnlImage);
  pnlImage.img    := img;
  img.Parent      := pnlImage;
  img.LayoutConfig.Width  := 'auto';
  img.LayoutConfig.Height := '100%';

  if TFile.Exists(ADest) then
  begin
    sURL := GetPhotoUrlOfObject(fID.ToString, fCurrSuperType);
    img.Url  := sURL + FileName + GetNoCacheString;
    img.Hint := img.Url;
    pnlImage.Hint := FileName;
    UniSession.AddJS('Ext.onReady(function () {' + pnlImage.JsName + '.expand()});');//раскрываем последнюю добавленную
    fActivePhotoPanelName := pnlImage.Name;
  end;

  Imaging.FreeImage(ImgData);
end;

 

[Sherzod]

5 minutes ago, x11 said:

я ж правильно понимаю, что Listener нужно добавлять к дочерним панелям с картинками?

Или нужно добавлять к родительской панели?

 

потому что пока не хочет работать, и ошибок в консоли нет

Да,

Тогда попробуйте такой код:

  pnlImage.JSInterface.JSAddListener('afterrender',
    'function (sender, eOpts)'+
    '{                       '+
    '    var me=sender;      '+
    '    me.items.items.forEach(function(item){'+

    '        item.addListener("expand", function(){'+
    '            ajaxRequest(me, "_expandorcollapse", ["uname="+me.layout.getExpanded()[0].uname]);'+
    '        })'+
    '    });   '+
    '}         '
  );

Либо используйте:

ClientEvents

[x11]

4 minutes ago, Sherzod said:

Тогда попробуйте такой код:

нет, не работает

 

4 minutes ago, Sherzod said:

Либо используйте:

ClientEvents

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

[Sherzod]

5 minutes ago, x11 said:

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

Попробуйте:

  ...
  pnlImage.ClientEvents.ExtEvents.Values['afterrender'] :=
    'function afterrender(sender, eOpts)'+
    '{                       '+
    '    var me=sender;      '+
    '    me.items.items.forEach(function(item){'+

    '        item.addListener("expand", function(){'+
    '            ajaxRequest(me, "_expandorcollapse", ["uname="+me.layout.getExpanded()[0].uname]);'+
    '        })'+
    '    });   '+
    '}         '

 

[x11]

16 minutes ago, Sherzod said:

Да,

не совсем понял

код "function afterrender(sender, eOpts)'+"

нужно к родительской панели добавлять или к каждой дочерней?

 

[Sherzod]

Just now, x11 said:

нужно к родительской панели

 

[x11]

добавил  colsole.log(''123'');

нет, не работает, никаких сообщений в консоли нет

procedure TfrdParentEditObj.FileUploadMultiCompleted(Sender: TObject; Files: TUniFileInfoArray);
begin
  inherited;
  // process files after all files are uploaded
  for var I := Low(Files) to High(Files) do
    if Assigned(Files[I].Stream) then
      AddImage(Files[I].Stream, Files[I].FileName);

  pnlPhotos.ClientEvents.ExtEvents.Values['afterrender'] :=
    'function afterrender(sender, eOpts)'+
    '{  colsole.log(''123''); '+
    '    var me=sender;      '+
    '    me.items.items.forEach(function(item){'+

    '        item.addListener("expand", function(){'+
    '            ajaxRequest(me, "_expandorcollapse", ["uname="+me.layout.getExpanded()[0].uname]); colsole.log(''123'');'+
    '        })'+
    '    });   '+
    '}         ';
end;

pnlPhotos - это родительская панель

что еще может быть не так?

[x11]

такое впечатление, что при открытом фрейме, когда загружаешь картинки, код "pnlPhotos.ClientEvents.ExtEvents.Values['afterrender'] :=" в браузер не попадает из бэкэнда

[Sherzod]

8 minutes ago, x11 said:

pnlPhotos.

Назначаете имя?

[x11]

pnlPhotos  лежит на фрейме пустая и имя не меняется.

пользователь нажимает Добавить фото, выбирает 1 или несколько и нажимает загрузить

срабатывает код, описанный выше:

procedure TfrdParentEditObj.FileUploadMultiCompleted(Sender: TObject; Files: TUniFileInfoArray);
begin
  inherited;
  // process files after all files are uploaded
  for var I := Low(Files) to High(Files) do
    if Assigned(Files[I].Stream) then
      AddImage(Files[I].Stream, Files[I].FileName);

//добавляем событие
  pnlPhotos.ClientEvents.ExtEvents.Values['afterrender'] :=
    'function afterrender(sender, eOpts)'+
    '{  colsole.log(''123''); '+
    '    var me=sender;      '+
    '    me.items.items.forEach(function(item){'+

    '        item.addListener("expand", function(){'+
    '            ajaxRequest(me, "_expandorcollapse", ["uname="+me.layout.getExpanded()[0].uname]); colsole.log(''123'');'+
    '        })'+
    '    });   '+
    '}         ';
end;

 

а здесь видно, что имена дочерних панелей генерируются вот так:

pnlImage1,  pnlImage2, pnlImage3

 

//панель, на которой будет лежать картинка
  pnlImage        := TUniPanelPhotos.Create(pnlPhotos);
  pnlImage.Name   := constPnlPhotoImageName + (pnlPhotos.ControlCount + 1).ToString;

 

[Sherzod]

1 minute ago, x11 said:

colsole.log(''123'');

Выводится?

[x11]

нет, вообще ничего