视图允许设置分页样式

o2web/source/o2_core/o2/widget/$Paging/default/css.wcss

@@ -9,7 +9,6 @@
         "height": "24px",
         "width": "80px",
         "border": "1px solid #e6e6e6",
-        "color": "#777777",
         "text-align": "center",
         "line-height": "24px",
         "cursor": "pointer",
@@ -24,7 +23,6 @@
         "height": "24px",
         "width": "80px",
         "border": "1px solid #e6e6e6",
-        "color": "#777777",
         "text-align": "center",
         "line-height": "24px",
         "cursor": "pointer",
@@ -38,7 +36,6 @@
         "width": "24px",
         "height": "24px",
         "border": "1px solid #e6e6e6",
-        "color": "#777777",
         "text-align": "center",
         "line-height": "24px",
         "cursor": "pointer",
@@ -50,6 +47,21 @@
     "prePage_over" : {
         "background-color": "#f1f1f1"
     },
+    "nextPage" : {
+        "width": "24px",
+        "height": "24px",
+        "border": "1px solid #e6e6e6",
+        "text-align": "center",
+        "line-height": "24px",
+        "cursor": "pointer",
+        "background-color": "#ffffff",
+        "float": "left",
+        "margin-right": "10px",
+        "background": "url(/o2_core/o2/widget/$Paging/default/icon/right.png) no-repeat center center"
+    },
+    "nextPage_over" : {
+        "background-color": "#f1f1f1"
+    },
     "pageTurnContainer" : {
         "float" : "left"
     },
@@ -63,8 +75,7 @@
         "cursor": "pointer",
         "float": "left",
         "margin-right": "10px",
-        "background-color": "#ffffff",
-        "color": "#777777"
+        "background-color": "#ffffff"
     },
     "pageItem_over" : {
         "background-color": "#f1f1f1"
@@ -79,8 +90,7 @@
         "cursor": "pointer",
         "float": "left",
         "margin-right": "10px",
-        "background-color": "#ffffff",
-        "color": "#777777"
+        "background-color": "#ffffff"
     },
     "preBatchPage_over" : {
         "background-color": "#f1f1f1"
@@ -95,8 +105,7 @@
         "cursor": "pointer",
         "float": "left",
         "margin-right": "10px",
-        "background-color": "#ffffff",
-        "color": "#777777"
+        "background-color": "#ffffff"
     },
     "nextBatchPage_over" : {
         "background-color": "#f1f1f1"
@@ -132,21 +141,5 @@
         "text-align" : "center",
         "line-height" : "20px",
         "margin-right" : "5px"
-    },
-    "nextPage" : {
-        "width": "24px",
-        "height": "24px",
-        "border": "1px solid #e6e6e6",
-        "color": "#777777",
-        "text-align": "center",
-        "line-height": "24px",
-        "cursor": "pointer",
-        "background-color": "#ffffff",
-        "float": "left",
-        "margin-right": "10px",
-        "background": "url(/o2_core/o2/widget/$Paging/default/icon/right.png) no-repeat center center"
-    },
-    "nextPage_over" : {
-        "background-color": "#f1f1f1"
     }
 }

o2web/source/o2_core/o2/widget/$Paging/forum/css.wcss

@@ -40,6 +40,25 @@
         "background-color" : "#fff",
         "color" : "#43AAFA"
     },
+    "nextPage" : {
+        "float" : "left",
+        "width" : "16px",
+        "height" : "20px",
+        "line-height" : "20px",
+        "text-align" : "center",
+        "padding" : "2px 5px",
+        "border" : "1px solid #f3f3f3",
+        "margin" : "5px",
+        "cursor" : "pointer",
+        "color" : "#333",
+        "background": "url(/o2_core/o2/widget/$Paging/forum/icon/right.png) no-repeat center center",
+        "background-color" : "#f3f3f3"
+    },
+    "nextPage_over" : {
+        "border" : "1px solid #43AAFA",
+        "background-color" : "#fff",
+        "color" : "#43AAFA"
+    },
     "pageTurnContainer" : {
         "float" : "left"
     },
