В принципе, в UniGui для большинства компонентов работает метод .webfocus Но, есть некоторые компоненты, для которых этот метод не работает, и тогда приходится “допиливать” все самим. В этом небольшом посте я покажу как легко и просто можно узнать id элемента.
Поставим учебную задачу – на форме будет 2 кнопки (UniButton), по нажатию первой – фокус перейдет на вторую. Также добавим UniEdit Задача элементарная, но решим её несколькими способами – на чистом Delphi и на Delphi+ExtJS и на чистом ExtJS.
На чистом Delphi
|
1 2 3 4 |
procedure TMainForm.UniButton1Click(Sender: TObject); begin UniButton2.WebFocus; end; |
На Delphi+ExtJS
|
1 2 3 4 |
procedure TMainForm.UniButton1Click(Sender: TObject); begin UniSession.AddJS('Ext.get( '''+ UniButton2.JSName+'''+''_id'').focus()'); end; |
Почему так? Если запустить UniGui приложение и посмотреть на код, нажав на Ctrl+U, можно увидеть следующее
|
1 |
O1B=new Ext.button.Button({id:"O1B_id",text:"UniButton2",scale:"medium",width:241,height:25,x:496,y:8}); |
То есть, иными словами id для кнопки представляет собой литерал вида O1B_id. В Delphi showmessage(UniButton2.JSName); выдаст O1B, соответственно, для того, чтобы получить O1B_id нам необходимо составить конструкцию вида
|
1 |
'''+ UniButton2.JSName+'''+''_id'' |
Если с кавычками для меня все более менее понятно, то с плюсами пока ещё не разобрался. Это не преобразование типов в JS, это что-то чисто дельфийское. Без них не работает.
В принципе на этом все. Где конкретно у меня не сработал метод .webfocus? Для элемента UniHtmlMemo1 так как он состоит из некоторых дочерних элементов, и для того, чтобы поставить фокус на поле ввода, нужно подобраться к одному из этих дочерних элементов. Об этом я более подробно писал в соответствующем посте.
На чистом ExtJS (более простой и красивый способ)
В Delphi, на одной из кнопок зайдем в объектном инспекторе в ClientEvents, выберем там обработку события click и далее напишем такой код…
|
1 2 3 4 5 6 7 |
function click(sender, e, eOpts) { var MyComponentId=MainForm.UniButton2.getId(); MainForm.UniEdit1.setValue(MyComponentId); Ext.get(MyComponentId).focus(); } |
В итоге id выведется в UniEdit1 по нажатию одной из кнопок. У меня вышел id вида O17_id