04 Ext JS Form

วันนี้เรามาเรียนรู้เรื่อง form กันครับ ซึ่งก็คล้ายๆกับ HTML form แต่ดูมีหน้าตาสวยงามกว่ากันมาก component หลักของ Ext JS form มี 2 อัน

• Ext.form.FormPanel
• Ext.form.Field

เริ่มจากการเขียน form แรกกันเลย กำหนดง่ายๆแค่ name , birthdate, email เราจะใช้งาน extjs-sandbox.html จากบทที่ 3 กันนะคับ


code snippet

if (Ext.getCmp('idx')) {Ext.getCmp('idx').destroy();}

var user_form = new Ext.form.FormPanel({

  url: 'register'

  ,id: 'idx'

  ,renderTo: document.body

  ,frame: true

  ,title: 'User Registration Form'

  ,width: 250

  ,items: [{

     xtype: 'textfield'

    ,fieldLabel: 'Name'

    ,name: 'name'

  },{

    xtype: 'datefield'

    ,fieldLabel: 'Birth Date'

    ,name: 'birthdate'

  },{

    xtype: 'textfield'

    ,fieldLabel: 'Email'

    ,name: 'email'

  }]

});

ใช้ Chrome เปิด file C:\extjs-test\extjs-sandbox.html จากความเดิม บทที่ 3

copy code snippet ข้างบนเอาไป paste ในพื้นที่สีเหลือง แล้วกดปุ่ม [execute JS] จะได้ตามรูปข้างล่าง

ขยาย birthdate ให้ขนาดเท่าๆกับ textfield ได้โดยใช้ config

,anchor: '99%'

หรือตัวเลขอื่นที่เหมาะสม

เพิ่มการตรวจสอบให้กับ field เช่น Name ห้ามเป็นค่าว่าง ใช้ config ชื่อ allowBlank: false แปลว่า ไม่อนุญาตให้เป็นค่าว่าง

,items: [{

  xtype: 'textfield'

  ,fieldLabel: 'Name'

  ,name: 'name'

  ,allowBlank: false

},{

click ที่ input box name 1 ครั้ง แต่ไม่ต้องกรอกอะไร แล้วมา click ที่ช่องอื่นเช่น Birthdate จะเห็นช่อง Name มีกรอบแดงๆล้อม รอบ แสดงว่า มีความผิดพลาดเกิดขึ้น แต่ตอนนี้ ยังไม่มีการแจ้ง ข้อความผิดพลาด

เพิ่ม filter ใน datepicker เช่น ห้ามเลือกวันเสาร์ หรือ วันอาทิตย์ ให้ใช้ config disabledDays: [] เลือก 0-6 0 คือวันอาทิตย์ และ 6 คือวันเสาร์ จึงได้เป็น disabledDays: [0,6]

Built-in Validation

Ext JS ได้จัดให้มีการตรวจสอบข้อผิดพลาดของ Input หรือการ validate มาให้เป็นพิเศษ สำหรับ field ที่มักจะ input ผิดพลาดบ่อยๆ เช่น

• email
• url
• alpha
• alphanum

เป็นต้น ตัวอย่างวิธีการใช้งาน ทำโดยระบุ config ว่า


vtype: 'email'

ลองใช้ extjs-sandbox.html ของเราทำการพิสูจน์กันดู

},{

  xtype: 'textfield'

  ,fieldLabel: 'Email'

  ,name: 'email'

  ,vtype: 'email'

}]

กดปุ่ม [Clear] เพื่อลบ form เก่าทิ้ง แล้วกดปุ่ม [execute JS] เพื่อสร้าง form ขึ้นมาใหม่ ทดลองกรอก email จะได้กรอบสีแดง เตือนขึ้นจริงหรือไม่

จะเห็นว่ามีการแสดงเป็นกรอบสีแดงจริง แต่ไม่มีข้อความแจ้งเตือนอธิบายให้กับผู้ใช้งาน

