This tutorial is designed to show how a user can:
- enter a value in a form textbox
- the textbox will use a server-side Autocomplete
- when the item is added, it will update using ajax the QDataGrid.
Creating the text fields in a panel
class TargetForm extends QForm {
protected $pnlAddTarget;
protected function Form_Create() {
$this->pnlAddTarget = new QPanel($this);
$this->pnlAddTarget->Position = QPosition::Relative;
$this->pnlAddTarget->CssClass = 'pnlAddTarget';
$this->pnlAddTarget->Template = __TEMPLATES__ . "/addnewtarget.tpl.php";
This creates a QPanel which is displayed inside the template with:
<?php $this->pnlAddTarget->Render(); ?>
the addnewtarget.tpl.php contains the controls for the text field and the button:
<?php
$this->txtNewTarget->RenderWithError();
$this->btnAddTarget->Render();
?>
Define the controls for autocompletion
/* Define control as autocomplete control */
$this->txtNewTarget = new QAutoCompleteTextBox($this);
// QAutoCompleteTextBoxEvent Action is needed for Ajax respond
$this->txtNewTarget->UseAjax = true;
//Define events around the text box
$this->txtNewTarget->AddAction(new QAutoCompleteTextBoxEvent(), new QAjaxAction('txtNewTarget_Change', $this->pnlWaitIcon));
$this->txtNewTarget->AddAction(new QEnterKeyEvent(), new QAjaxAction('btnAddTarget_Click'));
$this->txtNewTarget->AddAction(new QEnterKeyEvent(), new QTerminateAction());
Problems/Questions
Alright, we have defined the textfield with the QAutoCompleteTextBox controller. That is found in another file.
But I am using the AddActioni and trying to define it for keyevents, but not sure if this is correct or how to explain it properly.
Controller for the Button in the QPanel
$this->btnAddTarget = new QButton($this->pnlAddTarget,"btnAddTarget");
$this->btnAddTarget->CssClass = "button";
$this->btnAddTarget->Text = "Add Account to Targets";
This is how a button that is contained in a panel is defined and the text and css class assigned.
$this->btnAddTarget->AddAction(new QClickEvent(), new QAjaxAction('btnAddTarget_Click'));
Here is the actual ajax action, again, not clear how to explain or document this.
So this is part I but need some comments to help explain how this is working or not working properly.