@@ -133,24 +152,5 @@
         "margin-top" : "5px",
         "margin-bottom" : "5px",
         "margin-right" : "5px"
-    },
-    "nextPage" : {
-        "float" : "left",
-        "width" : "16px",
-        "height" : "20px",
-        "line-height" : "20px",
-        "text-align" : "center",
-        "padding" : "2px 5px",
-        "border" : "1px solid #f3f3f3",
-        "margin" : "5px",
-        "cursor" : "pointer",
-        "color" : "#333",
-        "background": "url(/o2_core/o2/widget/$Paging/forum/icon/right.png) no-repeat center center",
-        "background-color" : "#f3f3f3"
-    },
-    "nextPage_over" : {
-        "border" : "1px solid #43AAFA",
-        "background-color" : "#fff",
-        "color" : "#43AAFA"
     }
 }

o2web/source/x_component_query_ViewDesigner/$View/default/css.wcss

@@ -2,6 +2,9 @@
     "actionbarNode" : {
         "overflow": "hidden"
     },
+    "pagingNode" : {
+        "overflow": "hidden"
+    },
     "viewAreaNode": {
         "overflow": "hidden"
     },
@@ -345,14 +348,38 @@
     },
     "toolbarWarpNode_selected": {
         "background-color": "#FFF",
-//        "height": "38px",
         "border": "1px solid red",
         "white-space": "nowrap"
     },
     "toolbarWarpNode_over": {
         "background-color": "#F9F9F9",
-//        "height": "38px",
         "border": "1px dotted blue",
         "white-space": "nowrap"
     },
+
+    "pagingWarpNode": {
+        "border": "1px dashed #999",
+        "height": "auto",
+        "overflow": "hidden",
+        "display": "block",
+        "-webkit-user-select": "none",
+        "-moz-user-select": "none",
+        "position": "static",
+        "opacity": 1,
+        "width": "auto",
+        "margin": "3px 3px",
+        "padding" : "5px",
+        "background-color": "#FFF",
+        "cursor": "pointer"
+    },
+    "pagingWarpNode_selected": {
+        "background-color": "#FFF",
+        "border": "1px solid red",
+        "white-space": "nowrap"
+    },
+    "pagingWarpNode_over": {
+        "background-color": "#F9F9F9",
+        "border": "1px dotted blue",
+        "white-space": "nowrap"
+    }
 }

o2web/source/x_component_query_ViewDesigner/$View/paging.html