Ext JS ได้จัดข้อความเตือนไว้ให้อยู่แล้ว แต่ต้องระบุไว้ในช่วงต้นๆ นั่นคือ QuickTips และวิธีการเรียกใช้งานคือ

Ext.QuickTips.init();

ลองใส่ไว้ใน code snippet ของเราบรรทัดบนๆเลยคับ

ลองกับ name ก็จะได้ QuickTips ว่า

This field is required

แล้วถ้าเราอยากจะสร้าง custom validation ขึ้นมาเองหละคับ เช่น PID 13 หลัก ต้องเป็นตัวเลข จำนวน 13 หลัก ห้ามกรอกตัวอักษรหรือเครื่องหมายอื่นๆ

Ext JS มีวิธีสร้าง vtypes แบบส่วนตัวมาให้ด้วย

xxxVal สำหรับ regular expression ที่จะ match กับ input
xxxMask สำหรับจำกัด input เช่น ตัวเลขเท่านั้น ตัวอักษรเท่านั้น

xxxText สำหรับข้อความที่จะแสดงใน QuickTips

ตัวอย่างเช่น เราจะสร้าง vtype ชื่อ pid ตามโจทย์ พร้อมวิธีการนำไปใช้งานใน form

Ext.QuickTips.init();
if (Ext.getCmp('idx')) {Ext.getCmp('idx').destroy();}

Ext.form.VTypes['pidVal'] = /^[0-9]{13}/;

Ext.form.VTypes['pidMask'] = /[0-9]/;

Ext.form.VTypes['pidText'] = 'เลขที่บัตรประชาชน ต้องเป็นตัวเลข จำนวน 13 หลัก';

Ext.form.VTypes['pid'] = function(v) {

  return Ext.form.VTypes['pidVal'].test(v);

}

var user_form = new Ext.form.FormPanel({

  url: 'register'

  ,id: 'idx'

  ,renderTo: document.body

  ,frame: true

  ,title: 'User Registration Form'

  ,width: 250

  ,items: [{

    xtype: 'textfield'

    ,fieldLabel: 'PID'

    ,name: 'pid'

    ,vtype: 'pid'

  }]

});

คำอธิบาย

/^[0-9]{13}/ เป็น pattern matching มีที่มาจาก regular expression ทั่วไป

^ หมายถึง ต้องขึ้นต้นด้วย
[0-9] หมายถึงต้องเป็น ตัวเลข 0 1 2 3 4 5 6 7 8 9 เท่านั้น
{13} หมายถึง repeat จนครบ 13 ครั้ง ถึงจะถือว่า matched

Copy เอา code snippet ข้างบน ไปใส่ไว้ในพื้นที่สีเหลืองของ extjs-sandbox.html แล้วกดปุ่ม [execute JS] แล้วลองกรอกข้อมูลในช่อง PID จะพบว่า เราไม่สามารถ key ตัวอักษรใดๆได้เลย นอกจากตัวเลขเท่านั้น และเมื่อ key ตัวเลขไปยังไม่ครบ 13 ตัว กล่อง input จะมีกรอบสีแดง และเมื่อเอา mouse ไปวางบนกล่อง จะได้ QuickTips เป็นข้อความตามที่เราได้ระบุไว้ใน pidText ดังรูปตัวอย่างผลการทดลอง

มารู้จักกับ Form Fields ประเภทอื่นๆที่มีการใช้งานกันพอสมควร

Radio Button ตัวอย่างการใช้งาน เช่น เพศ ( ) ชาย ( ) หญิง ที่เลือกได้แค่อันใดอันหนึ่งเท่านั้น

code snippet

Ext.QuickTips.init();

if (Ext.getCmp('idx')) {Ext.getCmp('idx').destroy();}

var user_form = new Ext.form.FormPanel({

  url: 'register'

  ,id: 'idx'

  ,renderTo: document.body

  ,frame: true

  ,title: 'User Registration Form'

  ,width: 250

  ,items: [{

    xtype: 'radio'

    ,fieldLabel: 'เพศ'

    ,name: 'sex'

    ,boxLabel: 'ชาย'

  },{

    xtype: 'radio'

    ,hideLabel: false

    ,name: 'sex'

    ,boxLabel: 'หญิง'

  }]

});

