I'm newbie in Sencha touch and i need to parse a xml file.
I can display data between tag but i can't display data when i have an attribute.
some body can help me please.Thanks for advance
You can use the mapping property in your field definition.
Ext.define('temp.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'pseudo', type: 'string', mapping: '#pseudo' },
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
]
}
});
Will read this xml:
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user pseudo="pierre">
<id>1</id>
<name>Pierre</name>
</user>
<user pseudo="zorg">
<id>99</id>
<name>Zorglub</name>
</user>
</users>
I know this is an old post, but since I found the question when searching for the answer...
Related
Within sitefinity I am create a widget that I want to initialize KendoGrid and populate the data. For the widget do I need to add the javascript onto the view or is there another way?
The kendo scripts and styles have to be included on the page one way or the other.
You do it either via the view of the widget or (if you use them on many places) you may include them in the main page template.
Some people like to also bundle them into a single local file, as opposed to downloading them from the kendo cdn.
Update:
Controller:
[HttpGet]
public ActionResult Index()
{
// fill the model with data
var model = InitializeModel();
return View("Index", model);
}
Index view
#using Telerik.Sitefinity.Modules.Pages;
#using Telerik.Sitefinity.Frontend.Mvc.Helpers;
#using Newtonsoft.Json;
#using Telerik.Sitefinity.Services;
#using Telerik.Sitefinity.UI.MVC;
#model List<SitefinityWebApp.Mvc.Models.Country>
#if (!SystemManager.IsDesignMode)
{
#Html.Script(ScriptRef.JQuery, "top")
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.web.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<div id="grid"></div>
<script>
var data = #Html.Raw(JsonConvert.SerializeObject(Model));
$(function () {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: { id: "Id" }
},
pageSize: 10
},
pageable: true,
scrollable: false,
persistSelection: true,
sortable: true,
columns: [
{ selectable: true, width: "50px" },
{ field: "Title", title: "Country" },
{ field: "CountryCode", title: "Country Code" },
{ field: "CurrencyCode", title: "Currency Code" },
{ field: "Id" }]
});
})
</script>
}
in html file, there is a piece of javascript like:
{text: "EmployeeManagement", icon: "code", children: [
{text: "HR", link: [[#{/employeeManage/hr.html}]]},
{text: "Developer", link: [[#{/employeeManage/developer.html}]]},
]},
However, once I put a
if(isEmployer) {
}
around it, it formats the above code like:
if (isEmployer) {
{
text: "EmployeeManagement", children
:
[
{text: "HR", link: [[#{
/employeeManage
/hr.html
}
]]
},
{
text: "Developer", link
:
[[#{
/employeeManage
/developer.html
}
]]
}
How to turn off this automatically form?
EDIT: This is the file structure:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<head>
....
</head>
<body data-module="app" style="overflow: hidden">
<div id="desktop"></div>
<script th:inline="javascript">
/*<![CDATA[*/
var isEmployer = ...
...
{text: "EmployeeManagement", icon: "code", children: [
{text: "HR", link: [[#{/employeeManage/hr.html}]]},
{text: "Developer", link: [[#{/employeeManage/developer.html}]]},
]},
...
If you do not want to have this behaviour (I guess it is by adding }) go to
Editor -> General -> Smart Keys and disable option Reformat block on typing }
I want to use store attribute of Dgrid, i am using below code to make dgrid table but somehow table doesn't get populated with rows.
<script src="dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require(["dojo/_base/declare","dgrid/Grid","dgrid/Keyboard","dgrid/Selection","dgrid/editor","dgrid/extensions/DnD","dojo/dnd/Source", "dojo/store/Memory", "dojo/_base/lang"],
function (declare,Grid,Keyboard,Selection,editor,DnD, DnDSource, Memory, lang){
var store = new Memory({
data: [
{ id: 1, firstName: "Jeffrey", lastName: "Andrews", email: "jeffrey#madeupdomain.com" },
{ id: 2, firstName: "Jenny", lastName: "Saunders", email: "jenny#madeupdomain.com" },
]
});
var structure = [
{field: "lastName", label: "Last Name"},
{field: "firstName", label: "First Name"},
{field: "email", label: "EMail Address"}
];
var grid = new (declare([Grid, Selection, DnD]))({
store: store,
columns: structure
},
"gridtable");
grid.startup();
});
</script>
</head>
<div id="gridtable"></div>
The base List and Grid modules are not designed to be store-aware. Store awareness is usually inherited from _StoreMixin, which OnDemandList and the Pagination extension inherit.
It's also feasible to make your own extension of _StoreMixin; for example, one of the tutorials on dgrid.io walks through a very simple extension to render all data from a store at once.
I'm trying develop a custom component like that shown in my mockup. I found an example component on the web (might have been in Sencha's docs), and now I'm trying to adapt it for my purposes. I have two questions:
Is this the right approach?
How do I drive my data dynamically from my AlertStore. The example was hard-code with a data: [] value. This can't be bound to a Store?
What I need is like a scrollable list view but with a different type of view. Sort of like the balloons in Apple's iPhone Messages app.
Sample code that I found on the Internet and I'm in the middle of adapting:
Ext.define("Sencha.view.ComponentView", {
extend: 'Ext.Component',
xtype: 'custom-component',
config: {
xtype: 'container',
scrollable: true,
layout: {type: 'vbox', pack: 'start', align: 'stretch'},
cls: ['view1'],
data: {
items: [
{name: 'Congestion near tunnel', n: 100},
{name: 'Car fore near exit 10', n: 21},
{name: 'Broken down vehicle in tunnel', n: 24},
{name: 'Slow traffic next 20 miles', n: 24},
{name: 'Drive carefully', n: 26}
]
},
store: 'AlertStore',
tpl: new Ext.XTemplate(
'<tpl for="items">',
'{% if(xindex % this.getPerRow() == 1) {%}',
'<div class="view-container">',
'{% } %}',
'<div class="alert-row">',
'<div class="name">{[xindex]} - {name}</div>',
'</div>',
'{% if(xindex % this.getPerRow() == 0 || xindex == xcount){ %}',
'</div>',
'{% } %}',
'</tpl>',
{
getPerRow: function () {
return 2;
}
})
},
initialize: function () {
this.callParent(arguments);
}
});
You should just be able to use a list and a css class to add rounded corners to your list items.
Here is a basic fiddle: http://new.senchafiddle.com/#/vZ4fT/
I implemented this chat for this application with Sencha Touch 2:
This is a list with an XTemplate. As #kevhender suggested in his comment, you should let your component inherit from Ext.dataview.DataView (or Ext.dataview.List if you don't need listitems made by more than one component).
Of course you can drive your component with a store, checkout Sencha Docs section on stores. You can basically retrieve your data from a proxy attached to the store, or you can get it from any other source, for example with Ext.Ajax or Ext.data.JsonP, then use setData() on the store. Once you have configured correctly the store the list will automatically update itself when changing its contents.
Here's what I came up with from the provided answers.
Ext.define("SF.view.SampleDataView", {
extend: 'Ext.Container',
xtype: 'sample-view',
id: 'sample-view-id',
requires: [],
config: {
cls: ['class1', 'class2'],
items: [
{
xtype: 'dataview',
cls: 'myclass',
itemTpl: '{name}',
store: {
fields: ['name'],
data: [
{name: 'Congestion near tunnel'},
{name: 'Broken down vehicle in tunnel'},
{name: 'The conference is over. See you next year.'},
{name: 'Slow traffic next 20 miles'},
{name: 'Drive carefully'},
{name: 'Congestion near tunnel'},
{name: 'Broken down vehicle in tunnel'},
{name: 'The conference is over. See you next year.'},
{name: 'Slow traffic next 20 miles'},
{name: 'Drive carefully'}
]
}
}
]
},
initialize: function () {
this.callParent(arguments);
}
});
I also added some margin and padding to #bwags' css.
.customRound {
border:2px solid;
border-radius:25px;
margin: 30px;
padding: 10px;
}
How can I pass arguments to a Sencha 2 template? Below is my small template, have tried different things like defining "field variables" on the template and using the config, and so fourth, but Im definitly doing something wrong. Lets say I want to give arguments "title" and "usageTime", how can I do it
Ext.define('Sencha.templates.AppDetailsUsageTemplate' ,{
extend: 'Ext.XTemplate',
constructor: function (config) {
var html = [
'<div id="{id}" class="limitsList {cls}">',
' <div class="reportsSummaryLeft"> {title} </div>',
' <div class="reportsSummaryRight"> {usageTime} </div>',
' <div style="clear:both"></div>',
'</div>'];
this.callParent(html);
}
});
In my view I wanna do something ala this (pseudo code below):
xtype: 'container',
tpl: Ext.create('Sencha.templates.AppDetailsUsageTemplate',{
title: 'test tittle',
usageTime: 100384
})
I figured it out, give parameters through data:
Examples:
{
id: 'appDetailsMonth',
xtype: 'component',
tpl: Ext.create('Sencha.templates.AppDetailsUsageTemplate')
},{
id: 'appDetailsLifeDuration',
xtype: 'component',
tpl: Ext.create('Sencha.templates.AppDetailsUsageTemplate')
}
And then in applyItems
applyItems:function(newItems, oldItems) {
var i = 0,
iNum = newItems.length,
data = this.getData();
var yesterdayItem = newItems[2];
yesterdayItem.data = {
title: 'Yesterday',
usage: data.dayDuration
};
....
}