กดปุ่มเครื่องมือ รูปคีมที่มุมขวาบนกันเลย เลือก Options
เลือก Get themes ตรงหัวข้อ Themes ภายใต้ tab [Personal Stuff] รอสักครู่ Chrome จะไปที่ Web แสดงหน้าตาต่างๆ ที่สามารถจะ [Apply theme] ได้
เลือกหน้าตาที่เราพอใจแล้วกดปุ่ม [Apply theme] รอสักครู่ Chrome จะทำการติดตั้ง Theme ใหม่ให้เราเสร็จเรียบร้อย รวดเร็ว ทันใจวัยรุ่น
คราวนี้เข้าเรื่องได้แล้วคับ ความเดิมต่อจาก 2 ตอนที่แล้ว เราได้ลองทำงานกับ extjs-test ภายใต้ path C:\extjs-text แต่การจะปรับแต่ง แก้ไข component ต่างๆของ Ext JS ต้องผ่านขั้นตอนการแก้ไข code -> save file -> แล้วถึงจะไป refresh ที่ Chrome ถึงจะเห็นการเปลี่ยนแปลง แม้แต่จะลองเปลี่ยนขนาดของ Object แค่นิดเดียว ก็ต้องทำตามขั้นตอนที่กล่าวมาทั้งหมดใหม่
พออ่านเจอ code ของ คุณ cmcculloh ตาม Link ท้ายบทความ ก็เกิด idea ของเราขึ้นมาทันที ใช้สุดยอด วิชา C&D เอา code ของเขามาดัดแปลง เอ่อ develop กลายมาเป็น javascript ที่เอามาแทรกใน template แรกๆของเรา ได้หน้าตาใหม่แบบนี้คับ ตั้งชื่อให้ว่า extjs-sandbox.html
File extjs-sandbox.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>ExtJS Sandbox</title>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script>
function clearObject()
{
if (Ext.getCmp('idx'))
{
Ext.getCmp('idx').destroy();
}
}
</script>
</head>
<body>
<div id="jsConsole" style="bottom:0px;right:0px;position:fixed; z-index: 99;">
<input id="jsClearObject" type="button" value="Clear" style="float: right; display: inline; " onclick="clearObject()">
<input id="jsConsoleShowConsoleButton" type="button" value="show console" style="float: right; display: none; "
onclick="document.getElementById('jsCode').style.display='block';document.getElementById('jsConsoleShowConsoleButton').style.display='none';document.getElementById('jsConsoleHideConsoleButton').style.display='inline';">
<input id="jsConsoleHideConsoleButton" type="button" value="hide console" style="float: right; display: inline; " onclick="document.getElementById('jsCode').style.display='none';document.getElementById('jsConsoleHideConsoleButton').style.display='none';document.getElementById('jsConsoleShowConsoleButton').style.display='inline';">
<input type="button" value="execute JS" style="float:right;" onclick="eval(document.getElementById('jsCode').value);"><br>
<textarea id="jsCode" rows="25" cols="50" style="float: right; clear: right; display: block;background-color:#FFFFCC "></textarea>
</html>
หลังจากตัดต่อพันธุกรรมแล้ว ก็ได้ code GMO ตามข้างบน โดยขอแทรกในส่วนที่เป็นสีแดง เพื่อให้เกิดความคล่องตัวในการเล่นกระบะทราย หรือ sandbox โดยมีกติกาว่า object ต่างๆของ Ext JS ที่เราจะตัดตอนมา ลอง เล่น เรียน รู้ จะต้องระบุ config id: 'idx' ไว้เสมอนะคับ เพื่อจะได้ลบทิ้งได้ง่ายๆด้วยปุ่ม [Clear] เพราะอาศัยหลัก การของ Ext JS ว่าสามารถเข้าถึง DOM (Document Object Model) ด้วย Ext.getCmp('idx') เพราะฉนั้น ถ้า object ที่เราจะเอามาเล่น มี id เป็น idx ทุกๆอัน (แต่ต้องเล่นทีละอันเท่านั้นนะคับ) เราก็จะลบทิ้งได้ง่ายๆ ด้วย function clearObject ตาม code นี้ไงคับ
Ext.getCmp('idx').destroy();
วิธีการใช้งานก็ไม่สลับซับซ้อนอะไร หลังจาก save file extjs-sandbox.html ไปไว้ที่เดิมของเราคือ C:\extjs-test เราก็ใช้ Chrome เปิดขึ้นมาได้เลยคับ ลืมไปหรือยังคับ Ctrl+O
จะได้พื้นที่ทำงานหน้าตาคล้ายๆรูปด้านซ้ายมือนะคับ พื้นที่สีเหลืองเอาไว้ COPY&PASTE ใส่ code Ext JS ที่เราสนใจ
อย่าลืมระบุ id ให้เป็น idx ด้วยทุกครั้งนะคับ จะได้ใช้งานได้สะดวก ลบทิ้ง วาดใหม่ แก้ code ลองใหม่ได้เรื่อยๆ
ยกตัวอย่างเรื่อง viewport จากบทที่ 2 เราไป copy code snippet ย่อยส่วนที่เป็นการสร้าง viewport มาได้ตามนี้
if (Ext.getCmp('idx')){Ext.getCmp('idx').destroy();}
var viewport = new Ext.Viewport({
layout: "border"
,id: "idx"
,renderTo: Ext.getBody()
,items: [{
region: "north"
,xtype: "panel"
,html: "North"
},{
region: "west"
,xtype: "panel"
,width: 100
,html: "West"
},{
region: "center"
,xtype: "panel"
,html: "Center"
},{
region: "east"
,xtype: "panel"
,width: 100
,html: "East"
},{
region: "south"
,xtype: "panel"
,html: "South"
}]
});
เราแค่แทรก 2 บรรทัดที่ hilight ด้วยสีแดงเท่านั้นเองคับ เป็นอันเสร็จกระบวนการ เราเอา code ย่อย (snippet) นี้ไป paste ลงในพื้นที่สีเหลืองของพันธมิตร เอ้ย.. ของ Chrome ได้แล้วคับ กดปุ่ม [execute JS] จะได้ viewport ขึ้นมาแสดงในจอเดียวกัน
จากนั้นลองกดปุ่ม [hide console] เพื่อดูหน้าจอเต็มๆ ไม่มีสีเหลืองมากวน ปุ่มบังคับจะเลื่อนไปอยู่ที่มุมขวาล่าง
กดปุ่ม [Clear] สลับกับปุ่ม [execute JS] เพื่อลบ object ทิ้งไป และให้สร้าง object ขึ้นมาใหม่
คราวนี้เราจะมาลอง ดัดแปลง Ext JS code snippet กันละ โดยทำคล้ายๆกับบทที่ 2 คือตัด region east กับ south ออก ขยาย west ให้เป็น 200 เราทำได้ทันทีในพื้นที่สีเหลือง แก้ไขเสร็จแล้วกดปุม [execute JS] เพื่อดูผลการ แก้ไขได้แบบรวดเร็ว สะจายยย ทำให้การเรียนรู้ Ext JS น่าสนใจขึ้นมากมาย เห็นด้วยไหมคับ
Reference:
https://chrome.google.com/extensions/detail/ohpmcainjdkbnkmkfmfbadfljaogedna
by cmcculloh
ขอขอบคุณในการให้แนวทางการสร้าง sandbox แบบง่ายๆนี้ขึ้นมาคับ ตอน search google ก็หวังจะได้แค่ Javascript Console แบบ multiline สำหรับ Chrome เท่านั้น กลับได้กำไรหลายเท่าตัว ขุมทรัพย์รอเราอยู่ใน Internet เสมอแหละคับ รอเวลาให้เราไปขุดหากันเอง
จบบทความที่ 3 สั้นๆแค่นี้ก่อนนะคับ ขอเวลาไปดีจัยก่อน หุหุ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น