ComboBox เช่น สถานภาพสมรส : โสด สมรส หม้าย หย่า แยก ที่เลือกได้แค่อันใดอันหนึ่งเท่านั้น

code snippet

if (Ext.getCmp('idx')) {Ext.getCmp('idx').destroy();}

  var mstatus = new Ext.data.SimpleStore({

    fields: ['id', 'desc']

    ,data: [

      ['1', 'โสด']

      ,['2', 'สมรส']

      ,['3', 'หม้าย']

      ,['4', 'หย่า']

      ,['5', 'แยก']

    ]

  });

  var user_form = new Ext.form.FormPanel({

    url: 'register'

    ,id: 'idx'

    ,renderTo: document.body

    ,frame: true

    ,title: 'User Registration Form'

    ,width: 250

    ,items: [{

      xtype: 'combo'

      ,name: 'marital'

      ,fieldLabel: 'สถานภาพสมรส'

      ,mode: 'local'

      ,store: mstatus

      ,displayField: 'desc'

      ,width: 120

    }]

  });

Copy เอา code snippet ข้างบน ไปใส่ไว้ในพื้นที่สีเหลืองของ extjs-sandbox.html แล้วกดปุ่ม [execute JS]

ถึงตรงนี้ น่าจะพอเห็นแนวทางการเขียน application ด้วย Ext JS กันบ้างแล้วนะคับ ขอย้ำเตือนอีกครั้งว่า อยากจะเขียนโปรแกรมให้เก่ง ต้องลงมือทำเอง

ในบทต่อๆไปจะเริ่มต้องเขียนโปรแกรมฝั่ง Server กันแล้วนะคับ เช่น การ submit form ก็ต้องส่งข้อมูลไปให้ Server หรือบางครั้ง ข้อมูลที่จะแสดงใน combobox ก็อาจจะมาจากฝั่ง Server เช่น ชื่อจังหวัด 76 จังหวัด ชื่ออำเภอ ชื่อตำบล เป็นต้น และการแสดงผลใน component ที่เรียกว่า data grid ก็จะต้องทำการ query จาก database และส่งข้อมูลกลับมาให้ client อีกที


ตรงนี้เป็นทางแยกที่สำคัญแล้วคับ เพราะผมต้องขอยอมรับตามตรงว่า ไม่ได้รู้ไปหมดทุกอย่าง พอรู้บ้าง แต่ไม่มีเวลาศึกษาในอีกหลายๆเรื่อง เช่น

• php ไม่ถนัด เพราะใช้แต่ ruby มานาน
• Ruby on Rails จนเดี๋ยวนี้ มีจำนวนผู้ใช้ RoR เพิ่มขึ้นมาก เลยถือโอกาสตามน้ำศึกษา RoR เพิ่มเติม
• Operating System นี่ถนัด Linux Fedora Distro
• ด้านฐานข้อมูลก็ PostgreSQL
• ด้าน GIS ก็มีตั้งแต่ MapServer PostGIS OpenLayers GeoRuby

