I am developing a small web page that uses Ext.XTemplate and have a problem with displaying view in the index.html. However, it works fine when I've created Ext.XTemplate in the items of my panel. The problem is that I have all the info in json file, so I need a store that is one of the advantages of Ext.view.View.
Help me please create a view in that panel.
P.S. I should use a class that extend panel.Panel as the task is concerned about it.
My first class
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name:'position', type:'string' },
{ name:'title', type:'string' },
{ name:'rate', type:'string' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/app/view/main/data.json',
method:'GET',
reader: {
type: 'json',
root: 'foo'
}
},
autoLoad: true
});
var notiTpl = new Ext.XTemplate(
'<h1>TIOBE rate</h1>',
'<table>',
'<tr>',
'<td>Position on 2015</td>',
'<td>Programming language</td>',
'<td>Rate</td>',
'<td>Group</td>',
'</tr>',
'<tpl for=".">',
'<tr <tpl if="values.position%2 == 1">style="background-color: silver;"</tpl>>',
'<td>{position}</td>',
'<td>{title}</td>',
'<td>{rate}</td>',
'<tpl if="values.position<3">',
'<td>A</td>',
'<tpl elseif="values.position<5">',
'<td>B</td>',
'<tpl else>',
'<td>C</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>');
Ext.define('App.view.main.List', {
extend: 'Ext.view.View',
xtype: 'mainlist',
store: store,
tpl: notiTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'There is no text',
renderTo: Ext.getBody()
});
My view
Ext.define('App.view.main.Main', {
extend: 'Ext.panel.Panel',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'App.view.main.List'
],
items: [{
title: 'Some html text',
items: [{
xtype: 'mainlist'
}]
}]
});
my index.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>App</title>
<script type="text/javascript" src="ext/build/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="b0beccc4-d014-4af3-919d-fd0a75c6c656" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
my app
Ext.application({
name: 'App',
extend: 'App.Application',
requires: [
'App.view.main.Main'
],
//
mainView: 'App.view.main.Main'
//-------------------------------------------------------------------------
});
Related
I am using the code below for 10 fields but i want make 5 of my fields show (abbr - name) and the the other show only the (abbr) how i can reach this goal.
NOTE: this code is from http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.form.field.ComboBox
Thanks in advance,
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{abbr} - {name}</div>',
'</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{abbr} - {name}',
'</tpl>'
)
});
One possible approach is to use Ext.XTemplate. The following working example shows the first two items differently, based on condition.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
var template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">',
'<tpl if="xindex<=2">',
'{abbr}',
'<tpl else >',
'{abbr} - {name}',
'</tpl>',
'</div>',
'</tpl>'
);
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
tpl: template
});
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
I'm creating a "Rally Custom HTML" board using this grouped grid example.
https://help.rallydev.com/apps/2.1/doc/#!/example/groupable-grid
I'm having trouble adding a filter for a specific Milestone. I can get the code below to return user stories without a problem. It has a generic filter on name.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Name',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
When I try to change the filter to use "Milestones" it doesn't return any results. I'm able to access the Milestones property display it as a column.
<!DOCTYPE html>
<html>
<head>
<title>Grouped Grid Example</title>
<script type="text/javascript" src="/apps/2.0/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'ScheduleState',
'Milestones'
],
context: this.getContext(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: '{name} ({rows.length})'
}],
storeConfig: {
model: 'UserStory',
groupField: 'Project',
groupDir: 'ASC',
filters : [
{
property : 'Milestones',
operator : 'contains',
value : ' '
}
],
fetch: ['Project'],
getGroupString: function(record) {
var Project = record.get('Project');
return (Project && Project._refObjectName) || 'No Project';
}
}
});
}
});
Rally.launchApp('CustomGrid', {
name: 'Custom Grid'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
If you know the ObjectId of the milestone you're trying to filter by you can make a filter like this:
{
property : 'Milestones',
operator : 'contains',
value : '/milestone/12345'
}
Or, you can search by name as well:
{
property : 'Milestones.Name',
operator : 'contains',
value : 'A Milestone'
}
You can also just paste the url into your browser to test until you get the query right:
https://rally1.rallydev.com/slm/webservice/v2.0/hierarchicalrequirement?query=(Milestones contains /milestone/12345)
With Sencha Touch, I created a component to display a table for my mobile application.
Here's my component code:
Ext.define('MyApp.components.table.Table', {
extend: 'Ext.Container',
xtype: 'table',
config: {
cls: 'myTableCSS',
scrollable: 'vertical',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<table>',
'<tr>',
'<tpl for="headers">',
'<th>{html}</th>',
'</tpl>',
'</tr>',
'<tpl for="rows">',
'<tr class="{[this.config.id]}" >',
'<tpl for="columns">',
'<td>{html}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>'
}
});
Here's my view implementation:
xtype: 'table',
id: 'myRedTable',
data: [
{
headers: [
{ html: 'firstname' },
{ html: 'lastname' },
{ html: 'age' }
],
rows: [
{
columns: [
{ html: 'John' },
{ html: 'Smith' },
{ html: '38' },
]
}
]
}
],
In my component, when I use {[this.config.id]} I would like to get the id of my view implementation (i.e. myRedTable) but it doesn't work.
Is there any solution to achieve this?
It seems you wrote the syntax for inline arbitrary code correctly, but there's a problem with scope. this refers to the instance of Ext.XTemplate itself, not the table view.
You should try another way to get the reference of your table instance instead, for example, in your table's definition file:
initialize: function(){
var me = this;
me.setTpl('Ext.XTemplate',
// blah blah ...
// now you can use "me" to refer to your table instance
)
}
I would like to read an XML file stored in the same directory as this HTML file :
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="js/libs/yui/yui-min.js"></script>
<script type="text/javascript">
function lancement() {
alert("début fonction");
var myDS;
YUI().use("datasource-io", "datatable-base", "datasource-xmlschema", "datatabledatasource", "io", "datasource-textschema", "datasource-get", function(Y) {
myDS = new YAHOO.util.LocalDataSource('test.xml', {
responseType: YAHOO.util.DataSource.TYPE_XML,
responseSchema: {
resultNode: "Customer",
totalRecords: "TotalCount",
fields: ["Name", "Id"]
}
});
});
alert("fin fonction");
alert(myDS.size());
}
</script>
</head>
<body class="yui3-skin-sam" onload="lancement();">
<p>HELLO</p>
<div id="tab1"></div>
</body>
</html>
here is the XML file:
<?xml version="1.0"?>
<Customers>
<TotalCount>1</TotalCount>
<Customer><Name>John</Name><Id>1</Id></Customer>
</Customers>
but I never can read the number of lines.
do you know where does the error come from?
thanks
ok, I read a part of the tutorial and here is the result, which allows me to display a table but unfortunately without data inside (the XML file is the same) :
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!--<script src="js/libs/yui/yui-min.js"></script>-->
<script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
<script >
YUI().use("datasource-io", "datatable-base", "datasource-xmlschema", "io", "datasource-textschema", "datasource-get", "datasource", "datatable", "datatable-datasource", function(Y) {
myDS2 = new Y.DataSource.IO({source: "test.xml"});
myDS2.responseType = Y.DataSource.Type_XML;
// myDS2.responseSchema = {
// resultNode: "Customer",
// totalRecords: "TotalCount",
// fields: ["Name", "Id"]
// };
myDS2.plug(Y.Plugin.DataSourceXMLSchema, {
schema: {
resultListLocator: "result",
resultFields: [
{key: "Name", locator: "*[local-name() ='Name']"},
{key: "Id", locator: "*[local-name() ='Id']"}
]
}
});
var myColumnDefs = [
{key: "Name", sortable: true, resizeable: true},
{key: "Id", sortable: true, resizeable: true}];
var myDataTable = new Y.DataTable({
columns: myColumnDefs, data: myDS2});
myDataTable.render("#tab1");
});
</script>
</head>
<body class="yui3-skin-sam">
<p>HELLO</p>
<div id="tab1"></div>
</body>
</html>
can you help me?
Try this in the DataSourceXMLSchema :
myDS2.plug(Y.Plugin.DataSourceXMLSchema, {
schema: {
resultListLocator: "Customers/Customer",
resultFields: [
{key: "Name", locator: "Name"},
{key: "Id", locator: "Id"}
]
}
I have a few questions regarding paging a Ext Store.
The Store will pull an amount of historical data on page load.
If the number of records is greater than 10 then I need to implement paging on a custom component/view. The view will be generated with Ext.view.View and a XTemplate.
I would like to know if i can use the paging toolbar on a custom component and if i can query a Store where all the data is held locally. Therefore, not passing parameters to the server and pulling new data back but querying the data Store itself and displaying the results to the user.
It is possible using the Ext.ux.data.PagingMemoryProxy proxy. It is located in examples\ux\data\PagingMemoryProxy.js
The follow example show you how to paging images in a custom view create with generated with Ext.view.View and a XTemplate:
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
proxy: {
type: 'pagingmemory'
},
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
],
pageSize: 2
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
var store = Ext.data.StoreManager.lookup('imagesStore');
Ext.create('Ext.panel.Panel', {
title: 'Pictures',
autoScroll: true,
height: 300,
items: {
xtype: 'dataview',
store: store,
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available'
},
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
You can see it working in jsfiddle.net: http://jsfiddle.net/lontivero/QHDZU/
I hope this is useful.
Good luck!