本篇是介紹「建立基本控制項」，先在 Scripts/Example/ 建立 base-control.js，在頁面上 ( *.html ) 也只需要套用 base-control.js。
在使用 Extjs 開始，必須要引入要使用到的套件，可以把這個動作想成是在寫一個 C# 類別時，上面會 using 哪幾個 dll 一樣：
Ext.require([
'Ext.form.*',
'Ext.layout.container.Absolute',
'Ext.window.Window',
'Ext.Button'
]);
並且和 jQuery 的 $( document ).ready() 一樣，在文件載入時就會執行的函式：
Ext.onReady(function () {
// 內容
});
本篇是要使用 Window 視窗內嵌一個表單 ( form )，所以基本上要先建立 form 內容：
var form = Ext.create('Ext.form.Panel', {
defaultType: 'textfield', // 預設 tpe (xtype) 沒有指定就是textfield
border: false, //不要外框
layout: 'form', // form 的形式顯示 items 自動填滿畫面
padding: 10, // 為 css padding 10 px
item: [
// 表單內容
]
});
也要建立 Window 視窗放 form：
// 建立一個window 的框
var win = Ext.create('Ext.window.Window', {
id: 'windowId',
autoShow: true,
title: '基本控制項',
layout: 'fit',
items: form,
width: 500,
y:20
});
執行後可以得到這樣的畫面：
在表單內容部分，每個欄位設定是 json 格式，類似帶參數的方式來改變與調整控制項的特性：
[
{
id: 'textfieldId',
xtype: 'textfield',
fieldLabel: '文字欄位',
msgTarget: 'side',
allowBlank: false,
name: 'textfield',
},
{
id: 'numberfieldId',
xtype: 'numberfield',
name: 'bottles',
fieldLabel: '數字欄位',
value: 99,
maxValue: 99,
minValue: 0
},
{
id: 'comboboxId',
xtype: 'combobox', //類似下拉式選單
editable:false,//可否自己輸入
queryMode: 'local', // local / remote remote 按下就會reload store
fieldLabel: '下拉欄位',
name: 'combobox',
},
{
id: 'textareaId',
fieldLabel: '文字區域欄位',
xtype: 'textarea',
name: 'textarea',
},
{
id: 'radiogroupId',
xtype: 'radiogroup',
fieldLabel: '單選欄位',
name:'radioValue',
columns: 2, //1 row = 2 columns
vertical: true,
items: [
// 單選內容
{ boxLabel: '靜態 1', name: 'rb', inputValue: '1' },
{ boxLabel: '靜態 2', name: 'rb', inputValue: '2', checked: true },
]
}
],
// 按鈕
buttons: [{
text: 'Send',
handler: function () { // button 按下動作
}
}, {
text: 'Cancel'
}]
設定完成執行後的畫面
如果要在這些欄位加上資料就要先把 API 做好，在 ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 基本配置 已經有說明了，所以決定使用 employee 的 API， URL： http://localhost/api/Employee/ 。
所以在 Extjs 裡面要先將資料放在 Ext.data.JsonStore 內：
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'store',
//model: 'Model',
//欄位 也可以使用model
fields: ['EmployeeID', 'LastName', 'FirstName', 'Title', 'TitleOfCourtesy', 'BirthDate', 'HireDate', 'Address', 'City', 'Region', 'PostalCode', 'Country', 'HomePhone', 'Extension', 'Notes', 'ReportsTo', 'PhotoPath','Photo'],
proxy: {
type: 'ajax',
url: 'http://localhost/api/Control',
reader: {
type: 'json',
}
},
autoLoad: true, //自動載入
listeners: {
load: function (store, records, options) { // sotre load 完成後載入這個fucntion
}
}
})
最後讀取到的資料放入到各欄位中，完成的程式碼為：
//載入會用到的程式
Ext.require([
'Ext.form.*',
'Ext.layout.container.Absolute',
'Ext.window.Window',
'Ext.Button'
]);
Ext.onReady(function () {
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'store',
//model: 'Model',
//欄位 也可以使用model
fields: ['EmployeeID', 'LastName', 'FirstName', 'Title', 'TitleOfCourtesy', 'BirthDate', 'HireDate', 'Address', 'City', 'Region', 'PostalCode', 'Country', 'HomePhone', 'Extension', 'Notes', 'ReportsTo', 'PhotoPath','Photo'],
proxy: {
type: 'ajax',
url: 'http://localhost:8090/api/Control',
reader: {
type: 'json',
}
},
autoLoad: true, //自動載入
listeners: {
load: function (store, records, options) {// sotre load 完成後載入這個fucntion
Ext.getCmp('textfieldId').setValue(records[0].get('Title'));//取得Id 為textfieldId 的元件 使用setValue的方法給值 record.get() 取得Title
Ext.getCmp('textareaId').setValue(records[0].get('Notes'));
Ext.getCmp('comboboxId').setValue(records[0].get('EmployeeID'));
var tempRadioGroup = Ext.getCmp('radiogroupId');
for (var i = 0; i < records.length; i++) {
//RadionGroup 加入 radio button
tempRadioGroup.add({
boxLabel: records[i].get('FirstName'), name: 'radioGroup', inputValue: records[i].get('EmployeeID')
})
}
}
},
})
//建立 form 框架
var form = Ext.create('Ext.form.Panel', {
defaultType: 'textfield', //預設 tpe (xtype) 沒有指定就是textfield
border: false, //不要外框
layout: 'form', //form 的形式顯示 items 自動填滿畫面
padding: 10, //css padding 10 px
items:
[
{
id: 'textfieldId',
xtype: 'textfield', //item type
fieldLabel: 'textfieldLabel',
msgTarget: 'side',
allowBlank: false,
name: 'textfield',
},
{
id: 'numberfieldId',
xtype: 'numberfield',//數字欄位
//anchor: '100%',
name: 'bottles',
fieldLabel: 'Bottles of Beer',
value: 99,
maxValue: 99,
minValue: 0
},
{
id: 'comboboxId',
xtype: 'combobox', //類似下拉式選單
editable:false,//可否自己輸入
queryMode: 'local', // local / remote remote 按下就會reload store
store: store, //資料來源
displayField: 'Title', //顯示欄位
valueField: 'EmployeeID', //value 欄位
fieldLabel: 'comboboxfieldLabel',
name: 'combobox',
},
{
id: 'textareaId',
fieldLabel: 'textareaLabel',
xtype: 'textarea',
name: 'textarea',
},
{
id: 'radiogroupId',
xtype: 'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
name:'radioValue',
columns: 2, //1 row = 2 columns
vertical: true,
items: [
{ boxLabel: '靜態 1', name: 'rb', inputValue: '1' },
{ boxLabel: '靜態 2', name: 'rb', inputValue: '2', checked: true },
]
}
],
buttons: [{
text: 'Send',
handler: function () {//button 按下動作
this.up('form').getForm().isValid();//檢查form isValid 檢查條件是否符合
}
}, {
text: 'Cancel'
}]
});
//建立一個window 的框
var win = Ext.create('Ext.window.Window', {
id: 'windowId',
autoShow: true,
title: '基本控制項',
layout: 'fit',
items: form,
width: 500,
y:20
});
});最後顯示的頁面就會變成：
沒有留言 :
張貼留言