CMS：文章管理之视图（2）
上一篇已經(jīng)完成了分類樹的顯示，現(xiàn)在開始逐步完成分類的添加、刪除和編輯操作。
首先要做的是在樹面板上添加一個工具欄，放置添加、刪除和編輯按鈕。切換到文章管理視圖的腳本文件view.js，在樹的定義內(nèi)，添加以下代碼添加工具欄和按鈕：
tbar: [
??? { iconCls: "folder-add", scope:me, tooltip: '增加文章類別',id:"CategoryButtonAdd"},
??? { iconCls: "folder-edit", scope:me, tooltip: '編輯文章類別',id:"CategoryButtonEdit",disabled:true},
??? { iconCls: "folder-delete",scope: me, tooltip: '刪除文章類別',id:"CategoryButtonDelete",disabled:true},
??? { iconCls: "refresh", scope: me,qtip: '刷新',id:"CategoryButtonRefresh" }
]
?
以上代碼基本是復(fù)制來復(fù)制去的了，沒什么特別。樣式里還沒定義編輯按鈕的樣式，在app.css里加上就行了。
現(xiàn)在切換到文章管理控制器的腳本Content.js，通過它們的id，添加4個按鈕的引用，代碼如下：
{ ref:"CategoryAdd", selector: "#CategoryButtonAdd" },
{ ref:"CategoryEdit", selector: "#CategoryButtonEdit" },
{ ref:"CategoryDelete", selector: "#CategoryButtonDelete" },
{ ref: "CategoryRefresh", selector:"#CategoryButtonRefresh" }
?
然后和用戶管理控制器一樣，為4個按鈕綁定單擊事件，代碼如下：
me.getCategoryAdd().on("click",me.onCategoryAdd, me);
me.getCategoryEdit().on("click",me.onCategoryEdit, me);
me.getCategoryDelete().on("click",me.onCategoryDelete, me);
me.getCategoryRefresh().on("click",me.onCategoryRefresh, me);
?
現(xiàn)在，先完成比較簡單的刷新操作，因為要找到文章管理的視圖，因而修改一下使用widget方法創(chuàng)建視圖時的代碼，讓它保存到控制器的屬性中，修改代碼如下：
me.view= Ext.widget("contentview");
panel.add(me.view);
?
這樣修改后，就不需要通過引用去找視圖了。現(xiàn)在就可輕松完成樹的刷新操作了，代碼如下：
onCategoryRefresh:function () {
??? this.view.tree.store.load();
},
?
添加操作將通過一個帶表單的彈出窗口實現(xiàn)，現(xiàn)在來創(chuàng)建這個窗口。在Scripts\app\view\Content目錄下創(chuàng)建一個名稱為CategoryEdit.js的腳本文件。因為是彈出窗口，因而需要從窗口繼承，代碼如下：
Ext.define("SimpleCMS.view.Content.CategoryEdit",{
??? extend: "Ext.window.Window",
??? hideMode: 'offsets',
??? closeAction: 'hide',
??? closable: true,
??? resizable: true,
??? layout: "fit",
??? title: '文章分類',
??? width: 800,
??? height: 600,
??? modal: true,
singleton: true,
?
??? initComponent: function () {
??????? var me = this;
??????? me.callParent(arguments);
??? }
?
})
?
代碼表明窗口可以關(guān)閉，可以調(diào)整大小，布局將采用FitLayout，默認(rèn)寬度為800，高度為600，窗口為模態(tài)窗口。配置項closeAction表明窗口關(guān)閉后，只是隱藏起來，并不是銷毀，而且隱藏方式是通過偏移方式隱藏。
特別要注意，在這里把窗口設(shè)置成了單例模式（配置項singleton為true），目的是為了避免在控制器中先判斷窗口是否已經(jīng)創(chuàng)建，如果還沒有，還要重新調(diào)用create方法創(chuàng)建一次。
如果想看一下效果，可切換到文章管理控制器，在視圖內(nèi)添加“Content.CategoryEdit”引用該視圖。然后在onCategoryAdd方法內(nèi)添加以下代碼：
onCategoryAdd:function () {
??? var me = this
??????? win =SimpleCMS.view.Content.CategoryEdit;
??? win.show();
},
?
好了，現(xiàn)在刷新一下瀏覽器，然后單擊添加類別按鈕，將看到如圖49所示的效果，一切正常。
圖50 分類編輯窗口
現(xiàn)在，要做的就是為窗口添加表單了，根據(jù)表格T_Category，需要編輯的字段包括父類、標(biāo)題、題圖、分類說明和排序序數(shù)。標(biāo)題將采用Textfield進行輸入，題圖則要通過顯示一個彈出窗口，從圖片管理這個擴展中選擇后插入，排序序數(shù)則可選擇使用Number字段輸入，分類說明則用Textarea字段，父類不用說是采用Combobox。
因為要用到一個圖片插入對話框，因而先來完成這個，這個不難，在Scripts/Extjs/ux目錄下先創(chuàng)建一個Dialog的目錄，該目錄的作用是用來放置一些對話框擴展。然后在該目錄下創(chuàng)建一個PicSelected.js的文件，然后可以復(fù)制一下分類編輯窗口的代碼過去，修改一下類名和配置項就可以了，代碼如下：
Ext.define("Ext.ux.Dialog.PicSelected",{
??? extend: "Ext.window.Window",
??? requires: ["Ext.ux.PicManager"],
??? singleton: true,
??? hideMode: 'offsets',
??? closeAction: 'hide',
??? closable: true,
??? layout: "fit",
??? imagePath: "",
??? resizable: true,
??? title: '插入圖片',
??? width: 1000,
??? height: 600,
??? modal: true,
??? initComponent: function () {
??????? var me = this;
?
??????? me.callParent(arguments);
??? }
?
})
?
熟記類名規(guī)則對怎么定義類名就沒什么難度。在這里添加了一個requires的配置項，表明該對話框要用到擴展PicManager。因為后臺的圖片訪問路徑和前臺的訪問路徑可能有差，因而這里特意添加了一個imagePath屬性，用來在插入時更改路徑。其它的配置項與分類編輯窗口基本無差。
對話框的主要作用就是顯示PicManager讓用戶選擇圖片，然后單擊插入按鈕插入圖片路徑，功能比較簡單，因而在initComponent的代碼比較簡單，具體代碼如下：
me.picmanager= Ext.create("Ext.ux.PicManager", { title: "" });
me.items= [me.picmanager];
me.dockedItems= [{
??? xtype: 'toolbar', dock: 'bottom', ui:'footer', layout: { pack: "center" },
??? items: [
??????????? { text: "插入", width: 80, handler:me.onInsert, scope: me }
??? ]
}];
?
現(xiàn)在，要完成插入操作。要插入圖片，首先要從PicManager中獲取到選擇的圖片，這個不難。然后，要獲取插入圖片的控件，這個就需要在顯示對話框的時候指定了，可通過一個名為ed的屬性來實現(xiàn)。思路明確后，就可編寫代碼了，具體代碼如下：
onInsert:function () {
??? var me = this, rs = me.picmanager.dataview.getSelectionModel().getSelection();
??? if (rs.length > 0) {
??????? if (me.ed.isFormField) {
??????????? me.ed.setValue(Ext.String.format("{0}{1}{2}",me.imagePath, rs[0].data.path, rs[0].data.filename));
??????? } else {
??????? }
??? }
??? me.close();
}
?
代碼先從擴展中獲取數(shù)據(jù)視圖的選中的記錄，如果有存在選擇記錄，則判斷ed指向的控件是否一個表單字段，如果是，就可以用setValue方法設(shè)置它的值了。通過Ext中字符串的format方法可以將訪問路徑、圖片路徑和文件名組合成字符串返回給控件。
?
現(xiàn)在返回分類編輯窗口，完成表單，先寫好表單的定義，如果已經(jīng)做過項目，有寫好的表單，復(fù)制粘貼就行了，代碼如下：
me.form= Ext.create(Ext.form.Panel, {
??? border: false, bodyPadding: 5,
??? bodyStyle: "background:#DFE9F6",
??? trackResetOnLoad: true,
??? fieldDefaults: {
??????? labelWidth: 80, labelSeparator: "：", anchor: "0"
??? },
});
?
表單的顯示方式完全是個人喜歡，根據(jù)自己熟悉和喜好進行定義就好了。這里把表單的表框去了，然后將放置子組件部分向內(nèi)壓縮了5px，以避免文字和窗口的內(nèi)邊框貼在一起。背景顏色如果不設(shè)置就是白色的底色，筆者一向不太喜歡這樣白色的背景。尤其要注意trackResetOnLoad這個配置項，如果為true，當(dāng)為表單設(shè)置了初始數(shù)據(jù)后，重置操作后會恢復(fù)到初始數(shù)據(jù)，而不是完全空白的狀態(tài)。配置項fieldDefaults就是默認(rèn)的字段定義了，適用于所有字段。
接著就是在表單items配置項里添加字段了，首先是一個隱藏字段，用來記錄編輯時的記錄的id，代碼如下：
{xtype:"hidden",name:"CategoryId"},
接著是標(biāo)題，代碼如下：
{ xtype: "textfield", fieldLabel: "標(biāo)題", name: "Title",allowBlank: false},
題圖復(fù)雜點，需要用一個字段容器來放置一個文本字段和選擇按鈕，代碼如下：
{
??? xtype: "fieldcontainer", layout:"hbox", fieldLabel: "題圖", defaults: { hideLabel: true },
??? items: [
??????????? { xtype: 'textfield', flex: 1, name:"Image" },
??????????? { xtype: "button", width:80, text: "選擇",
??????????? ???handler: function () {
??????????? ??????? var img = this.up("form").getForm().findField("Image");
??????????? ??????? Ext.ux.Dialog.PicSelected.ed = img;
??????????? ??????? Ext.ux.Dialog.PicSelected.show();
??????????? ???}
??????????? }
???? ]
}
?
從代碼可以看到單擊選擇按鈕后，會先從表單中找到Image字段，然后把圖片選擇對話框的ed屬性指向該組件，再顯示圖片選擇對話框就可以了。
因為這里要用到圖片選擇對話框，因而需要在窗口定義中加入requires配置項來引用該對話框。
如果想預(yù)覽題圖，可以加入一個Image組件，代碼如下：
{
???? xtype: 'fieldset', title: "題圖預(yù)覽", height: 150, items: [
??????????? { xtype: "image", id:" CategoryPreviewImage" }
???? ]
}
這還要修改一下Image字段，監(jiān)聽它的chage事件，當(dāng)字段改變時，改變圖片的src，代碼如下：
{xtype: 'textfield', flex: 1, name: "Image",
??? listeners: {
??????? scope: me,
??????? change: function (filed, newValue,oldValue) {
???????????Ext.getCmp("CategoryPreviewImage").setSrc(newValue);
??????? }
??? }
},
?
接著是父類選擇，代碼如下：
{
???? xtype: "combobox", fieldLabel:"父類", name:"ParentId", allowBlank: false,
???? editable: true, shadow: false, mode:'local', triggerAction: 'all', store: "categoriesCombo",
???? rootVisible: true, displayField:"text", valueField: "id", flex: 1,
???? listConfig: {
??????????? displayField: "listText"
???? }
},
?
這里要特別說明一下，筆者自己都忘記了。因為分類編輯窗口是單例模式的，會直接創(chuàng)建實例，而且是先于控制器創(chuàng)建，因而這里的Combobox要用到CategoriesCombo，必須在requires添加引用，而且要將CategoriesCombo也設(shè)置為單例模式，且添加配置項storeId，為它定義一個標(biāo)識，再在Combobox里引用。在文章管理控制器里，還要把配置項stores中對該Store的引用刪除。
在Combobox中，列表中的數(shù)據(jù)不是非要使用displayField設(shè)置的字段來顯示的，可通過listConfig配置項，重新設(shè)置顯示字段。在這里，設(shè)置了顯示字段為listText，筆者這樣做的目的是為了使列表顯示得像一顆樹。
余下是排序序數(shù)和分類說明，這個不難，代碼如下：
{
??? xtype: 'numberfield', fieldLabel: "排序序數(shù)", name: "SortOrder",allowBlank: false
},
{
??? xtype:'textareafield',fieldLabel: "說明",name:"Content",labelAlign:"top",height:250
}
?
接著在表單底部放置保存和重置兩個按鈕，代碼如下：
dockedItems:[{
??? xtype: 'toolbar', dock: 'bottom', ui:'footer', layout: { pack: "center" },
??? items: [
???? ??? {text: "保存", width:80, disabled: true, formBind: true, handler: me.onSave, scope: me },
???? ??? {text: "重置", width:80, handler: me.onReset, scope: me }
??? ]
}]
?
保存按鈕默認(rèn)狀態(tài)禁用的，設(shè)置了formBind為true，也就是說只有所有字段輸入符合要求的時候才可以開啟保存按鈕，這樣比較方便。
現(xiàn)在把表單放到窗口的items里，代碼如下：
me.items = [me.form];
?
現(xiàn)在可以測試一下窗口了，刷新一下瀏覽器，然后單擊添加分類按鈕，可看到如圖50的效果。底部按鈕太靠近窗口底部了，需要調(diào)整一下，這個可通過設(shè)置窗口bodyPadding來實現(xiàn)，在單例模式的配置項下添加以下代碼：
bodyPadding:"00 10 0",
圖50 完成后的分類編輯窗口
這樣，窗口底部就會向內(nèi)縮進10px，按鈕也就不再靠近窗口底部了，刷新一下瀏覽器，會看到如圖51的效果。
圖51 調(diào)整按鈕位置后的分類編輯窗口
測試一下選擇圖片，在彈出的圖片對話框中，選擇8.png，然后單擊插入按鈕，會看到題圖的值為“/8.PNG”，但是預(yù)覽圖片沒效果，這是因為圖片路徑不對。因為現(xiàn)在沒有前臺，所以直接使用后臺的路徑作為圖片路徑就好了，在選擇按鈕的單擊事件中，添加以下代碼：
Ext.ux.Dialog.PicSelected.imagePath= "upload";
?
刷新一下瀏覽器，再選擇圖片8.PNG，會看到值已經(jīng)變?yōu)椤皍pload/8.PNG”，如圖52，預(yù)覽圖片也顯示出來了。
?
圖52 調(diào)整圖片路徑后的預(yù)覽圖片顯示
下面要完善父類的選擇，這個下文再說。
?
轉(zhuǎn)載于:https://www.cnblogs.com/hainange/archive/2012/11/11/6334227.html
總結(jié)
以上是生活随笔為你收集整理的CMS：文章管理之视图（2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 布局管理器 5-----绝对布局
- 下一篇： Java高级-线程同步lock与unlo