@@ -0,0 +1,109 @@
+<div style="background-color: #FFF; overflow: hidden">
+	<div title="基本" class="MWFTab">
+		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+		  <tr>
+		    <td class="editTableTitle">标识:</td>
+		    <td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
+		  </tr>
+		  <tr>
+		    <td class="editTableTitle">名称:</td>
+		    <td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
+		  </tr>
+		  <tr>
+		    <td class="editTableTitle">描述:</td>
+		    <td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
+		  </tr>
+
+		</table>
+		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+			<tr>
+				<td class="editTableTitleNoWidth">显示数字分页:</td>
+				<td class="editTableValue">
+					<input class="editTableRadio" name="hasTruningBar" text{($.hasTruningBar!==false)?'checked':''}  onclick="
+                    if (this.checked){
+                        $('text{$.id}visiblePagesTr').setStyle('display', 'table-row');
+                        $('text{$.id}hasBatchTuringTr').setStyle('display', 'table-row');
+                    }" type="radio" value="true"/>是
+					<input class="editTableRadio" name="hasTruningBar" text{($.hasTruningBar===false)?'checked':''}   onclick="
+                    if (this.checked){
+                        $('text{$.id}visiblePagesTr').setStyle('display', 'none');
+                        $('text{$.id}hasBatchTuringTr').setStyle('display', 'none');
+                    }" type="radio" value="false"/>否
+				</td>
+			</tr>
+			<tr id="text{$.id}visiblePagesTr">
+				<td class="editTableTitleNoWidth">数字显示个数:</td>
+				<td class="editTableValue"><input type="number" name="visiblePages" value="text{$.visiblePages || 9}" onchange="
+                    $('text{$.id}visiblePagesText').set('text', this.value);
+                " class="editTableInput"/></td>
+			</tr>
+			<tr id="text{$.id}hasBatchTuringTr">
+				<td class="editTableTitleNoWidth">显示前后<span id="text{$.id}visiblePagesText">text{$.visiblePages || 9}</span>页:</td>
+				<td class="editTableValue">
+					<input class="editTableRadio" name="hasBatchTuring" text{($.hasBatchTuring!==false)?'checked':''} type="radio" value="true"/>是
+					<input class="editTableRadio" name="hasBatchTuring" text{($.hasBatchTuring===false)?'checked':''} type="radio" value="false"/>否
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitleNoWidth">显示首页末页:</td>
+				<td class="editTableValue">
+					<input class="editTableRadio" name="hasFirstLastPage" text{($.hasFirstLastPage!==false)?'checked':''} type="radio" value="true"/>是
+					<input class="editTableRadio" name="hasFirstLastPage" text{($.hasFirstLastPage===false)?'checked':''} type="radio" value="false"/>否
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitleNoWidth">显示上页下页:</td>
+				<td class="editTableValue">
+					<input class="editTableRadio" name="hasPreNextPage" text{($.hasPreNextPage!==false)?'checked':''} type="radio" value="true"/>是
+					<input class="editTableRadio" name="hasPreNextPage" text{($.hasPreNextPage===false)?'checked':''} type="radio" value="false"/>否
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitleNoWidth">显示跳页:</td>
+				<td class="editTableValue">
+					<input class="editTableRadio" name="hasPageJumper" text{($.hasPageJumper!==false)?'checked':''} type="radio" value="true"/>是
+					<input class="editTableRadio" name="hasPageJumper" text{($.hasPageJumper===false)?'checked':''} type="radio" value="false"/>否
+				</td>
+			</tr>
+		</table>
+
+		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+			<tr>
+				<td class="editTableTitleNoWidth">第一页文本:</td>
+				<td class="editTableValue">
+					<input type="text" name="firstPageText" value="text{$.firstPageText}" class="editTableInput"/>
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitleNoWidth">最后一页文本:</td>
+				<td class="editTableValue">
+					<input type="text" name="lastPageText" value="text{$.lastPageText}" class="editTableInput"/>
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitleNoWidth">上一页文本:</td>
+				<td class="editTableValue">
+					<input type="text" name="prePageText" value="text{$.prePageText}" class="editTableInput"/>
+				</td>
+			</tr>
+			<tr>
+				<td class="editTableTitleNoWidth">下一页文本:</td>
+				<td class="editTableValue">
+					<input type="text" name="nextPageText" value="text{$.nextPageText}" class="editTableInput"/>
+				</td>
+			</tr>
+		</table>
+	</div>
+    <div title="样式"  class="MWFTab">
+        <div class="MWFPagingStylesArea" name="pagingStyles"></div>
+    </div>
+	<div title="事件"  class="MWFTab">
+		<div class="MWFEventsArea" name="events"></div>
+	</div>
+	<!--<div title="HTML"  class="MWFTab">-->
+		<!--<div class="MWFHTMLArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>-->
+	<!--</div>-->
+	<div title="JSON"  class="MWFTab">
+		<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
+	</div>
+</div>

o2web/source/x_component_query_ViewDesigner/$View/paging.json

@@ -0,0 +1,70 @@
+{
+  "id": "",
+  "name": "",
+  "type": "Paging",
+  "description": "",
+  "style": "default",
+  "visiblePages" : 9,
+  "prePageText" : "",
+  "nextPageText" : "",
+  "firstPageText" : "第一页",
+  "lastPageText" : "最后一页",
+  "events": {
+    "queryLoad" : {
+      "code": "",
+      "html": ""
+    },
+    "postLoad" : {
+      "code": "",
+      "html": ""
+    },
+    "load" : {
+      "code": "",
+      "html": ""
+    },
+    "afterLoad" : {
+      "code": "",
+      "html": ""
+    },
+    "click": {
+      "code": "",
+      "html": ""
+    },
+    "dblclick": {
+      "code": "",
+      "html": ""
+    },
+    "keydown": {
+      "code": "",
+      "html": ""
+    },
+    "keypress": {
+      "code": "",
+      "html": ""
+    },
+    "keyup": {
+      "code": "",
+      "html": ""
+    },
+    "mousedown": {
+      "code": "",
+      "html": ""
+    },
+    "mousemove": {
+      "code": "",
+      "html": ""
+    },
+    "mouseout": {
+      "code": "",
+      "html": ""
+    },
+    "mouseover": {
+      "code": "",
+      "html": ""
+    },
+    "mouseup": {
+      "code": "",
+      "html": ""
+    }
+  }
+}

