I am using the lastest sencha cmd for the build with ext-5.0.1.
Everythings look good during the development status (http://www.imageupload.co.uk/5Med) but after the build.
All the textfields collapsed like shown (http://www.imageupload.co.uk/5MeQ), and have no response to the changes in width, minWidth, flex... etc.
And also the properties y and x are not functioning.
If someone had had similar situation before, please help, thx
My cmd is v5.0.3.324
Here are part of my code:
In my Main.js:
Ext.define('ExtTest2.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'ExtTest2.view.main.MainController',
'ExtTest2.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'fit'
},
itemId:'Stage'
});
MainController.js:
Ext.define('ExtTest2.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
init: function(){
this.Start();
},
Start: function(){
var data = {
itemId: "Page_Login",
xtype: "panel",
items: [
{
padding: 30,
layout:{
type: 'vbox',
align: 'center'
},
xtype: "fieldset",
y: "30%",
height: 150,
items: [
{
xtype: "textfield",
itemId: "Textfield_Username",
fieldLabel: "用戶名稱",
labelStyle: "color:#FFFFFF"
},
{
fieldLabel: "密碼",
itemId: "Textfield_Password",
labelStyle: "color:#FFFFFF",
xtype: "textfield"
},
{
itemId: "Button_Login",
text: "登入",
width: 100,
xtype: "button"
}
]
}
]
};
var container = Ext.ComponentQuery.query('#Stage')[0];
container.removeAll();
container.add(data);
container.updateLayout();
}
});
It is overnested because you add unnecessary container to app-main containing the fields.
It is very unusual to manipulate views from view controller like that - create a class for the fieldset, give it an alias (xtype) and simply instantiate that. Cramming controller handlers together with view definitions shall inevitably lead to Spaghetti Code.
You use vbox layout, without any flex or height to hold form fields. Form fields behave best in anchor layout that is the default for Ext.form.Panel.
Related
I was trying to develop a base container by extending Ext.Container, which have some default items in it. A subclass should add the items to the child component of the base class and not directly to the container instead. How to do this?
May i override the setItems/applyItems method to add the items to navigationView.add(items); ?? I'm unsure about how this works. Since i'm new to ExtJs, unable to identify which is the way to do it generically so that it won't affect my subclass to add n number of items to it either using inline or add(item) method.
AbstractClass
Ext.define('MyApp.container.AbstractMainContainer', {
extend: 'Ext.Container',
xtype: 'abstractmaincontainer',
requires: [
'MyApp.container.NavigationView',
'MyApp.control.NavigationBar'
],
config: {
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
width: '100%'
},
controller: 'maincontroller',
items: [{
xtype: 'navbar',
itemId: 'navbar'
}, {
xtype: 'navigationview',
itemId: 'navigationview',
reference: 'navigationview',
navigationBar: false,
layout: {
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
items: [
// new item should added here
]
}],
/**
* #method getContentView add the items to this rather than directly
* #return {void}
*/
getContentView: function() {
return this.down('#navigationview');
},
});
SubClass
Ext.define('MyApp.main.view.MainContainer', {
extend: 'MyApp.container.AbstractMainContainer',
requires: [
'MyApp.container.AbstractMainContainer'
],
config: {
},
items: [{
// we should not directly add items here this will remove the navbar and navigation view
// HOW TO ADD THIS IN A GENERIC WAY??
xtype: 'container',
layout:{
type:'card'
},
items: [{
xtype: 'button',
role: 'nav',
title: 'Card 1',
text: 'go to next',
handler: function() {
}
}, {
itemId: 'myCard',
title: 'Card 2',
html: '<h1>Card 2</h1>'
}],
}],
});
AFAIK, there's no "automatic" way to do it.
I can suggest some approaches:
First of all, check if you really need to do this: for example, you could move the navbar to the dockedItems config and move the navigationview one level up.
So your AbstractContainer will extend navigationview, navbar will be a dockedItem, and you will be able to use the items config as usual.
Otherwise, you could use a different config (let's say "extraItems" or "navItems"), and merge them overriding the abstract class initComponent function.
There, after a callParent that actually initialize the navigationview, you could do something like
this.down('navigationview').add(this.extraItems);
I wish to have the same form panel in each tab of the tabbed pannel. Is there a way that the same code is run for each tab without having to copy the code in the items list since that would be redundant.
Here is one way to do it -
You'll normally define a tabpanel and you give multiple panels as an array of items. For each of the panel inside the item, give the same panel container that you define below as the item.
{
xtype: 'tabpanel',
itemId: 'myTabPanel',
activeTab: 0,
plain: true,
items: [{
xtype: 'panel',
itemId: 'tab1',
layout: 'fit',
title: 'Strategies',
items: [{
xtype: 'myTabContainer'
}],
tabConfig: {
xtype: 'tab',
closable: false
}
}, {
xtype: 'panel',
itemId: 'tab2',
layout: 'fit',
title: 'Action Sets',
items: [{
xtype: 'myTabContainer'
}]
}],
listeners: {
tabchange: 'tabChangeListener' // define this and handle the actions for your tab change event
}
}
And here is a sample definition of the container/content for the tab. You can note that I'm using the alias for this container "myTabContainer" as xtype in each of the tabs above. This will make sure that the same view is linked to both the tabs.
Ext.define('MyTabContainer', {
extend: 'Ext.panel.Panel',
alias: 'widget.myTabContainer',
requires: [
// give all required classes
],
viewModel: {
type: 'dfstrategiesmaincontainer'
},
itemId: 'tabContent',
layout: 'border'
// Define all other required items and contents
}
Define a form and set that form as an item in each tab.
//Define the form
Ext.define('App.view.MyForm', {
extend:'Ext.form.Panel',
alias: 'widget.myform',
bodyPadding:10,
items: [....]
});
//Use the form as an item in each tab
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Tab1',
xtype: 'myform'
}, {
title: 'Tab2',
xtype: 'myform'
}]
});
I'm trying to use controller in my program.Controller name is "Main" and code is given below.
refs: [
{
ref: 'navigation',
selector: 'navigation'
},
{
ref: 'ContentPanel',
selector: 'ContentPanel'
},
{
ref: 'viewport',
selector: 'viewport'
}
]
and i have a view port with following code.
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
requires: [
'MyApp.view.Header',
'MyApp.view.Navigation',
'MyApp.view.ContentPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'header',
height: 136,
region: 'north'
},
{
xtype: 'navigation',
width: 207,
region: 'west'
},
{
xtype: 'ContentPanel',
width: 431,
flex: 2,
region: 'center'
}
]
});
now my problem is i have to get an object of ContentPanel when i click on naviagation(tree panel). i tried using
var content= this.getContentPanel();
i have one more form panel add i want to add that to the controller. and i want to get the instance of the form and put it inside the content panel and display.
var form= this.getMyform();// i didnt add Myform to the controller yet because i dont know to add reference properly
content.add(form);
My main problem is that i cant instantiate the content panel and form in ItemClick event of navigation(tree panel)
thank you
A ref should start with a lower case letter. The same is valid for xtypes. ref: 'contentPanel' will define a getter getContentPanel. Since contentPanelis different from ContentPanel, I'm not sure, if in your case the getter is created or not.
I'm having an issue with multiple instances of an ext js grid all showing the same data. I am using Ext js 4.1.1.
I have a main tab panel. In that panel, there are multiple people tabs. Inside each person tab is a details tab and a family tab.
The details tab is a simple form with text boxes, combo boxes, etc. The family tab has both a dataview and a grid.
If only one person tab is open at a time, everything works fine. As soon as a second person is opened, the family tabs look the same (both the dataview and the grid). It seems to me that the problem has something to do with the model. Perhaps they are sharing the same instance of the model, and that is causing one refresh to change all the data. The dataview and the grid both have the same problem, but I think that if I can fix the problem with the grid, then I can apply the same logic to fix the dataview. I will leave the code for the dataview out of this question unless it becomes relevant.
PersonTab.js
Ext.require('Client.view.MainTab.PersonDetailsForm');
Ext.require('Client.view.MainTab.PersonFamilyForm');
Ext.require('Client.view.MainTab.EventForm');
Ext.define('Client.view.MainTab.PersonTab',
{
extend: 'Ext.tab.Panel',
waitMsgTarget: true,
alias: 'widget.MainTabPersonTab',
layout: 'fit',
activeTab: 0,
tabPosition: 'bottom',
items:
[
{
title: 'Details',
closable: false,
xtype: 'MainTabPersonDetailsForm'
},
{
title: 'Family',
closable: false,
xtype: 'MainTabPersonFamilyForm'
},
{
title: 'page 3',
closable: false,
xtype: 'MainTabEventForm'
}
]
});
MainTabPersonFamilyForm.js
Ext.require('Client.view.MainTab.PersonFamilyHeadOfHouseholdDataView');
Ext.require('Client.view.MainTab.PersonFamilyGrid');
Ext.define('Client.view.MainTab.PersonFamilyForm',
{
extend: 'Ext.form.Panel',
alias: 'widget.MainTabPersonFamilyForm',
waitMsgTarget: true,
padding: '5 0 0 0',
autoScroll: true,
items:
[
{
xtype: 'displayfield',
name: 'HeadOfHouseholdLabel',
value: 'The head of my household is:'
},
{
xtype: 'MainTabPersonFamilyHeadOfHouseholdDataView'
},
{
xtype: 'checkboxfield',
boxLabel: "Use my Head of Household's address as my address",
boxLabelAlign: 'after',
inputValue: true,
name: 'UseHeadOfHouseholdAddress',
allowBlank: true,
padding: '0 20 5 0'
},
{
xtype: 'MainTabPersonFamilyGrid'
}
],
config:
{
idPerson: ''
}
});
MainTabPersonFamilyGrid.js
Ext.require('Client.store.PersonFamilyGrid');
Ext.require('Ext.ux.CheckColumn');
Ext.define('Client.view.MainTab.PersonFamilyGrid',
{
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
xtype: 'grid',
title: 'My Family Members',
store: Ext.create('Client.store.PersonFamilyGrid'),
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig:
{
plugins:
{
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns:
[
{ text: 'Name', dataIndex: 'Name'},
{ text: 'Relationship', dataIndex: 'Relationship', editor: { xtype: 'combobox', allowblank: true, displayField: 'display', valueField: 'value', editable: false, store: Ext.create('Client.store.Gender') }},
{ xtype: 'checkcolumn', text: 'Is My Guardian', dataIndex: 'IsMyGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true }},
{ xtype: 'checkcolumn', text: 'I Am Guardian', dataIndex: 'IAmGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true } }
],
height: 200,
width: 400,
buttons:
[
{
xtype: 'button',
cls: 'trash-btn',
iconCls: 'trash-icon-large',
width: 64,
height: 64,
action: 'trash'
}
]
});
PersonFamilyGrid.js (store)
Ext.require('Client.model.PersonFamilyGrid');
Ext.define('Client.store.PersonFamilyGrid',
{
extend: 'Ext.data.Store',
autoLoad: false,
model: 'Client.model.PersonFamilyGrid',
proxy:
{
type: 'ajax',
url: '/Person/GetFamily',
reader:
{
type: 'json'
}
}
});
PersonFamilyGrid.js (model)
Ext.define('Client.model.PersonFamilyGrid',
{
extend: 'Ext.data.Model',
fields:
[
'idFamily',
'idPerson',
'idFamilyMember',
'Name',
'Relationship',
'IsMyGuardian',
'IAmGuardian'
]
});
relevant code from the controller:
....
....
var personTab = thisController.getMainTabPanel().add({
xtype: 'MainTabPersonTab',
title: dropData.data['Title'],
closable: true,
layout: 'fit',
tabpanelid: dropData.data['ID'],
tabpaneltype: dropData.data['Type']
});
personTab.items.items[0].idPerson = dropData.data['ID'];
personTab.items.items[1].idPerson = dropData.data['ID'];
thisController.getMainTabPanel().setActiveTab(personTab);
....
....
You're setting the store as a property on your grid prototype and creating it once at class definition time. That means that all your grids instantiated from that class will share the exact same store.
Note that you're also creating a single cellediting plugin that will be shared with all instantiations of that grid as well. That definitely won't work. You likely will only be able to edit in either the first or last grid that was instantiated.
In general you should not be setting properties like store, plugins, viewConfig or columns on the class prototype. Instead you should override initComponent and set them inside that method so that each instantiation of your grid gets a unique copy of those properties.
Ext.define('Client.view.MainTab.PersonFamilyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MainTabPersonFamilyGrid',
waitMsgTarget: true,
padding: '5 0 0 0',
title: 'My Family Members',
height: 200,
width: 400
initComponent: function() {
Ext.apply(this, {
// Each grid will create its own store now when it is initialized.
store: Ext.create('Client.store.PersonFamilyGrid'),
// you may need to add the plugin in the config for this
// grid
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'PersonFamilyGridTrash'
}
},
columns: /* ... */
});
this.callParent(arguments);
}
});
It's hard to tell exactly, but from the code you have submitted it appears that you are not setting the id parameter on your tabs and your stores, which causes DOM collisions as the id is used to make a component globally unique. This has caused me grief in the past when sub-classing components (such as tabs and stores) and using multiple instances of those classes.
Try giving each one a unique identifier (such as the person id) and then referencing them using that id:
var personTab = thisController.getMainTabPanel().add({
id: 'cmp-person-id',
xtype: 'MainTabPersonTab',
...
store: Ext.create('Client.store.PersonFamilyGrid',
{
id: 'store-person-id',
...
});
Ext.getCmp('cmp-person-id');
Ext.StoreManager.lookup('store-person-id');
Hope that helps.
I am trying to create a form embedded inside a Panel and trying to retrieve the contents of the form fields from within the controller.
Below is my view and controller code.
Ext.define('MyApp.view.SignIn', {
extend: 'Ext.Container',
requires: ['Ext.Button','Ext.form.Panel'],
xtype: 'loginPage',
config : {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
html:'<img src="resources/icons/logo.png" />',
items: {
iconMask: true,
align: 'left',
text: 'Sign In',
handler: function(){
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
xtype: 'loginPage',
url: 'contact.php',
layout: 'vbox',
id: 'signinform',
items: [
{
xtype: 'fieldset',
title : 'Enter Login Information:',
instructions: 'All fields are required',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'emailfield',
name: 'Email',
label: 'Email',
placeHolder: 'Valid email'
},
{
xtype: 'passwordfield',
name: 'Password',
label: 'Password',
placeHolder: '6 characters'
}]
},
{
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Login',
ui:'confirm',
id:'Login-btn',
width: '100px',
flex: 1
}, {
width: '100px'
}, {
xtype: 'button',
text: 'Register',
ui: 'decline',
width: '100px',
flex: 1,
handler: function(){
this.getParent().getParent().destroy();
}
}]//Buttons array
}//Form completion
]
}).showBy(this); //Panel created
}//Function complete
}
},
{
layout: {
type: 'vbox',
pack:'center',
align: 'center'
},
items:[{
html:'<h2>My tool</h2><h3 style="color:#F47621">Simple, intuitive and powerful data management tool.</h3>',
styleHtmlContent: true,
}
]
},
]
},
initialize: function() {
this.callParent(arguments);
},
});
And here is my controller code. I just checked the controller code it seemed to be fine with a simpler form view. So I guess the issue is with the view.
Ext.define("MyApp.controller.SignIn", {
extend : 'Ext.app.Controller',
config : {
refs : {
home : '#homePage',
login : '#loginPage',
SignIn : '#signinform'
},
control : {
'#Login-btn': {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function() {
var formValues = this.getSignIn().getValues();
console.log(formValues.username);
console.log(formValues.password);
}
});
]
},
initialize: function() {
this.callParent(arguments);
},
});
What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help
Here:
var panel = Ext.create('Ext.Panel', {
...
You are instantiating a simple panel not a form panel. May be you want to say:
var panel = Ext.create('Ext.form.Panel', {
...
I believe the reason you are getting undefined is because those components don't exist when the view is created.
Instead of creating the panel in your view (Ext.create('Ext.Panel'...) with a handler function you should consider defining it as an item in your xtype:loginpage container with hidden : true. Then via a listener from the controller call show() on the hidden component.
I find that if I keep event listeners/handlers in my controllers, and layout/display logic in my views my application becomes much more managable.
I also try to avoid calling Ext.create(Ext.SomeCmpt) and instead use the hidden attribute.
Hope this helps.