Oct 02, 2015, 7:15 AM
Here it is:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/TestSubmit/extjs/resources/ext_theme_gray/ext-theme-gray-all-embedded-css/ext.axd?v=10552" id="ext-theme" />
<link type="text/css" rel="stylesheet" href="/TestSubmit/extnet/resources/css/extnet-all-embedded-css/ext.axd?v=10552" id="extnet-styles" />
<script type="text/javascript" src="/TestSubmit/extjs/ext-all-js/ext.axd?v=10552"></script>
<script type="text/javascript" src="/TestSubmit/extnet/extnet-all-js/ext.axd?v=10552"></script>
<title>Index</title>
<link rel="stylesheet" href="/TestSubmit/resources/css/examples.css" />
<style>
.my_icon {
background-image:url(../../Resources/EditTableHS.png)
}
</style>
<script>
Ext.onReady(function ()
{
Ext.get(window.document).on('contextmenu', function (e)
{
e.preventDefault();
return false;
});
});
function reloadGridPanel(grid, data) {
grid.show();
grid.getStore().loadData(data);
};
var onSuccessEdit = function (data, cmd) {
switch (cmd) {
case "edit":
var record = App.objectsGrid.getSelectionModel().selected.items[0];
var index = App.objectsGrid.getStore().indexOf(record);
var r = App.objectsGrid.getStore().getAt(index);
r.beginEdit();
r.data = data;
r.endEdit();
r.commit();
break;
case "addnew":
var numRow = App.objectsGrid.getStore().getCount();
App.objectsGrid.getStore().insert(numRow, data);
break;
case "delete":
App.objectsGrid.deleteSelected();
break;
}
};
var template = '<span style="color:{0};">{1}</span>';
var change = function (value) {
return Ext.String.format(template, (value) ? "green" : "red", value);
};
var tpl = "<img src='{0}' />";
var booleanRenderer = function (value) {
if (value == null || !value)
return "<img src=\"http://localhost/TestSubmit/Resources/cross.png\" />";
else
return "<img src=\"http://localhost/TestSubmit/Resources/tick.png\" />";
}
</script>
<script type="text/javascript">
//<![CDATA[
Ext.net.ResourceMgr.init({isMVC:true,theme:"gray",appName:"TestSubmit"});Ext.onReady(function(){Ext.ns("App.direct");Ext.apply(App.direct, { DoYes:function(id,config){return Ext.net.DirectMethod.request("DoYes",Ext.applyIf(config || {}, {params:{id:id},url:"/TestSubmit/Home/DoYes"}));} });Ext.create("Ext.grid.Panel",{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"IDProperty"},{name:"StringProperty"},{name:"BooleanProperty"},{name:"DateProperty"},{name:"IntegerProperty"},{name:"FloatProperty"}] }),storeId:"Store1",autoLoad:true,proxy:{data:[{"IDProperty":"123b60cf-6d9c-48d6-ac25-306724e7fd35","StringProperty":"string1","BooleanProperty":false,"DateProperty":"2015-10-02T09:08:22.7648922","IntegerProperty":18,"FloatProperty":123.2},{"IDProperty":"f9912604-f8ca-48fc-a97d-f6ba65b1b2c6","StringProperty":"string2","BooleanProperty":true,"DateProperty":"2015-10-01T09:08:22.7668916","IntegerProperty":19,"FloatProperty":234.2},{"IDProperty":"1393f792-0625-46f9-8b58-18c99bdc74ed","StringProperty":"string3","BooleanProperty":false,"DateProperty":"2015-10-03T09:08:22.7668916","IntegerProperty":11,"FloatProperty":345.2},{"IDProperty":"084e797e-6e74-4bf6-b296-b9b878bdde29","StringProperty":"string4","BooleanProperty":true,"DateProperty":"2015-09-30T09:08:22.7668916","IntegerProperty":13,"FloatProperty":456.2},{"IDProperty":"b65bb38a-0dc9-40b7-ad52-4883744eb0fb","StringProperty":"string5","BooleanProperty":false,"DateProperty":"2015-09-29T09:08:22.7668916","IntegerProperty":15,"FloatProperty":567.2}], type: 'memory'}},id:"objectsGrid",renderTo:"App.objectsGrid_Container",tbar:{xtype:"toolbar",items:[{iconCls:"#TableAdd",text:"Add object",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({cleanRequest:true,url:"/TestSubmit/Home/AddObject",control:this});}}}},{iconCls:"#TableRefresh",text:"Refresh",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({cleanRequest:true,url:"/TestSubmit/Home/Refresh",userSuccess:function(response,result,el,type,action,extraParams,o){reloadGridPanel(App.objectsGrid, result.data);},control:this});}}}},{iconCls:"#ImageAdd",text:"Import image",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({cleanRequest:true,url:"/TestSubmit/Home/ImportImage",control:this});}}}}]},title:"MyObjects",columns:{items:[{width:300,dataIndex:"StringProperty",text:"Стринг проперти"},{width:300,dataIndex:"BooleanProperty",renderer:booleanRenderer,text:"BooleanProperty"},{width:300,xtype:"datecolumn",dataIndex:"DateProperty",text:"DateProperty",format:"j.n.Y."},{width:300,dataIndex:"IntegerProperty",text:"IntegerProperty"},{width:300,dataIndex:"FloatProperty",text:"FloatProperty"}]},listeners:{itemcontextmenu:{fn:function(item,record,node,index,e){e.preventDefault();App.ItemContextMenu.dataRecord=record.data;App.ItemContextMenu.showAt(e.getXY());}},viewready:{delay:100,fn:function(item){this.selModel.select(0);this.getView().focusCell({row:0, column:0});}}},directEvents:{itemdblclick:{fn:function(item,record,node,index,e){Ext.net.directRequest({cleanRequest:true,url:"/TestSubmit/Home/EditObject",extraParams:{"objectId":record.data.IDProperty},control:this,action:'ItemDblClick'});}}}});Ext.create("Ext.menu.Menu",{id:"ItemContextMenu",items:[{iconCls:"#TableEdit",text:"Edit object",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({cleanRequest:true,url:"/TestSubmit/Home/EditObject",extraParams:{"objectId":this.parentMenu.dataRecord.IDProperty},control:this});}}}},{iconCls:"#Lightning",text:"Switch boolean property",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({cleanRequest:true,url:"/TestSubmit/Home/SwitchBool",extraParams:{"objectId":this.parentMenu.dataRecord.IDProperty},control:this});}}}},{xtype:"menuseparator"},{iconCls:"#TableDelete",text:"Delete object",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({cleanRequest:true,url:"/TestSubmit/Home/DeleteObject",extraParams:{"objectId":this.parentMenu.dataRecord.IDProperty},control:this});}}}}]});Ext.net.ResourceMgr.registerIcon(["TableAdd","TableRefresh","ImageAdd","TableEdit","Lightning","TableDelete"]);});
//]]>
</script>
</head>
<body>
<div id="App.objectsGrid_Container"></div>
</body>
</html>