o2web/source/x_component_query_ViewDesigner/$View/view.html

@@ -38,6 +38,14 @@
                     <input class="editTableRadio" name="data.isSequence" text{($.data.isSequence!=='yes')?'checked':''} type="radio" value="no"/>否
                 </td>
             </tr>
+            <tr>
+                <td class="editTableTitleNoWidth">最大行数:</td>
+                <td class="editTableValue"><input type="number" name="count" value="text{$.count || 600}" class="editTableInput"/></td>
+            </tr>
+            <tr>
+                <td class="editTableTitleNoWidth">每页行数:</td>
+                <td class="editTableValue"><input type="number" name="pageSize" value="text{$.pageSize || 20}" class="editTableInput"/></td>
+            </tr>
 <!--            <tr>-->
 <!--                <td class="editTableTitle">视图样式:</td>-->
 <!--                <td class="editTableValue">-->
@@ -64,66 +72,6 @@
             <!--<td class="editTableValue"><input type="text" name="max" value="text{$.max}" class="editTableInput"/></td>-->
             <!--</tr>-->
         </table>
-        <div style="height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999; font-weight: bold">分页</div>
-        <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
-            <tr>
-                <td class="editTableTitleNoWidth">最大行数:</td>
-                <td class="editTableValue"><input type="number" name="count" value="text{$.count || 600}" class="editTableInput"/></td>
-            </tr>
-            <tr>
-                <td class="editTableTitleNoWidth">每页行数:</td>
-                <td class="editTableValue"><input type="number" name="pageSize" value="text{$.pageSize || 20}" class="editTableInput"/></td>
-            </tr>
-            <tr>
-                <td class="editTableTitleNoWidth">显示数字分页:</td>
-                <td class="editTableValue">
-                    <input class="editTableRadio" name="data.hasTruningBar" text{($.data.hasTruningBar!==false)?'checked':''}  onclick="
-                    if (this.checked){
-                        $('text{$.id}visiblePagesTr').setStyle('display', 'table-row');
-                        $('text{$.id}hasBatchTuringTr').setStyle('display', 'table-row');
-                    }" type="radio" value="true"/>是
-                    <input class="editTableRadio" name="data.hasTruningBar" text{($.data.hasTruningBar===false)?'checked':''}   onclick="
-                    if (this.checked){
-                        $('text{$.id}visiblePagesTr').setStyle('display', 'none');
-                        $('text{$.id}hasBatchTuringTr').setStyle('display', 'none');
-                    }" type="radio" value="false"/>否
-                </td>
-            </tr>
-            <tr id="text{$.id}visiblePagesTr">
-                <td class="editTableTitleNoWidth">数字显示个数:</td>
-                <td class="editTableValue"><input type="number" name="data.visiblePages" value="text{$.data.visiblePages || 9}" onchange="
-                    $('text{$.id}visiblePagesText').set('text', this.value);
-                " class="editTableInput"/></td>
-            </tr>
-            <tr id="text{$.id}hasBatchTuringTr">
-                <td class="editTableTitleNoWidth">显示前后<span id="text{$.id}visiblePagesText">text{$.data.visiblePages || 9}</span>页:</td>
-                <td class="editTableValue">
-                    <input class="editTableRadio" name="data.hasBatchTuring" text{($.data.hasBatchTuring!==false)?'checked':''} type="radio" value="true"/>是
-                    <input class="editTableRadio" name="data.hasBatchTuring" text{($.data.hasBatchTuring===false)?'checked':''} type="radio" value="false"/>否
-                </td>
-            </tr>
-            <tr>
-                <td class="editTableTitleNoWidth">显示首页末页:</td>
-                <td class="editTableValue">
-                    <input class="editTableRadio" name="data.hasFirstLastPage" text{($.data.hasFirstLastPage!==false)?'checked':''} type="radio" value="true"/>是
-                    <input class="editTableRadio" name="data.hasFirstLastPage" text{($.data.hasFirstLastPage===false)?'checked':''} type="radio" value="false"/>否
-                </td>
-            </tr>
-            <tr>
-                <td class="editTableTitleNoWidth">显示上页下页:</td>
-                <td class="editTableValue">
-                    <input class="editTableRadio" name="data.hasPreNextPage" text{($.data.hasPreNextPage!==false)?'checked':''} type="radio" value="true"/>是
-                    <input class="editTableRadio" name="data.hasPreNextPage" text{($.data.hasPreNextPage===false)?'checked':''} type="radio" value="false"/>否
-                </td>
-            </tr>
-            <tr>
-                <td class="editTableTitleNoWidth">显示跳页:</td>
-                <td class="editTableValue">
-                    <input class="editTableRadio" name="data.hasPageJumper" text{($.data.hasPageJumper!==false)?'checked':''} type="radio" value="true"/>是
-                    <input class="editTableRadio" name="data.hasPageJumper" text{($.data.hasPageJumper===false)?'checked':''} type="radio" value="false"/>否
-                </td>
-            </tr>
-        </table>
 
         <div style="height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999; font-weight: bold">权限</div>
         <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable" id="processEditStarter">

