**شروع کار با Instance فیلد ها**
همانطور که در قسمت قبل اشاره شد، تمامی فیلد های فرم ساز در واقع یک Instance از کامپوننت های کتابخانه Devextreme هستند.
بنابراین در این قسمت تمرکز اصلی ما بر روی این کتابخانه خواهد بود.
ساختار کامپوننت های Devextreme:
تمامی کامپوننت های devextreme یک سری Option، یک سری رویداد و یک سری method دارند و با استفاده از instance آن که توسط viewModel به شما ارائه میشود میتوانید روی رویداد های آن listener اضافه کنید، متد هارا فراخوانی کنید یا Option های کامپوننت را تغییر دهید.
بطور مثال، با استفاده از کد زیر میتوانید روی یک TextBox، فوکوس کنید:
```js
viewModel.fields.MyTextBoxField_Instance.focus();
```
یا با استفاده از کد زیر میتوانید یک listener به کامپوننت اضافه کنید تا زمانی که مقدار فیلد شما تغییر کرد تابع مورد نظر شما اجرا شود:
```js
viewModel.fields.MyTextBox_Instance.on('valueChanged', function(event) {
console.log('the value of MyTextBox field has changed:', event.value);
});
```
همچنین، جهت تغییر Option های کامپوننت، میتوانید از متد option استفاده کنید:
```js
viewModel.fields.MyTextBox_Instance.option('hint', 'My custom hint');
```
توجه داشته باشید که مثال هایی که زده شد فقط برای فیلد متنی است و ممکن است برای بعضی از فیلد ها این کد ها فرق داشته باشد.
ضمنا این نکته را در نظر داشته باشید که بعضی از فیلد ها از Devextreme استفاده نمیکنند و ممکن است توسط خود شرکت گراف نوشته شده باشند.
در ادامه Instance مربوط به تک تک فیلد ها بررسی خواهند شد.
----
**فیلد متنی:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxTextBox/
---
**فیلد عددی:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxNumberBox
---
**فیلد تاریخ:**
این فیلد توسط خود گراف توسعه داده شده است.
جهت دسترسی به instance فیلد تاریخ باید بدین شکل عمل کنید:
```js
const instance = viewModel.fields.MyDatePicker_Instance.element().parent().parent().gbDatePicker('instance');
```
**لیست Option ها:**
| نام Option | توضیحات | مثال
|----|----|-------|
| disabledDates | تنظیم روز های غیرفعال به صورت آرایه ای | \[‘1379/06/13’, ‘1400/07/01’\] |
| disabled | فعال یا غیرفعال بودن DatePicker | true |
| readOnly | فقط خواندنی یا قابل ویرایش بودن DatePicker | true |
| showClearButton | نمایش یا عدم نمایش دکمه خالی کردن مقدار | false |
| startFrom | تنظیم اینکه انتخاب تاریخ از چه روزی شروع شود | ‘1403/01/01’ |
| endsWith | تنظیم اینکه انتخاب تاریخ نهایتا تا چه روزی باشد | ‘1404/01/01’ |
| placeholder | تنظیم متن راهنما | ‘تاریخ خود را وارد کنید’ |
| includeTime | تنظیم اینکه آیا به همراه تاریخ، زمان هم انتخاب شود یا خیر | False |
**لیست رویداد ها:**
| نام رویداد |توضیحات رویداد |
|---|----|
| changeDay | وقتی که روز انتخاب شده توسط کاربر تغییر کند |
| changeMonth | وقتی که ماه انتخاب شده توسط کاربر تغییر کند |
| changeYear | وقتی که سال انتخاب شده توسط کاربر تغییر کند |
| input | وقتی که مقدار تغییر کند |
**فیلد زمان:**
این فیلد توسط خود گراف توسعه داده شده است.
جهت دسترسی به instance فیلد زمان باید بدین شکل عمل کنید:
```js
const instance = viewModel.fields.MyTimePicker_Instance.element().parent().parent().gbTimePicker('instance');
```
**لیست Option ها:**
| نام Option |توضیحات|مثال|
| --- | --- | --- |
| disabled | فعال یا غیرفعال بودن DatePicker | true |
| readOnly | فقط خواندنی یا قابل ویرایش بودن DatePicker | true |
| showClearButton | نمایش یا عدم نمایش دکمه خالی کردن مقدار | false |
| placeholder | تنظیم متن راهنما | ‘تاریخ خود را وارد کنید’ |
| showSecound | اینکه آیا ثانیه هم نمایش داده شود یا خیر | false |
| showMillisecond | اینکه آیا میلی ثانیه هم نمایش داده شود یا خیر | false |
**لیست رویداد ها :**
| نام رویداد | توضیحات رویداد |
| --- | --- |
| input | وقتی که مقدار تغییر کند |
----
**فیلد بلی/خیر:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
در صورتی که حالت switch فعال نباشد:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxCheckBox
در صورتی که حالت switch فعال باشد:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxSwitch
----
**فیلد انتخابی:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxSelectBox
----
**فیلد فایل:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxFileUploader/
----
**فیلد نقشه:**
فرم ساز گراف جهت نمایش نقشه از کتابخانه leaflet استفاده میکند.
با استفاده از کد زیر میتوانید به instance کتابخانه leaflet دسترسی داشته باشید:
```js
const leafletInstance = viewModel.fields.MyMapField_Instance.mapInstance;
```
جهت کار با instance نقشه leaflet به مستندات leaflet مراجعه نمایید:
https://leafletjs.com/reference.html
----
**فیلد لیست درختی:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxTreeList
----
**فیلد دکمه:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxButton/
----
**فیلد تودرتو (ساب فرم):**
فیلد تودرتو (ساب فرم) شامل 2بخش است، مدال مربوط به تودرتو (ساب فرم) و گرید مربوط به تودرتو (ساب فرم).
جهت دریافت Instance مدال و گرید مربوط به تودرتو (ساب فرم) بدین شکل عمل کنید:
```js
const modalInstance = $('#modal_SUBFORMNAME').dxPopup('instance');
```
```js
const dataGridInstance = $('#grid_SUBFORMNAME').dxDataGrid('instance');
```
جهت مشاهده لیست متد ها، آپشن ها و رویداد های Popup به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxPopup
جهت مشاهده لیست متد ها، آپشن ها و رویداد های DataGrid به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxDataGrid
---
**فیلد تب:**
این فیلد از کتابخانه Devextreme استفاده میکند.
جهت مشاهده لیست متد ها، آپشن ها و رویداد ها به این صفحه مراجعه نمایید:
https://js.devexpress.com/jQuery/Documentation/22_2/ApiReference/UI_Components/dxTabPanel/