โชคดีที่รู้ OpenLayers มาก่อนและหลังจากได้รู้จัก Ext JS จึงมีโอกาสได้ค้นเจอ MapFish ซึ่งผนวกรวมเอา OpenLayers กับ Ext JS มาไว้ในที่เดียวกัน ถือว่าโชคดีมาก ระหว่างช่วงที่ผ่านมาก็มีหลายคนพยายามผนวก Ruby กับ Ext JS ซึ่งโดนใจมากอีกเช่นกัน เพราะยอมรับอีกเรื่องว่า สอบตก Design ช่วงเขียน Web Application ในยุคแรกๆไม่ค่อยอยากมองผลงานของตัวเองสักเท่าไร แต่หลังจากได้ Ext JS มาช่วยแบ่งเบาภาระเรื่อง GUI design (Version Ext JS 3.1 เขาจะมี Ext Designer Toolkit มาให้พร้อมกันอีกด้วย) ทำให้การเขียน Web Application เริ่มเข้าที่เข้าทางมากขึ้น พอจะหันกลับไปมองที่ หน้าจอที่เราเขียนขึ้นมาได้สนิทใจมากขึ้น และคิดว่าเท่าที่ได้เกริ่นแนวทางมาเป็นชุดๆๆ เพราะส่วนตัวได้ตัดสินใจเด็ดขาดแล้วว่า จะไปทาง Open Source ในช่วงที่ยังคงมีกำลังสมองไปไหว ที่ลงมือเขียน series ชุดนี้ขึ้นมา เพราะคาดหวังว่า เด็กรุ่นใหม่ โดยเฉพาะผู้ที่อยู่ห่างไกล ขาดโอกาสในด้านเทคนิคการเขียนโปรแกรม ขาดเงินทุนในการซื้อหาตำรา แถมส่วนใหญ่ยังเป็นภาษาอังกฤษ ขาดปัจจัยในการซื้อหา software แม้จะเป็นแผ่น copy ก็ตามเหอะ มันยังคงมีช่องว่างนี้ในสังคมไทยไปอีกนาน

ความรู้จากประสบการณ์การทำงานด้านการเขียน software open source, freeware และกลายสภาพมาเป็น Freelance เต็มตัว จึงอยากถ่ายทอดวิชา ความรู้ที่ได้สะสมมา เพื่อประโยชน์ของผู้ที่ขาดโอกาส แต่มีความมุ่งมั่น ได้ใช้เป็นเครื่องมือในการพัฒนาขีดความสามารถของตัวเอง โดยเฉพาะผู้ที่อยู่ต่างจังหวัด อาจเป็นนักเรียนในโรงเรียนวัดในชนบท เพราะทราบมาว่าภาครัฐจะสนับสนุนให้มีคอมพิวเตอร์ใช้งานกัน บทความที่จะพยายามเขียนเป็น series นี้ น่าจะเกิดประโยชน์กับ ผู้ขาดโอกาสเหล่านั้นบ้าง ไม่มากก็น้อย

ด้วยเหตุดังกล่าว ผมจึงขอไม่เน้นระบบปฏิบัติการ Windows แต่จะเริ่มปูพื้นกับระบบปฏิบัติการ Linux โดยจะใช้ Fedora Core 9 เพราะมี DVD อยู่ 2 ชุดในบ้าน (ไม่ใช่เพราะเหตุผลอื่นใด แฮ่ม) การจะใช้งาน Linux ในคอมพิวเตอร์ที่ลง Windows พร้อมๆกันจะใช้งานโดยผ่าน Virtual Machine ที่จะขอเลือกใช้ VirtualBox เพราะมี License ที่เป็น Freeware และหลังจากคั่นรายการด้วยบทความเกี่ยวกับ VirtualBox และการติดตั้ง Fedora Core 9 บน VirtualBox เสร็จแล้ว จึงจะเริ่มเขียนบทความ Ext JS ในบทต่อๆไป และเมื่อต้องเขียน Server Side Script (โปรแกรมที่ติดต่อกับ Server, Database) ถึงจะเริ่มเขียนปูพื้นเรื่อง Ruby, Ruby on Rails และฐานข้อมูล PostgreSQL เท่าที่จำเป็น

สรุปว่า หากท่านที่สนใจแนวทางที่ได้เล่ามา ก็เชิญติดตามกันต่อไปนะครับ ส่วนผู้ที่ยังยินดีที่จะใช้ Windows กันต่ออย่างเหนียวแน่นก็ต้องขออภัยกันเพราะเราคงต้องแยกทางกันเดิน แต่ถ้าว่างๆเมื่อไรก็ขอเชิญแวะเวียนมาทักทายกันได้นะคับ ยินดีสนทนาด้วย แต่คงไม่อาจตอบปัญหายากๆเกี่ยวกับ Windows และ Commercial Software ให้ได้

พบกันใหม่ในบทความตอนต่อไปครับ


จบบทความที่ 4