I am trying to make one form in "extjs" in which i want to use "vbox layout" so that i can place textfield and a button in the same line but unable to do that please help me as early as possible please ???
This is the following code which i am using to create a form:
[{ formitems :{[xtype:'dsqfieldcontainer'
layout: {
type: 'vbox'
},
items:[{mapping:'ChannelURL',
name:'ChannelURL',
fieldLabel:'Channel URL',
xtype:'dsqtextfield'
},
{mapping:'Look_Up_ChannelID',
name:'Look_Up_ChannelID',
fieldLabel:'Look_Up_ChannelID',
xtype:dsqbutton
}
]
] },
{
mapping:'CHANNELNAME',
name:'CHANNELNAME',
fieldLabel:'Channel Name',
xtype:'dsqtextfield'
},
{
mapping:'CHANNELID',
name:'CHANNELID',
fieldLabel:'Channel ID',
xtype:'dsqtextfield'
},
{
mapping:'REFRESHTOKEN',
name:'REFRESHTOKEN',
fieldLabel:'Refresh Token',
xtype:'dsqtextfield'
}
}]
Just check below code and you will get your mistake. In my code, textbox and button are showing in one line by hbox layout. Just check it and let me know if you get any issue. My fiddler account is not working. That's why i can't give you link.
My example -
Ext.create('Ext.window.Window', {
height: 400,
width: 400,
items: [
{
xtype:'fieldcontainer',
layout: {
type: 'hbox'
},
items:[{
mapping:'ChannelURL',
name:'ChannelURL',
fieldLabel:'Channel URL',
xtype:'textfield'
},
{
mapping:'Look_Up_ChannelID',
name:'Look_Up_ChannelID',
xtype:'button',
text: 'Button Name'
}]
}]
}).show();
Changes in your example -
items:[
{
xtype: 'fieldcontainer',
layout: {
type: 'hbox'
},
items: [{
mapping: 'ChannelURL',
name: 'ChannelURL',
fieldLabel: 'Channel URL',
xtype: 'textfield'
}, {
mapping: 'Look_Up_ChannelID',
name: 'Look_Up_ChannelID',
xtype: 'button',
text: 'Button Name'
}]
},
{
mapping: 'CHANNELNAME',
name: 'CHANNELNAME',
fieldLabel: 'Channel Name',
xtype: 'textfield'
}, {
mapping: 'CHANNELID',
name: 'CHANNELID',
fieldLabel: 'Channel ID',
xtype: 'textfield'
}, {
mapping: 'REFRESHTOKEN',
name: 'REFRESHTOKEN',
fieldLabel: 'Refresh Token',
xtype: 'textfield'
}
]
Try with:
layout: {
type: 'table'
}
Related
I have 4 forms, which called to the main view by buttons through controller.
How I must to link fields of forms with Django database, through REST api?
For example I have form:
Ext.define('Foresto.view.forms.RenterData', {
extend: 'Ext.form.Panel',
title: 'Renter',
header: {
cls: 'header-cls'
},
xtype: 'foresto-renterdata',
layout: 'fit',
scrollable: true,
tools: [{
type: 'minimize',
handler: function() {
this.up("panel").hide();
}
}, {
type: 'save'
}, {
type: 'close',
handler: function() {
this.up("panel").close();
}
}],
requires: ['Foresto.view.forms.RenterType'],
url: 'save-form.php',
defaults: {
xtype: 'textfield',
labelWrap: true,
required: true,
afterLabelTextTpl: [
'<span style="color:red;font-weight:normal" data-qtip="Required">*</span>'
]
},
items: [{
xtype: 'foresto-rentertype',
label: 'Type',
name: 'rentertype'
}, {
xtype: 'selectfield',
label: 'Document',
name: 'document',
}, {
label: 'Document number',
name: 'document_num'
}, {
label: 'NAME',
name: 'name_represent'
}, {
label: 'Position',
name: 'position_represent'
}]
});
And values of
name: 'document'
From Django:
{"license","rent agreement","order", "ticket"}
Where I can to add api url? I have to create proxy store or I can add api into form?
Please help! thanks!
I want to make two grids in two side-by-side panels. I tried with following code:
Ext.define('BlackWhiteList', {
extend: 'Ext.panel.Panel',
xtype: 'blackwhitelist',
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults: {
border: false
},
fieldDefaults: {
labelWidth: 110,
anchor: '100%'
},
items: [{
title: 'Black List',
cls: 'blackList',
items: [
grid
]
},
{
title: 'White List',
items: [
grid
]
}
]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
});
But at the moment in only shows me the title "Black List" and "White List" with empty content. I get no error messages or anything which can show me what is wrong here.
I use ExtJS 6.
This is really a tricky question, You will need to fix 2 things in your code so that your code work.
First is how you are defining the grid and where you used it, the a/m code will yield undefined value for the grid by the time of execution. why? this is related to hoisting in JS, the JS will recognize the grid variable but will not assign it's value so when you are creating your Ext panel you have grid value equals to undefined.
So first thing is to move the var grid block of code to the top.
But now you will face a 2nd problem you will see only one grid is rendered, why?
Because the grid is an object which is reference type, and this will make the two panels try to show the same grid and this is impossible so it is shown only on one place.
So to fix this problem you need to use Ext.define for the grid and assign xtype to it, so when you use xtype in the panel more than one time Ext will create 2 complete diffrent instance of your grid. Or you can make var grid1 and var grid2 but this is not good
Finally a working example Fiddle
Code Sample
App.js
Ext.application({
name: 'Test',
requires: ['Test.MyGrid'],
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
defaults: {
border: false
},
fieldDefaults: {
labelWidth: 110,
anchor: '100%'
},
items: [{
title: 'Black List',
cls: 'blackList',
items: [{
xtype: 'myGrid'
}]
}, {
title: 'White List',
items: [{
xtype: 'myGrid'
}]
}
]
});
}
});
app/MyGrid.js
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
Ext.define('Test.MyGrid', {
extend:'Ext.grid.Panel',
store: store,
xtype:'myGrid',
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
});
Hope I made things clear :)
When I click a add button it needs to add a same container again. The below I have given my code segment
var rulepanel = Ext.apply(me, {
items: [{
xtype: 'uxform',
id: 'rule',
bodyPadding: 10,
items: [{
xtype: 'container',
items: [{
xtype: 'combobox',
fieldLabel: 'match',
name: 'name',
allowBlank: false,
placeholder: 'match'
}]
}, {
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Product/KPI',
name: 'name',
}, {
xtype: 'button',
id: 'add',
text: 'Add',
handler: function(button, event) {
//rulepanel.insert(0, Ext.create(rulepanel.model));
// so here how can I add it
}
}],
}]
}]
});
So when click the add button what I need is I need to clone the "match,product/kpi and add button" fields. How can I achieve this task. I have tried with cloneconfig(). But couldn't achieve it. Thanks in advance.
In ExtJs, You create your own component as common and you can reuse whenever you required in application. You need to use Ext.define
Defines a class or override. A basic class is defined like this:
Ext.define('My.awesome.Class', {
someProperty: 'something',
someMethod: function() {
alert(s + this.someProperty);
}
...
});
var obj = new My.awesome.Class();
obj.someMethod('Say '); // alerts 'Say something'
In this FIDDLE, I have created a demo using your code as reference. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ProductKpi', {
extend: 'Ext.container.Container',
xtype: 'productkpi',
layout: {
type: 'hbox',
align: 'stretch'
},
margin:5,
items: [{
xtype: 'combobox',
flex:1,
fieldLabel: 'Product/KPI',
name: 'name',
}, {
xtype: 'button',
margin:'0 5',
text: 'Add',
handler: function (button, event) {
button.up('#rule').add({
xtype: 'productkpi'
})
}
}],
});
Ext.create('Ext.form.Panel', {
title: 'Demo',
renderTo: Ext.getBody(),
id: 'rule',
bodyPadding: 10,
items: [{
xtype: 'container',
items: [{
xtype: 'combobox',
fieldLabel: 'match',
name: 'name',
allowBlank: false,
placeholder: 'match'
}]
}, {
xtype: 'productkpi'
}]
});
}
});
I have a JSFiddle Demo which creates a Grid with editing enabled. The problem I am facing is that the textfields that are displayed when editing a row are too narrow. They are about half the column width.
// Data to be bound to the grid.
var albums = [{
title: 'Frampton Comes Alive!',
artist: 'Peter Frampton',
genre: 'Rock',
year: '01/06/1976'
}, {
title: 'Led Zeppelin II',
artist: 'Led Zeppelin',
genre: 'Rock',
year: '10/22/1969'
}, {
title: 'Queen',
artist: 'Queen',
genre: 'Rock',
year: '07/13/1973'
}];
// Imports
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
// Models
Ext.define('AlbumManager.model.Album', {
extend: 'Ext.data.Model',
fields: [{
name: 'title',
type: 'string'
}, {
name: 'artist',
type: 'string'
}, {
name: 'genre',
type: 'string'
}, {
name: 'year',
type: 'date',
dateFormat: 'm/d/Y'
}]
});
// Stores
Ext.define('AlbumManager.store.AlbumStore', {
extend: 'Ext.data.JsonStore',
storeId: 'albumStore',
model: 'AlbumManager.model.Album',
data: albums,
autoLoad: 'true'
});
// Plugins
Ext.define('AlbumManager.plugin.AlbumEdit', {
extend: 'Ext.grid.plugin.RowEditing',
clicksToMoveEditor: 1,
autoCancel: false
});
// Create view DOM onReady.
Ext.onReady(function () {
// Store
var albumStore = Ext.create('AlbumManager.store.AlbumStore');
var rowEditing = Ext.create('AlbumManager.plugin.AlbumEdit');
var grid = Ext.create('Ext.grid.GridPanel', {
id: 'gridPanel',
title: 'Albums',
width: 400,
height: 200,
renderTo: 'grid-example',
store: albumStore,
columns: [{
header: 'Album Title',
dataIndex: 'title',
flex: 1,
editor: {
width: 300,
allowBlank: false
}
}, {
header: 'Artist',
dataIndex: 'artist',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Genre',
dataIndex: 'genre',
width: 60,
editor: {
allowBlank: true
}
}, {
header: 'Year',
dataIndex: 'year',
width: 60,
editor: {
xtype: 'datefield',
allowBlank: true
},
renderer: Ext.util.Format.dateRenderer('M Y')
}],
plugins: [rowEditing],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Add New Album',
handler: function () {
// Create a model instance
var r = Ext.create('AlbumManager.model.Album', {
title: 'New Album',
artist: 'New Artist'
});
albumStore.insert(0, r);
rowEditing.startEdit(0, 0);
},
disabled: false
}, {
xtype: 'button',
text: 'Delete Album',
handler: function () {
Ext.MessageBox.confirm('Delete', 'Are you sure ?', function (btn) {
if (btn === 'yes') {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
albumStore.remove(sm.getSelection());
if (albumStore.getCount() > 0) {
sm.select(0);
}
}
});
},
disabled: false
}]
}]
});
});
In your fiddle you use javascript from Ext JS 4.2.0 version but CSS from Ext JS 4.0.2a version.
You always should use javascript files and CSS from same version of Ext JS framework. Otherwise you can get unexpected results as you can see in your fiddle.
When I setup your fiddle with javascript and CSS from Ext JS 4.2.1 version, everything works without problems: https://fiddle.sencha.com/#fiddle/3ft
I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url.
I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help.
Code:
searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
store: searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all.
I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file.
I've also tried to load the file in the app seperately by using:
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php?keywords=test',
reader: {
type: 'tree',
root: 'items'
}
}
});
and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search'
I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working :(
I don't know if this is of help, but the main javascript file is:
var tabPanel;
var homePanel = new Ext.Panel({
title: 'Home',
iconCls: 'home',
fullscreen: true,
scroll:{direction:'vertical',threshold:7},
items: [{
html: '<center><p>Home</p></center>'
}]
});
var servicePanel = new Ext.Panel({
title: 'Services',
iconCls: 'team',
fullscreen: true,
items: [{
html: '<center>Please choose a service</center>'
}]
});
var searchPanel = new Ext.Panel({
title: 'Search',
iconCls: 'search',
fullscreen: true,
items: [{
html: '<center>Search</center>'
}]
});
var feedtabpanel = new Ext.Carousel({
title: 'More',
iconCls: 'more',
fullscreen: true,
sortable : true,
xtype:'panel',
scroll:{direction:'vertical',threshold:7},
items: [
{
title: 'Contact',
html : '<center><h1>Contact Us</h1></center>',
},
{
title: 'Feedback',
html : '<center><h1>Let us know what you think<h1></center>',
},
{
title: 'Tell a friend',
html : '<center><h1>Tell your friends how much you love this app</h1></center>',
}
]
});
searchForms = new Ext.TabPanel({
fullscreen: true,
title: 'Search',
displayField: 'text',
store: searchForm,
iconCls: 'search',
items: [{
id: 'searchSubmit',
xtype: 'form',
standardSubmit : true,
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Keywords',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'keywords',
id: 'keywords',
placeHolder: 'EG: Music, TV',
autoCapitalize : true,
required: true,
useClearIcon: true
}]
}, {
xtype: 'fieldset',
title: 'Advanced Search',
items: [{
xtype: 'selectfield',
name: 'genre',
id: 'genre',
label: 'Genre',
options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
}]
}, {
xtype: 'selectfield',
name: 'media',
id: 'media',
label: 'Media',
options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
}]
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Search',
ui: 'confirm',
scope: this,
hasDisabled: false,
handler: function(){
searchForms.submit({
url: 'search.php'
});
}
}, {
text: 'Reset',
ui: 'decline',
handler: function(){
searchForms.reset();
}
}]
}]
}]
});
Ext.regModel('mobile', {
fields: [
{name: 'text', type: 'string'}
]
});
var searchForm = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'search.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var store = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'areas.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Location',
displayField: 'text',
store: store,
iconCls: 'locate',
});
nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = nestedList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
var services = new Ext.data.TreeStore({
model: 'mobile',
proxy: {
type: 'ajax',
url: 'subcats.php',
reader: {
type: 'tree',
root: 'items'
}
}
});
var servicesList = new Ext.NestedList({
fullscreen: true,
title: 'Services',
displayField: 'text',
store: services,
iconCls: 'team',
});
servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
var store = subList.getStore(),
record = store.getAt(subIdx),
recordNode = record.node,
title = servicesList.renderTitleText(recordNode),
card, preventHide, anim;
if (record) {
card = record.get('card');
anim = record.get('animation');
preventHide = record.get('preventHide');
}
if (card) {
tabPanel.setCard(card, anim || 'slide');
tabPanel.currentCard = card;
}
});
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
tabPanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
animation: {
type: 'cardslide',
cover: true
},
items: [
homePanel,
nestedList,
servicesList,
searchForms,
feedtabpanel
]
});
}
})
Just update your store with the filter() function. First you have to add the correct filterParam to your store configuration. After this, you can call the filter() function in your search button handler. E.g.
searchForm.filter('keywordParam', searchfield.getValue());
After this, your store will get updated without the page refreshing. You could then use a DataView to show your search results.