o2web/source/x_component_query_ViewDesigner/Property.js

@@ -64,6 +64,7 @@ MWF.xApplication.query.ViewDesigner.Property = MWF.FVProperty = new Class({
                     this.loadJSONArea();
 
                     this.loadEventsEditor();
+                    this.loadPagingStylesArea();
                     this.loadActionStylesArea();
                     this.loadActionArea();
                     this.loadStylesList();
@@ -738,6 +739,37 @@ MWF.xApplication.query.ViewDesigner.Property = MWF.FVProperty = new Class({
             }.bind(this));
 
 
+        }.bind(this));
+    },
+    loadPagingStylesArea: function(){
+        var _self = this;
+        var pagingAreas = this.propertyContent.getElements(".MWFPagingStylesArea");
+        pagingAreas.each(function(node){
+            var name = node.get("name");
+            var pagingStyles = this.data[name];
+            MWF.require("MWF.widget.Maplist", function(){
+                var maps = [];
+                Object.each(pagingStyles, function(v, k){
+                    var mapNode = new Element("div").inject(node);
+                    mapNode.empty();
+
+                    var maplist = new MWF.widget.Maplist(mapNode, {
+                        "title": k,
+                        "collapse": true,
+                        "onChange": function(){
+                            var oldData = _self.data[name];
+                            maps.each(function(o){
+                                _self.data[name][o.key] = o.map.toJson();
+                            }.bind(this));
+                            _self.changeData(name, node, oldData);
+                        }
+                    });
+                    maps.push({"key": k, "map": maplist});
+                    maplist.load(v);
+                }.bind(this));
+            }.bind(this));
+
+
         }.bind(this));
     },
     loadEventsEditor: function(){

o2web/source/x_component_query_ViewDesigner/View.js

@@ -127,6 +127,8 @@ MWF.xApplication.query.ViewDesigner.View = new Class({
 
             this.loadView();
 
+            this.loadPaging();
+
             this.selected();
             this.setEvent();
 
@@ -428,7 +430,8 @@ MWF.xApplication.query.ViewDesigner.View = new Class({
         var size = this.areaNode.getSize();
         var titleSize = this.viewTitleNode.getSize();
         var actionbarSize = this.actionbarNode ? this.actionbarNode.getSize() : {x:0, y:0};
-        var height = size.y-titleSize.y-actionbarSize.y-2;
+        var pagingSize = this.pagingNode ? this.pagingNode.getSize() : {x:0, y:0};
+        var height = size.y-titleSize.y-actionbarSize.y-pagingSize.y-2;
 
         this.viewContentScrollNode.setStyle("height", height);
 
@@ -508,6 +511,21 @@ MWF.xApplication.query.ViewDesigner.View = new Class({
         }
         if( !noSetHeight )this.setContentHeight();
     },
+    loadPaging: function( noSetHeight ){
+        this.pagingNode = new Element("div#pagingNode", {"styles": this.css.pagingNode}).inject(this.areaNode);
+        this.pagingList = [];
+        if( !this.json.data.pagingList )this.json.data.pagingList = [];
+        if( !this.pagingList || this.pagingList.length == 0 ){
+            if( this.json.data.pagingList.length ){
+                this.json.data.pagingList.each( function(json){
+                    this.pagingList.push( new MWF.xApplication.query.ViewDesigner.View.Paging( json, this.json.data.pagingList, this) )
+                }.bind(this));
+            }else{
+                this.pagingList.push( new MWF.xApplication.query.ViewDesigner.View.Paging( null, this.json.data.pagingList, this) )
+            }
+        }
+        // if( !noSetHeight )this.setContentHeight();
+    },
     setViewWidth: function(){
         this.viewAreaNode.setStyle("width", "auto");
         this.viewTitleNode.setStyle("width", "auto");
@@ -1845,4 +1863,301 @@ MWF.xApplication.query.ViewDesigner.View.Actionbar = new Class({
 
     }
 
+});
+
+
+
+
+MWF.require("MWF.widget.Paging", null, false);
+MWF.xApplication.query.ViewDesigner.View.Paging = new Class({
+    Implements: [Options, Events],
+    options : {
+        "style" : "default"
+    },
+    initialize: function(json, jsonList, view, options){
+        this.setOptions( options );
+        this.propertyPath = "/x_component_query_ViewDesigner/$View/paging.html";
+
+        this.view = view;
+        this.json = json;
+        this.jsonList = jsonList;
+        this.css = this.view.css;
+        this.container = this.view.pagingNode;
+        this.load();
+    },
+    load: function(){
+        this.systemTools = [];
+        this.customTools = [];
+        if( !this.json ){
+            this.loadDefaultJson(function(){
+                this._createNode();
+                this.setEvent();
+            }.bind(this));
+        }else{
+            this._createNode();
+            this.setEvent();
+        }
+    },
+    loadDefaultJson: function(callback){
+        var url = this.view.path+"paging.json";
+        MWF.getJSON(url, {
+            "onSuccess": function(obj){
+                this.view.designer.actions.getUUID(function(id){
+                    obj.id=id;
+                    this.json = obj;
+                    this.jsonList.push( this.json );
+                    if (callback) callback(obj);
+                }.bind(this));
+            }.bind(this),
+            "onerror": function(text){
+                this.view.designer.notice(text, "error");
+            }.bind(this),
+            "onRequestFailure": function(xhr){
+                this.view.designer.notice(xhr.responseText, "error");
+            }.bind(this)
+        });
+    },
+    setEvent: function(){
+        this.node.addEvents({
+            "click": function(e){this.selected(); e.stopPropagation();}.bind(this),
+            "mouseover": function(){if (!this.isSelected) this.node.setStyles(this.css.pagingWarpNode_over)}.bind(this),
+            "mouseout": function(){if (!this.isSelected) this.node.setStyles(this.css.pagingWarpNode) }.bind(this)
+        });
+    },
+    selected: function(){
+        if (this.view.currentSelectedModule){
+            if (this.view.currentSelectedModule==this){
+                return true;
+            }else{
+                this.view.currentSelectedModule.unSelected();
+            }
+        }
+        this.node.setStyles(this.css.pagingWarpNode_selected);
+        new Fx.Scroll(this.view.areaNode, {"wheelStops": false, "duration": 100}).toElementEdge(this.node);
+
+        this.view.currentSelectedModule = this;
+        this.isSelected = true;
+        this.showProperty();
+    },
+    unSelected: function(){
+        this.view.currentSelectedModule = null;
+        this.node.setStyles(this.css.pagingWarpNode);
+
+        this.isSelected = false;
+        this.hideProperty();
+    },
+
+    showProperty: function(){
+        if (!this.property){
+            this.property = new MWF.xApplication.query.ViewDesigner.Property(this, this.view.designer.propertyContentArea, this.view.designer, {
+                "path": this.propertyPath,
+                "onPostLoad": function(){
+                    this.property.show();
+                }.bind(this)
+            });
+            this.property.load();
+        }else{
+            this.property.show();
+        }
+    },
+    hideProperty: function(){
+        if (this.property) this.property.hide();
+    },
+
+    resetTextNode: function(){
+        var listText = (this.json.selectType=="attribute") ? (this.json.attribute || "") : (this.json.path || "");
+        if (!listText) listText = "unnamed";
+
+        this.textNode.set("text", this.json.displayName);
+        this.listNode.getLast().set("text", this.json.displayName+"("+listText+")");
+    },
+
+    deletePropertiesOrStyles: function(name, key){
+        if (name=="properties"){
+            try{
+                this.node.removeProperty(key);
+            }catch(e){}
+        }
+    },
+    setPropertiesOrStyles: function(name){
+        if (name=="styles"){
+            try{
+                this.setCustomStyles();
+            }catch(e){}
+        }
+        if (name=="properties"){
+            try{
+                this.node.setProperties(this.json.properties);
+            }catch(e){}
+        }
+    },
+    setCustomNodeStyles: function(node, styles){
+        var border = node.getStyle("border");
+        node.clearStyles();
+        //node.setStyles(styles);
+        node.setStyle("border", border);
+
+        Object.each(styles, function(value, key){
+            var reg = /^border\w*/ig;
+            if (!key.test(reg)){
+                node.setStyle(key, value);
+            }
+        }.bind(this));
+    },
+    setCustomStyles: function(){
+        var border = this.node.getStyle("border");
+        this.node.clearStyles();
+        this.node.setStyles(this.css.moduleNode);
+
+        if (this.initialStyles) this.node.setStyles(this.initialStyles);
+        this.node.setStyle("border", border);
+
+        if (this.json.styles) Object.each(this.json.styles, function(value, key){
+            if ((value.indexOf("x_processplatform_assemble_surface")!=-1 || value.indexOf("x_portal_assemble_surface")!=-1)){
+                var host1 = MWF.Actions.getHost("x_processplatform_assemble_surface");
+                var host2 = MWF.Actions.getHost("x_portal_assemble_surface");
+                if (value.indexOf("/x_processplatform_assemble_surface")!==-1){
+                    value = value.replace("/x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
+                }else if (value.indexOf("x_processplatform_assemble_surface")!==-1){
+                    value = value.replace("x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
+                }
+                if (value.indexOf("/x_portal_assemble_surface")!==-1){
+                    value = value.replace("/x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
+                }else if (value.indexOf("x_portal_assemble_surface")!==-1){
+                    value = value.replace("x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
+                }
+            }
+
+            var reg = /^border\w*/ig;
+            if (!key.test(reg)){
+                if (key){
+                    if (key.toString().toLowerCase()==="display"){
+                        if (value.toString().toLowerCase()==="none"){
+                            this.node.setStyle("opacity", 0.3);
+                        }else{
+                            this.node.setStyle("opacity", 1);
+                            this.node.setStyle(key, value);
+                        }
+                    }else{
+                        this.node.setStyle(key, value);
+                    }
+                }
+            }
+            //this.node.setStyle(key, value);
+        }.bind(this));
+    },
+
+    _setEditStyle: function(name, obj, oldValue){
+        var title = "";
+        var text = "";
+        if (name==="name"){
+            title = this.json.name || this.json.id;
+            text = this.json.type.substr(this.json.type.lastIndexOf("$")+1, this.json.type.length);
+            this.treeNode.setText("<"+text+"> "+title);
+        }
+        if (name==="id"){
+            title = this.json.name || this.json.id;
+            if (!this.json.name){
+                text = this.json.type.substr(this.json.type.lastIndexOf("$")+1, this.json.type.length);
+                this.treeNode.setText("<"+text+"> "+this.json.id);
+            }
+            this.treeNode.setTitle(this.json.id);
+            this.node.set("id", this.json.id);
+        }
+
+        this._setEditStyle_custom(name, obj, oldValue);
+    },
+    reloadMaplist: function(){
+        if (this.property) Object.each(this.property.maplists, function(map, name){ map.reload(this.json[name]);}.bind(this));
+    },
+
+    getHtml: function(){
+        var copy = this.node.clone(true, true);
+        copy.clearStyles(true);
+
+        var html = copy.outerHTML;
+        copy.destroy();
+
+        return html;
+    },
+    getJson: function(){
+        var json = Object.clone(this.json);
+        var o = {};
+        o[json.id] = json;
+        return o;
+    },
+
+
+    _createNode: function(callback){
+        this.node = new Element("div", {
+            "id": this.json.id,
+            "MWFType": "paging",
+            "styles": this.css.pagingWarpNode,
+            "events": {
+                "selectstart": function(e){
+                    e.preventDefault();
+                }
+            }
+
+        }).inject(this.container );
+
+        this.pagingNode = new Element("div").inject(this.node);
+        this.loadWidget();
+        // this.pagingWidget = new MWF.widget.Paging(this.pagingNode, {"style": this.json.style}, this);
+        // if (!this.json.pagingStyles){
+        //     this.json.pagingStyles = Object.clone(this.pagingWidget.css);
+        // }
+        // this.pagingWidget.load();
+    },
+    loadWidget : function(){
+        var visiblePages = this.json.visiblePages ? this.json.visiblePages.toInt() : 9;
+        this.pagingWidget = new o2.widget.Paging(this.pagingNode, {
+            style : this.json.style || "default",
+            countPerPage: 20, //this.json.pageSize || this.options.perPageCount,
+            visiblePages: visiblePages,
+            currentPage: 1,
+            itemSize: visiblePages * 20 * 2,
+            // pageSize: this.pages,
+            hasNextPage: typeOf( this.json.hasPreNextPage ) === "boolean" ? this.json.hasPreNextPage : true,
+            hasPrevPage: typeOf( this.json.hasPreNextPage ) === "boolean" ? this.json.hasPreNextPage : true,
+            hasTruningBar: typeOf( this.json.hasTruningBar ) === "boolean" ? this.json.hasTruningBar : true,
+            hasBatchTuring: typeOf( this.json.hasBatchTuring ) === "boolean" ? this.json.hasBatchTuring : true,
+            hasFirstPage: typeOf( this.json.hasFirstLastPage ) === "boolean" ? this.json.hasFirstLastPage : true,
+            hasLastPage: typeOf( this.json.hasFirstLastPage ) === "boolean" ? this.json.hasFirstLastPage : true,
+            hasJumper: typeOf( this.json.hasPageJumper ) === "boolean" ? this.json.hasPageJumper : true,
+            hiddenWithDisable: false,
+            // hiddenWithNoItem: true,
+            text: {
+                prePage: this.json.prePageText,
+                nextPage: this.json.nextPageText,
+                firstPage: this.json.firstPageText,
+                lastPage: this.json.lastPageText
+            },
+            onJumpingPage : function( pageNum, itemNum ){
+            }.bind(this),
+            onPostLoad : function () {
+                this.view.setContentHeight()
+                // if(this.setContentHeightFun)this.setContentHeightFun();
+            }.bind(this)
+        }, this.json.pagingStyles || {});
+        if (!this.json.pagingStyles){
+            this.json.pagingStyles = Object.clone(this.pagingWidget.css);
+        }
+        this.pagingWidget.load();
+    },
+
+    _refreshPaging: function(){
+        this.pagingNode.empty();
+        this.loadWidget();
+    },
+    _setEditStyle_custom: function(name, obj, oldValue){
+        debugger;
+        if ( ["hasTruningBar","visiblePages","hasBatchTuring",
+            "hasFirstLastPage","hasPreNextPage","hasPageJumper",
+            "firstPageText","lastPageText","prePageText","nextPageText",
+            "pagingStyles"].contains(name)){
+            this._refreshPaging();
+        }
+    }
+
 });