Related
I am trying JqGrid for our application with asp.Net MVC.
I am not able to get the data display.I am not sure what is the issue.
Here is my View Code:
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
#{
ViewBag.Title = "SearchEmployee";
}
<h2>SearchEmployee</h2>
<table id="list2"></table>
<div id="pager2"></div>
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: 'Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EMPLOYEEID', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FIRSTNAME', index: 'FIRSTNAME', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'AGE', index: 'AGE', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'ADDRESS1', index: 'ADDRESS1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'STATE', index: 'STATE', width: 80 },
{ name: 'CITYNAME', index: 'CITYNAME', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
//sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
My Controller Code:
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
The issue is when i tried to get to display Employee list.
In IE,when I tried to run the application,its prompting to download Json file.
Please let me know whats the issue.
I have tried with the source code from the below Link:
http://www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php
I agree with Abdul Hadi.You need to put a forward slash before the controller name so that your url is - url: '/Employee/Employees', And the column names need to match those in the Employee object(they should be the same case).
In addition to those two changes you have a whole bunch of columns defined that don't have a corresponsing property in the Employee class, so they can be removed. And be careful if you have a _Layout.cshtml page in your MVC application, sometimes this page has script references which will prevent you from using jqGrid.To prevent this from happenening try setting Layout = null; in your view.Here's a complete working example:
Controller:
public class EmployeeController
{
public ActionResult Index()
{
//This will return your Employee page.This should be set as the default action
return View();
}
public ActionResult Employees()
{
//This will return the data to bind to jqGrid
//DON'T CALL THIS DIRECTLY - otherwise you will get a situation where IE prompts you to download the .json file
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
}
View:
#{
ViewBag.Title = "Index";
Layout = null;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
<link href="https://cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'AGE', 'GENDER', 'STATUS', 'ADDRESS1', 'CITYNAME'],
colModel: [
{ name: 'EmployeeId', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FIRSTNAME', width: 90 },
{ name: 'Age', index: 'AGE', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'Status', index: 'STATUS', width: 80, align: "right" },
{ name: 'Address1', index: 'ADDRESS1', width: 80 },
{ name: 'CityName', index: 'CITYNAME', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
<table id="list2" border="1"></table>
<div id="pager2"></div>
Output:
JavaScript is Case Sensitive and you forget to add slash at beginning of url so your code will be like below:
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EmployeeId', index: 'EmployeeId', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FirstName', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'Age', index: 'Age', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'Address1', index: 'Address1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'Status', index: 'Status', width: 80 },
{ name: 'CityName', index: 'CityName', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
sortname: 'EmployeeId',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
On top of the comments by the other answers.
See the The answer for how you should format your json for jqgrid
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
var jsonData = new
{
total = employeeList.Count,
page = 1,
records = 10,
rows = employeeList.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
I wrote a table with JqGrid, but I found every row`s property of table is "tr id = 0" Following is my code and screenshot. What caused this error? Any help will be appreciated.
jQuery(grid_selector).jqGrid({
datatype: "json",
url:"getAllUserInfo.do",
mtype: 'POST',
height: 250,
colNames: ['Operation', 'userID', 'UserName', 'FullName', 'Department', 'Role', 'Telephone', 'MobilePhone', 'Mail', 'Status'],
colModel: [
{name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,search:false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: {recreateForm: true, beforeShowForm: beforeDeleteCallback},
onSuccess:function(respone){
var msg=respone.responseText;
if(msg=='success')
return true;
else
{
alert(msg);
return [false,msg];
}
},
editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback,}
}
},
{name: 'userID', index: 'userID', width: 60, sorttype: "int", editable:false, sortable:false, search:false, align:'center' },
{name: 'userName', index: 'userName', width: 100, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true},align:'center'},
{name: 'fullName', index: 'fullName', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"}},
{name: 'department', index: 'department', width: 100, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editoptions: {size: "20", maxlength: "30"},editrules:{required:true}},
{name: 'role', index: 'role', width: 70, editable: true, sorttype: "text",searchoptions:{sopt:['eq','ne','in','ni']}, editrules:{required:true}},
{name: 'telephone', index: 'telephone', width: 70, editable: true, sorttype: "text", searchoptions:{sopt:['eq','ne','in','ni']},editrules:{required:true,number:true}},
{name: 'mobilePhone', index: 'mobilePhone', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'mail', index: 'mail', width: 150,editable:true, edittype:"text", searchoptions:{sopt:['eq','ne','in','ni']}},
{name: 'status', index: 'status', width: 60, editable:true, edittype:"text", searchoptions:{sopt:['eq','ne']}}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
onCellSelect:function(rowid, e){
},
gridComplete:function (){
$("#grid-table").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center").css("line-height","40px")
.children("span.ui-jqgrid-title")
.css("float", "none");
},
loadComplete: function () {
var table = this;
setTimeout(function () {
var msg= $("#grid-table").getGridParam('userData');
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
var re_records = $("#grid-table").getGridParam('records');
if(re_records == 0 || re_records == null){
if($(".norecords").html() == null){
$("#grid-table").parent().append("<div class=\"norecords\">No Records</div>");
}
$(".norecords").show();
}
else
{
$(".norecords").hide();
}
},
editurl:"userInfoOperate.do",
caption: "UserList",
autowidth: true,
});
Check it whether rows data has column with "id" as the name, just like the picture shows below. JqGrid will use the value of "id" column in rows data as the id value of tr tags, if it does have an id column in rows data.
I'm using jQgrid to display data from database.
When click my button, I am getting this error :
length of colNmaes <>colModel or 0!
Here is my code:
$(document).ready(function () {
$('#btndist').click(function () {
$.ajax({
url:"default.aspx/loaddata",
datatype:"json",
data: "{}",
contentType: "application/json;charset=utf-8",
method:"POST",
success: function (result) {
result=result.d;
jQuery("#Distable").jqGrid({
datatype: "local",
colModel: [
{ name:"EmpID", index:"EmpID",width:80},
{ name:"EmpFisrtName", index:"EmpFisrtName", width: 80 },
{ name:"EmpLastName", index:"EmpLastName", width: 80 },
{ name:"EmailAddress", index:"EmailAddress", width: 80 },
{ name:"MobileNo", index:"MobileNo", width: 80 },
{ name:"CityName", index:"CityName", width: 80 }
],
data: JSON.parse(result),
rowNum: 10,
loadonce: true,
rowList: [5, 10, 20],
pager: '#DistPager',
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth:true,
sortname: 'EmpName',
height:'auto',
altRows: true,
hoverrows: true,
caption:"List Employee Details"
});
},
error: function (error) {
alert("Oops an error");
}
});
});
});
Can any one tell me why I'm getting that error?
You have to add colNames like following.
colNames: ['Emp ID', 'Fisrt Name', 'Last Name', 'Email', 'Mobile No', 'City']
Which will show as column header.
Update: Remove ajax call, jqGrid can load data from url itself.
$(document).ready(function() {
$('#btndist').click(function() {
jQuery("#Distable").jqGrid({
url: "default.aspx/loaddata",
datatype: "json",
colNames: ['Emp ID', 'Fisrt Name', 'Last Name', 'Email', 'Mobile No', 'City'],
colModel: [
{ name: "EmpID", index: "EmpID", width: 80 },
{ name: "EmpFisrtName", index: "EmpFisrtName", width: 80 },
{ name: "EmpLastName", index: "EmpLastName", width: 80 },
{ name: "EmailAddress", index: "EmailAddress", width: 80 },
{ name: "MobileNo", index: "MobileNo", width: 80 },
{ name: "CityName", index: "CityName", width: 80 }
],
rowNum: 10,
loadonce: true,
rowList: [5, 10, 20],
pager: '#DistPager',
viewrecords: true,
sortorder: 'asc',
gridview: true,
autowidth: true,
sortname: 'EmpName',
height: 'auto',
altRows: true,
hoverrows: true,
caption: "List Employee Details"
});
});
});
That is because you have not added the colNames.
It is mandatory to match the count of columns with the entries in the colModel.
Following error is prompted majorly if the columns count is not equal to number of entries inside the colModel.
So in your case it should be like this.
colNames: ['Emp ID', 'Emp First Name', 'Emp Last Name', 'Email Address', 'Mobile No', 'City Name'],
colModel: [
{ name: "EmpID", index: "EmpID", width: 80 },
{ name: "EmpFisrtName", index: "EmpFisrtName", width: 80 },
{ name: "EmpLastName", index: "EmpLastName", width: 80 },
{ name: "EmailAddress", index: "EmailAddress", width: 80 },
{ name: "MobileNo", index: "MobileNo", width: 80 },
{ name: "CityName", index: "CityName", width: 80 }
],
JS: http://jsfiddle.net/tzHXR/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
I am trying to learn JQXgrid and this is my JS file. in this whole grid is set to editable: true flag but i want a particular field to be non-editable.
In reference to the forum-post by jqwidget team member http://www.jqwidgets.com/community/topic/making-a-column-non-editable/#post-11055
i tried this:
JS: http://jsfiddle.net/tzHXR/89/
var data = generatedata(500);
var source = {
localdata: data,
datafields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'productname',
type: 'string'
}, {
name: 'date',
type: 'date'
}, {
name: 'quantity',
type: 'number'
}, {
name: 'price',
type: 'number'
}],
datatype: "array"
};
var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
width: 500,
theme: 'energyblue',
editable: true,
source: adapter,
sortable: true,
columns: [{
text: 'First Name',
datafield: 'firstname',
width: 90,
editable:false; // Editable Property Set to false
}, {
text: 'Last Name',
datafield: 'lastname',
width: 90
}, {
text: 'Product',
datafield: 'productname',
width: 170
}, {
text: 'Order Date',
datafield: 'date',
width: 160,
cellsformat: 'dd-MMMM-yyyy'
}, {
text: 'Quantity',
datafield: 'quantity',
width: 80,
cellsalign: 'right'
}, {
text: 'Unit Price',
datafield: 'price',
cellsalign: 'right',
cellsformat: 'c2'
}]
});
but after this , it doesn't work at all. all it shows is blank. i tried on my machine too.
why does editable:false for a column makes it worse. how can i apply non-editable property to one exact column.
The reason is that you should remove ";" after editable: false in your jQWidgets Grid's column definition. That is a syntax error.
I'm trying to adopt Ext for one of my small projects and got bit lost trying to implement the following: I have Orders and each will contain 1 or more PurchaseItem elements. I have built a grip that shows list of Orders and has a detailed view. How do I show details for each Order's PurchaseItem in detailed view?
Is there a way to loop through each in the OrderDetailsMarkup?
Here is my code below:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
var myDateFormat = "d/m/Y H:i";
Ext.onReady(function(){
Ext.define('Order',{
extend: 'Ext.data.Model',
fields: [
'date_created',
'status',
'name',
'phone',
'delivery_type',
'address',
'order_price'
]
});
var store = Ext.create('Ext.data.Store',{
model: 'Order',
proxy: {
type: 'ajax',
url: '/shopmng/json/list_of_orders/',
reader: 'json'
}
});
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{Date: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
{text: 'Status', width: 120, dataIndex: 'status', sortable: true},
{text: 'Name', width: 120, dataIndex: 'name', sortable: false},
{text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
{text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
{text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false},
{text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
],
viewConfig: {
forceFit: true
},
height: 400,
split: true,
region: 'north'
});
var OrderDetailsMarkup = [
'Some details<br />',
'status: {status}'
];
var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
Ext.create('Ext.Panel', {
renderTo: 'management_panel',
frame: true,
title: 'Manage Orders',
width: 1000,
height: 550,
layout: 'border',
items: [grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: 'background: #FFFFFF;',
html: 'select order to view details'
}]
});
grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
if (selectedRecord.length){
var detailPanel = Ext.getCmp('detailPanel');
OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
}
});
store.load();
});
Here is a sample of json that the grid deals with:
[
{
"status": "Новый заказ",
"delivery_type": "zazap",
"name": "Alexander Bolotnov",
"staff_comments": "",
"notes": "notes",
"external_order_ref": "",
"purchase_items": [
{
"picture_name": "Трава-мурава",
"printSize": "60 x 90 (без полей)",
"picture_id": 1,
"cost": "1972",
"price": "1972",
"quantity": 1,
"paperType": "Акварельная бумага"
}
],
"phone": "79264961710",
"order_price": "2072.00",
"address": "Moscow, Tvardovsky somewhere",
"date_created": "2011-04-17T00:12:33.048000",
"user_name": null,
"id": 1
},
{
"status": "Новый заказ",
"delivery_type": "boo!",
"name": "бишон",
"staff_comments": "",
"notes": "",
"external_order_ref": "",
"purchase_items": [
{
"picture_name": "Трава-мурава",
"printSize": "60 x 90 (без полей)",
"picture_id": 1,
"cost": "3944",
"price": "1972",
"quantity": 2,
"paperType": "Акварельная бумага"
}
],
"phone": "79264961710",
"order_price": "4044.00",
"address": "аааааааааааааааап, вапвапвап",
"date_created": "2011-04-18T23:13:27.652000",
"user_name": null,
"id": 2
}
]
i think your problem is your understanding about XTemplate. more info
in docs, there are some example how to use XTemplate (also how to use nested template)..
this is works for me...
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
var myDateFormat = "d/m/Y H:i";
Ext.onReady(function(){
Ext.define('Order',{
extend: 'Ext.data.Model',
fields: [
'date_created',
'status',
'name',
'phone',
'delivery_type',
'address',
'order_price',
'purchase_items' //add this if you try to manipulate it,
]
});
var store = Ext.create('Ext.data.Store',{
model: 'Order',
proxy: {
type: 'ajax',
url: 'order.json',
reader: 'json'
}
});
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
{text: 'Status', width: 120, dataIndex: 'status', sortable: true},
{text: 'Name', width: 120, dataIndex: 'name', sortable: false},
{text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
{text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
{text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false},
{text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
],
viewConfig: {
forceFit: true
},
height: 150,
split: true,
region: 'north'
});
/* i got error if use Ext.create
var OrderDetailsMarkup = [
'Some details<br />',
'status: {status}<br>',
'<tpl for="purchase_items">', //looping
'<hr>',
'{#}. {picture_name}',
'</tpl>'
];
var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
*/
var OrderTpl = new Ext.XTemplate(
'Some details<br />',
'status: {status}<br>',
'<tpl for="purchase_items">',// this is how to looping
'<hr>',
'{#}. {picture_name}',
'</tpl>'
);
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
frame: true,
title: 'Manage Orders',
width: 600,
height: 500,
layout: 'border',
items: [grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: 'background: #FFFFFF;',
html: 'select order to view details'
}]
});
grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
if (selectedRecord.length){
var detailPanel = Ext.getCmp('detailPanel');
OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
}
});
store.load();
});