I am new in ExtJS, and I already, have an example of doctors list but, in doctor detail page, Its look like a populated form, Here is my view file:
Ext.define("GS.view.DoctorView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.doctorview",
config:{
scrollable:'vertical'
},
initialize: function () {
this.callParent(arguments);
var backButton = {
xtype: "button",
ui: "back",
text: "Back List",
handler: this.onBackButtonTap,
scope: this
};
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Doctor Profile",
items: [
backButton,
{ xtype: "spacer" }
]
};
var bottomToolbar = {
xtype: "toolbar",
docked: "bottom",
items: [
]
};
var doctorNameView = {
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
};
var doctorDescView = {
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
};
this.add([
topToolbar,
{ xtype: "fieldset",
items: [doctorNameView, doctorDescView]
},
bottomToolbar
]);
},
onBackButtonTap: function () {
this.fireEvent("backToListCommand", this);
}
});
Which steps I take to convert it to dataview, or how to use my custom HTML?
Firstly, your question is very vague so you should go through some dataview tutorial or article to understand why you really need a data view here because list is a dataview and form is what you are creating as details view.
http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2
http://docs.sencha.com/touch/2-1/#!/guide/dataview
To use your custom HTML you have to use xtemplate
http://docs.sencha.com/touch/2-1/#!/api/Ext.XTemplate
Related
So I have made a simple list component view. When I tap a listing's disclosure button, I have a controller that will create a detail view that also pushes data about that respective listing into the detail view for use in a tpl property.
here is my code:
app/view/Main:
Ext.define ('Prac.view.Main', {
extend: 'Ext.Panel',
xtype: 'mainpanel',
requires: ['Prac.store.Names'],
config:{
layout: 'vbox',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Mainpanel',
items: [
{
xtype: 'button',
ui: 'confirm',
iconCls: 'add',
action: 'addName',
align: 'right'
}
]
},
{
xtype: 'list',
flex: 1,
grouped: true,
indexBar: true,
itemTpl: '{firstName} {lastName}',
store: 'Names',
onItemDisclosure: true,
}
]
}
});
app/controller/Main:
Ext.define ('Prac.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
view: 'viewpanel',
det: 'detail'
},
control: {
'list' : {
disclose: 'showDetail'
}
}
},
showDetail: function(list, record) {
var det = Ext.create('Prac.view.Detail', {
data: record.data
});
Ext.Viewport.setActiveItem(det);
}
});
app/view/Detail:
Ext.define('Prac.view.Detail', {
extend: 'Ext.Panel',
xtype: 'detail',
config: {
items: [
{
xtype: 'titlebar',
title: 'Detail View',
docked: 'top'
},
{
xtype: 'panel',
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
//html: 'Hello, World!'
tpl: 'Hello {firstName} {lastName}',
data: null
}
]
}
});
I think that the issue might be of scope. Since the tpl property is nested inside the 'items' property rather than the config, the component is unable to use the data passed to the detail view from the controller. So I am wondering not just how to push data from one view to another, but how to push data from one view to a specific component in another view.
You are absolutely right. You are not setting data of the nested panel, you are setting the data of the Prac.view.Detail instead.
Data is a config property of a panel. That means sencha will create a setData() method for you. When you use this method internally applyData() or updateData() will be called respectively.
In your case this should work:
Ext.define('Prac.view.Detail', {
extend: 'Ext.Panel',
xtype: 'detail',
config: {
items: [
{
xtype: 'titlebar',
title: 'Detail View',
docked: 'top'
},
{
xtype: 'panel',
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Details',
//html: 'Hello, World!'
tpl: 'Hello {firstName} {lastName}',
data: null
}
]
},
updateData: function ( newData, oldData ) {
var nestedPanel = this.down( 'panel' );
nestedPanel.setData( newData );
},
applyData: function ( newData, oldData ) {
var nestedPanel = this.down( 'panel' );
nestedPanel.setData( newData );
}
});
So when one sets the data of the Prac.view.Detail the applyData method will be called and it grabs the nested panel to set its data instead.
I want to pass the an ID from a Tabview (myView1) to a Controller(theController) then after that I want that Controller class to pass data to another Tabview (myView2) at the same Panel. Anyone has any Idea, how can I do this?
You can do like this
in your controller:
config:{
refs:{
myView1: "myView1Ref",
myView2: "myView2Ref"
},
controls:{
myView1:{
idgiven: "onIdGiven"
}
}
},
onIdGiven: function(id){
this.getMyView2().setData(yourData);
}
in MyView1, when you want to give the id, just do
this.fireEvent(yourId);
This is my Tab Panel View class (MyTabPanel)
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
items: [
{
xtype: 'container',
title: 'Tab 1',
id: 'tab1',
items: [
{
xtype: 'textfield',
label: 'User'
},
{
xtype: 'container',
height: 46,
margin: '5px',
items: [
{
xtype: 'button',
ui: 'action',
width: 173,
text: 'Send Data'
}
]
}
]
},
{
xtype: 'container',
title: 'Tab 2',
id: 'tab2',
tpl: [
'{id}'
]
},
{
xtype: 'container',
title: 'Tab 3',
id: 'tab3'
}
]
}
});
This is my Controller :
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
Tab1: '#tab1',
Tab2: '#tab2',
Tab3: '#tab3'
},
control: {
"Tab2": {
activate: 'onTabpanelActivate1'
}
}
},
onTabpanelActivate1: function(newActiveItem, container, oldActiveItem, eOpts) {
var Rec = [{id:1}]; // this should come from my #tab1 tab and set to #tab2 tab
this.getTab2().setRecord(Rec); // So this is the problem I am facing
}
});
Ext.define('myapp.controller.theController', {
extend: 'Ext.app.Controller',
config: {
refs: {
views: [
'myapp.view.myView1',
'myapp.view.myView2',
],
refMyView1: 'myView1',
refMyView2: 'myView2',
},
control: {
'button[action=submit]':{ // on tab of submit button
tap: 'submitTapHandler'
},
},
},
submitTapHandler: function(){
var view1data = this.getRefMyView1().getValues(); // view1data contain all field data of view1 in record form
//controller to view pass data
var myView2 = Ext.create('myapp.view.myView2');
// create a record that key value have name of fields and value to pass to that field
var record;
// set record key value
myView2.setRecord(record);
}
})
I am new to Senscha Touch and I have been struggling with this for hours.
I am trying to create an application where the main page has 1-3 tabs where title and content(html5) depends on json data.
My model has two fields: "title" and "text".
My store has dummy data for 2 tabs:
Ext.define('***', {
extend: 'Ext.data.Store',
config: {
model: '***',
xtype: 'informationTabs',
data: [
{
title: 'Museum',
text: 'Random html5'
},
{
title: 'Museum_2',
text: 'Random html5_2'
},
{
title: 'Museum_3',
text: 'Random html5_2'
}
]
}
})
To show it as a list i have the following code:
Ext.define('***', {
extend: 'Ext.Panel',
xtype: 'informationsTabs',
config: {
title: 'InformationTabs',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'InformationTabs',
itemTpl: '{title}, {text}'
}
]
}
});
How do I get that to instead of making a list with two items, create two tabs with their title and text inside?
So in this case i should have two tabs.
Tab 1: Title = "title_1", content = "random_html5"
Tab 2: Title = "title_2", content = "random_html5_2"
Update:
With the following code (thanks kevhender!) it "works", except i get an extra "[object Object]" as the first tab. This option is also the only one with blue background when you click that tab.
Also this.callParent(); gets "Unresolved function or method".
Ext.define('***', {
extend: 'Ext.TabPanel',
xtype: 'informationsTabs',
config: {
title: 'informationsTabs',
items: [
{
xtype: 'tabbar',
store: 'InformationTabs',
title: '',
html: ['']
}
]
},
initialize: function() {
var items = [];
Ext.getStore('InformationTabs').each(function(rec) {
items.push({
title: rec.get('title'),
html: rec.get('text')
});
});
this.setItems(items);
this.callParent();
} });
screenshot: http://oi41.tinypic.com/2gsn53p.jpg
Since the store is dynamic, you won't be able to do the full definition in your static config block. You could put the tab creation into the initialize method, something like this:
Ext.define('***', {
extend: 'Ext.tab.Panel',
xtype: 'informationsTabs',
config: {
title: 'InformationTabs',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'InformationTabs',
itemTpl: '{title}, {text}'
}
]
},
initialize: function() {
var items = [];
Ext.getStore('InformationTabs').each(function(rec) {
items.push({
title: rec.get('title'),
html: rec.get('text')
});
});
this.setItems(items);
this.callParent();
}
});
Am new to sencha touch, my problem is i have a separate view to show a form panel by clicking on control event the form panel view will load, but when i click on the event nothing display on my screen. Just a blank screen to show..I dont know what am doing. The form panel is taken from sencha form panel tutorial
The following are my form panel view
Ext.define('WinReo.view.AddContact', {
extend: 'Ext.Container',
xtype: 'addcontact',
requires: [
'Ext.TitleBar'
//'Ext.Video'
],
config: {
layout:'fit'
},
initialize:function(){
console.log('inside initialize');
var formPanel = Ext.create('Ext.form.Panel', {
//xytpe:'formpanel',
fullscreen: true,
layout:'fit',
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
formPanel.setValues({
name: 'Ed',
email: 'ed#sencha.com',
password: 'secret'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
}
});
This is the controller event to show form panel view
onItemSwiped: function(list,index,target,record,e)
{
var addcontact= Ext.create('WinReo.view.AddContact');
Ext.Viewport.add(addcontact);
Ext.Viewport.setActiveItem(addcontact);
},
Just a simple task but am spending too much time to fix this one..please help me to solve this issue. Thanks in advance..
Your right about setActiveItem and you need to use it. because Ext.Viewport.add() only adds to viewPort not shows the view.
So only problem in your code is you created formPanel, but not added it in the AddContact View.
...........
// same code
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
this.add(formPanel); // add this line
}
});
See this fiddle
I am working on extjs4, my case is:
Extjs mvc is used to build my application, viewport is the toppest container of my application, west region is a tree, center region is a tabpage container, when click the tree item, a new page with certain content will be created. then in this page, I popup a model window, this model window just mask the page, not the whole viewport, so that I can still click the tree item to open another new page.
I have achieved this, but there is a problem, if I have already open a model window in a tab, and I switch to a another tab then return back, the model window is hidden, but I still want that window to show if I haven't closed it. Can anyone help me, is there a better way except using ifram in tabpage?
app.js:
Ext.application({
name: 'SysOpv',
appFolder: '/Js/AppSysOpv/app',
autoCreateViewport: true,
controllers: [
'Category',
'Band'
]
});
Viewport:
Ext.define('SysOpv.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
initComponent: function() {
this.items = {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 80,
items: [
{ xtype: 'component', html: 'setup' }
]
}],
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 250,
xtype: 'categorytree'
}, {
id: 'maintabpanel',
flex: 1,
xtype: 'tabpanel'
}]
};
this.callParent(arguments);
}
});
Tree View:
Ext.define('SysOpv.view.category.Tree', {
extend: 'Ext.tree.Panel',
alias: 'widget.categorytree',
title: 'setup',
rootVisible: false,
useArrows: true,
hideHeaders: true,
columns: [{
flex: 1,
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name'
}],
store: 'Category',
initComponent: function() {
this.callParent(arguments);
}
});
Window View:
Ext.define('SysOpv.view.edit.Band', {
extend: 'Ext.window.Window',
alias: 'widget.editband',
title: 'Setup',
layout: 'fit',
constrain: true,
modal: true,
initComponent: function() {
this.items = [{
xtype: 'form',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
}
});
Tree Controller:
Ext.define('SysOpv.controller.Category', {
extend: 'Ext.app.Controller',
models: [ 'Category' ],
stores: [ 'Category' ],
views: [ 'category.Tree' ],
init: function() {
this.control({
'categorytree': {
itemdblclick: this.onTreeItemdblclick
}
});
},
onTreeItemdblclick: function (tree, record, item, index, e, eOpts) {
var mainTabs = Ext.getCmp('maintabpanel');
var tabId = record.get('id');
if (mainTabs) {
var checkTab = mainTabs.getComponent(tabId);
if (checkTab) {
mainTabs.setActiveTab(checkTab);
} else {
var controller;
var list;
switch (tabId) {
case '0101':
list = Ext.widget('listband');
break;
}
if (list)
{
var tabPage = mainTabs.add({
id: record.get('id'),
title: record.get('name'),
closable: true,
layout: 'fit',
items: [ list ]
});
mainTabs.setActiveTab(tabPage);
}
}
}
}
});
Module Controller:
Ext.define('SysOpv.controller.Band', {
extend: 'Ext.app.Controller',
models: [ 'Band' ],
stores: [ 'Band' ],
views: [ 'list.Band', 'edit.Band' ],
init: function() {
this.control({
'listband button[action=edit]': {
click: this.onEdit
}
});
},
onEdit: function(button, e, eOpts) {
var edit = Ext.widget('editband');
var list = button.up('gridpanel');
if (list.getSelectionModel().hasSelection()) {
var record = list.getSelectionModel().getLastSelected();
// I use renderTo here but have no effect,
// so I search in the google find a way to show the window in tab,
// and not mask all the viewport.
button.up('#0101').add(edit);
edit.down('form').loadRecord(record);
edit.show();
} else {
console.log('Not selected');
}
}
});
Below is example solution:
Ext.create('Ext.TabPanel', {
renderTo: 'container',
items: [
{
title: 'Tab 1',
itemId: 'tab1',
items: [
{ xtype: 'button', text: 'Show window', handler: function(){
var tab = this.up('#tab1'); // Find tab
var win = Ext.widget('editband'); // Find window
this.up('tabpanel').showWindow(tab, win);
} }
]
},
],
showWindow: function(tab, w){
tab.add(w);
tab.popup = w;
w.on('close', function() { // clean up after window close
delete this.popup;
}, tab, { single: true });
w.show();
},
listeners: {
tabchange: function(panel, tab) {
if (tab.popup !== undefined) { // show window after tab change
tab.popup.show();
}
}
}
});
Basically I've created event handler for tabchange event in which I re-show window.
Working sample: http://jsfiddle.net/aCxYU/1/